React Query 사용을 위해 Query Client Provider로 App을 감싸주자 [matzip/front/App.tsx] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import {NavigationContainer} from '@react-navigation/native'; import React ...

React Query란 리액트 쿼리는 서버 데이터를 가져오고 캐싱하고 동기화하면 업데이트해주는 라이브러리이다 React Query 설치 (프론트 프로젝트 폴더에서) 1 npm i @tanstack/react-query React Query에서 사용할 데이터 타입들을 미리 지정해두자 [matzip/front/src/types/domain.t...

앱 로그인 설계 Step1: 앱 실행시 Refresh Api Call을 호출하여 성공, 실패를 나눈다 Step2 : 실패한경우 신규 유저 또는 오래전에 로그인한 사용자로 토큰이 만료된 사용자로 토큰을 제거하고 다시 로그인을 하게하여 로그인 성공시 AccessToken(header), RefreshToken(storage)을 저장하고 ...

리액트 컴포넌트의 라이프 사이클 사람의 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 존재한다 이를 다른 말로는 라이프 사이클이라고 부르며 리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분할 수 있다 graph TD; Mount:탄생-->Update:업데이트; Update:업데이트-->Unmount:죽음; ...

InputField를 수정하여 ForwardRef 사용하기 [matzip/front/src/components/InputField.tsx] 지난 시간까지 로그인, 회원가입 페이지를 구현하였는데 사용자 편의성을 위해 이메일을 입력후 엔터나 다음버튼을 누르면 비밀번호 입력창으로 자동으로 포커스가되면 좋겠다는 생각을 했다.. 그러기 위해서는 React...

이번에는 리액트 앱을 CRA(Create React App)으로 생성 후 만들어지는 파일과 폴더의 구성에 대해 작성해본다 package.json 파일 : 해당 프로젝트의 앱에 어떤 라이브러리가 설치되어있는지, 리액트 버전은 몇 버전인지 등에 대한 정보를 알 수 있다 public 폴더 : 리액트에서 공용으로 사용하고...

이번에는 리액트 앱을 직접 만들고 어떻게 사용하는지를 확인해본다 Create React App으로 리액트 앱 만들기 리액트 앱은 처음 만들 때 꽤 복잡한 설정을 직접 해주어야 한다. Node.js를 많이 사용해본 사람에게는 쉬울 수 있지만 입문자에게는 꽤나 큰 장벽이다 따라서 리액트 앱을 만들기 위해 Create React App이라는 Node....

Elements 개요 Elements는 요소, 성분의 뜻으로 React앱 또는 기존 웹을 구성하는 가장 작은 블록이다 많은 Elemnets들을 관리하는 주최를 DOM이라 하며 기존 웹에도 DOM이 당연히 존재한다 기존 웹을 React에서 관리하기 위해 기존 웹 HTML 파일 어딘가에 div태그 있다고 가정했을때 이 안에 들어가는 모든 엘리먼트들을...

Component 개요 React는 모든 페이지가 Component로 구성되어있고 하나의 Component는 여러개의 Component로 구성될 수 있다 (블록을 생각하면 이해하기 쉽다) Component는 JavaScript함수와 유사하며 Props라고 하는 임의의 값을 받은 후 화면에 어떻게 표시되는지를 기술하는 React Element를 반환...

회원가입 페이지 구현하기 [matzip/front/src/screens/auth/SignupScreen.tsx] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ...