파일 변수 Deep-Dive
프론트엔드
파일 변수 Deep-Dive
두줄요약
웹 서비스 규모가 커지며 Redux 전역 관리의 한계를 줄이기 위해 상태를 유형별로 분리한 사례를 소개했습니다. 추적이 불필요한 값은 파일 변수로 관리하고, SSG와 하드 네비게이션 제약도 함께 설명했습니다.
핵심 내용
- 웹 서비스 규모가 커지며 모든 상태를 Redux 전역 스토어로 두는 방식의 한계가 드러난 사례
- 상태를 서버 상태, 추적이 필요한 상태, 추적이 불필요한 상태로 분리해 각각 react-query, Zustand, 파일 변수로 관리하는 접근
- 파일 변수를 모듈 스코프 전역 변수로 정의하고 getter로 초기화해 재사용하는 방식
- 클라이언트에서는 SSG, Hard Navigation에서의 제약과 ES 모듈 캐시 특성에 따른 유지 조건을 함께 점검
적용해볼 점
- 변경 추적이 필요 없는 값은 상태 관리 라이브러리 대신 파일 변수로 단순화
- 페이지 이동 방식과 렌더링 방식에 따라 파일 변수 사용 가능 여부를 사전 확인
- 서버 환경에서는 요청 단위로 값이 달라질 수 있어 파일 변수 적용 범위 신중히 판단