들어가기

패키지 잠금 파일 (package-lock.json, yarn.lock)

[GeekNews] Bun vs. Next.js

상태와 전역 상태 사이

• 리액트에서 컴포넌트 내부 상태는 리렌더링이 동반되는 값으로 결정한다.
• 이 상태가 자식이 아닌 다른 컴포넌트들에게 영향(리렌더링)을 미칠 때 전역상태로 관리해야할 필요성에 의해 라이브러리 사용을 결정한다.

웹에서 다루는 데이터

• 문자열, 파일 스트림, 동영상 스트림

• 유저 데이터(이름 등), 토큰(access, refresh token)

• 기준

  • 백엔드 기준 영속성(=재사용성)을 지녀야하는가? 예 → 데이터 fetching 라이브러리: 사용자 프로필 정보 (이름, 이메일, 사진 등). 상품 또는 서비스 목록

  • 아니오 → UI 상태나 사용자 인터페이스와 밀접한 상호작용 하는 데이터인가? 예 → 전역상태라이브러리

    ⇒ UI 관련 예시

    • 드롭다운 메뉴의 열림/닫힘 상태
    • 모달 창의 표시 상태
    • 폼 컨트롤 상태 (ex: 입력 필드, 체크박스 선택)
    • 페이지네이션 상태
    • 엑세스 토큰 (로컬 스토리지에도 저장 필수)
    • 언어 설정 또는 테마 설정
    • 사용자별 환경 설정

전역 상태 라이브러리

1. 플럭스 아키텍처 지향(top-down): Redux(2015), Zustand(2019)

2. 아토믹 아키텍처 지향(bottom-up): Recoil(2020), jotiai(2021)

   

   [dev] Atomos — A New Recoil Visualization Tool Powered by React Flow Recoil uses atoms to send small bits of state to various components throughout a React application, and uses selectors as pure functions to modify these atoms

3. 프록시 아키텍처 지향(중개자): mobx(2016추정), valtio(2021)

   

   우선참고자료: https://kinsta.com/blog/reverse-proxy/

선택하는 기준?

1. 공신력 있는 사람(2명 이상)의 의견을 비판적으로 수용하기