1. Recoil을 이용한 상태관리
2. Local Storage vs Session Storage vs Cookie
3. Access Token & Refresh Token 관리
4. JWT 토큰
5. form을 서버와 편리하게 통신하기 위해 사용하는 react-hook-form

1. Recoil을 이용한 상태관리

Recoil 은 Redux와 같이 전역 상태 관리를 편리하게 도와줄 수 있는 모듈로, 로그인 상태를 모든 페이지에 공유하기 위한 상태 관리를 위해 사용하고자 한다.

전역 상태 관리 모듈로는 jotai, redux (toolkit) 등 다양하게 존재하지만, 다른 모듈을 사용하는 필요성에 대해서는 아직 명확하게 판단 근거가 서지 않기 때문에, 대중적으로 사용되는 Recoil을 통해 그 원리를 파악해보고자 한다.

가장 먼저 진행해야 하는 것은 atom을 구성해주는 것이다.

src/container/state.ts

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist();

export const USER_DATA = atom<string>({
  key: '#user_data',
  default: '',
  effects: [persistAtom],
});

Atom은 전역 상태의 단일 단위라고 볼 수 있다.

effects(_UnStable) 안정되지 않은 기능이라고 하여 뒤에 UnStable을 붙이기도 함

→ state persistence(상태 지속성), state synchronization(상태 동기화), managing history(히스토리 관리), logging(로깅) 등등 유용한 어플리케이션과 관련한 정책을 지정하고 구성하는 역할