누워서 코딩하기 - 떡 먹는 것처럼 쉽고 재밌게! 🤭

React Query란? 리액트 쿼리는 API 연동에 특화된 라이브러리 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줌 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됨 사용하는 이유 API 호출을 통해 받아온 데이터를 useState를 사용하여 저장하였다고 가정하자. 해당 화면에서 머무르는 동안은 Hooks 함수로 인하여 변화하는 값을 계속해서 저장이 가능하다. 그러나 요청하는 API의 수가 많아질수록 그 과정은 더욱 복잡하고 귀찮아질 것이다. 컴포넌트 내부에 선언된 useState이기 때문에 사용자가 다른 화면으로 넘어가면 해당 변수에 저장된 값도 역시 사라진다. 따라서 나중에 다시 컴포넌트를 생성할 때 기존에 받아온 응답..

Hooks React 16.8 버전에서 새롭게 추가된 기능이다. 이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 컴포넌트의 생명 주기에 맞춰 특정 작업을 수행할 수 있게 되었음. 컴포넌트의 생명 주기 모든 컴포넌트는 생성 → 업데이트 → 제거 의 생명주기를 갖는다. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해주어야 불필요한 업데이트를 방지할 수 있다. 따라서 Hooks를 써서 컴포넌트의 생명 주기에 맞춰 원하는 작업을 제때 실행시킬 수 있게 해야 한다. 1. useState const [state, setState] = useState(i..

GitHub란? GitHub에 프로젝트를 올리기 전, Git에 대해 설명해보도록 하겠다. Git이란? Git은 형상 관리 도구 중 하나로, 컴퓨터 파일의 변경 사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산버전 관리 시스템이다. 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료 공개 소프트웨어이다. 개발자들 간에 공동 개발, 혹은 지식 공유의 목적으로 Git을 많이 사용하기 때문에 해당 프로젝트를 잘 아는 것이 중요하다. GitHub에 프로젝트 올리기 1. 자신의 Github 사이트에서 레포리토리를 생성한다. 좌측 상단의 + 버튼을 누른 후, "New repository" 클릭 → Repository 이름 입력 → Create r..

Next.js란 ? - React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크 - 특별한 설정 없이 SSR, SEO부터 Typescript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크 SSR - 서버 사이드 렌더링 - 서버 측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 요청이 올 때마다 해당하는 html 문서를 그때 그때 생성하여 반환 - ex) react CSR - 클라이언트 사이드 렌더링 - 서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것 - ex) next.js Next.js의 작동 방식 1. 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드 실행 2. React.js를 서버 측에서 Pr..

React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크 React-Native의 장점 두 플랫폼(iOS, Android)을 동시에 개발할 수 있음 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능 제공 Fast Refresh: 컴포넌트가 변할 때 즉각적으로 반응한다는 기능으로, 프로젝트 내 대부분의 수정 내용이 1~2초 내로 변경사항이 적용됨. "수정 → 새로고침", "수정 → 컴파일 → 새로고침" 이라는 번거로운 작업..

토큰의 만료 FCM 토큰은 정해진 수명이나 갱신 주기가 없다. 따라서 시간과 관계없이 아래 이벤트가 발생하지 않는다면 만료되지 않는다. 앱이 인스턴스 ID를 삭제한 경우 앱이 새 기기에서 복원되었을 경우 사용자가 앱을 제거/재설치 한 경우 사용자가 앱 데이터를 지운 경우 토큰의 갱신 상기와 같이 fcm token은 정해진 수명이나 갱신 주기가 없으나, 오래된 토큰은 권장하지 않기 때문에 유효기간(2주)가 지나면 새로운 토큰을 발급받는 것이 좋다. 따라서 마지막 fcm token 발급 시점으로부터 14일 이상 경과한 경우 현재 fcm token을 삭제하고 재 발급한다. // 토큰 삭제 await messaging().deleteToken(); // 재발급 const token = await messagin..

토큰의 생성 앱을 처음 실행할 때 FCM은 클라이언트 앱 인스턴스에 대한 등록 토큰 생성 // React native에서의 토큰 생성 import messaging from '@react-native-firebase/messaging'; const token = await messaging().getToken(); React Native의 경우 android, iOS 설정을 각각 해줘야 한다. iOS 권한 iOS에서는 사용자가 앱에게 알림 권한을 부여하지 않으면 알림 전송을 할 수 없다. 알림 권한 종류 granted not determined(default) declined 사용자가 권한 요청을 거절한다면 다시 요청할 수 없으며, 사용자가 직접 iOS 설정에서 변경해야 한다. // React nativ..

FCMToken이란? firebase Cloud Messaging의 약자로, google firebase에서 사용하는 클라우드 메시징 서비스로, 무료로 메세지를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. 그렇다면 FcmToken은 왜 사용하는가? fcmToken은 어플리케이션에서 사용자에게 푸시 알림을 줄 때 필요하다. fcmToken은 디바이스마다 다르게 부여 되는데, 서버는 이 토큰으로 디바이스를 구분한다. 이 토큰으로 구분하지 않는다면, 서버는 어떤 디바이스에 알림을 줘야하는 것인지 모르기 때문이다. DB의 유저 테이블에 fcm Token 필드를 추가하고, 푸시 알림을 주고자 할 때 유저의 토큰 필드를 조회하여 프론트에 보내주는 방식으로 앱 푸시 알림을 구현할 수 있다. Fireba..

Javascript란 웹 개발에 주로 사용되며, 웹 페이지를 대화식으로 만드는 프로그래밍 언어 클라이언트 측 스크립팅 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 TypeScripte란 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 ➡️ 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름. React Native에서의 코드 차이 변수 선언 // Javascript const [ data, setData ] = useState([]); const [ text, setText ] = useS..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. Context를 써야 하는 이유 1. props을 명시적으로 넘겨주고 있는 예시 class App extends React.Component { render() { return ; } } function Toolbar(props) { // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서 ThemeButton에 전달해야 합니다. // 앱 안의 모든 버튼이 테마를 알아야 한다면 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다. return ( ); } class ThemedButton extends React.Component { render() { return ; ..