프론트엔드
파일 변수 Deep-Dive
두줄요약
상태의 추적 필요성에 따라 Redux, react-query, Zustand, 파일 변수의 역할을 분리했습니다. 서버 파일 변수는 AsyncLocalStorage로 요청별 컨텍스트를 격리해야 함을 설명합니다.
문제 상황
- 모든 상태를 Redux 전역 스토어와 redux-saga로 관리하며 플로우 복잡도와 Devtools 부하 증가
- 변경 추적이 불필요하거나 요청별 격리가 필요한 값까지 동일한 방식으로 관리한 한계
구조와 흐름
- 서버 상태는 react-query, 추적이 필요한 클라이언트 상태는 Zustand, 추적 불필요 상태는 모듈 범위 파일 변수로 분리
- 클라이언트 파일 변수는 getter 기반 지연 초기화와 ES 모듈 맵 캐시를 통해 Soft Navigation 동안 유지
- 서버 파일 변수는 모든 요청이 공유하므로 AsyncLocalStorage로 요청별 컨텍스트 격리
주의할 점
- SSG 렌더링 중 window 접근 불가와 Hard Navigation 시 파일 변수 초기화
- 서버에서 사용자별 값·민감 정보를 일반 모듈 변수로 저장할 때 데이터 공유 및 노출 위험
- 서버 값을 인라인 스크립트로 클라이언트에 전달할 때 민감 정보 보호 필요
적용해볼 점
- 값 변경에 따른 리렌더링·후속 로직·요청별 격리 필요성을 기준으로 상태 관리 도구 선택
- 서버와 클라이언트 공통 접근이 필요할 때 환경별 저장 방식은 감추고 단일 getter 제공
