카카오 스토리FE, Redux 의존성 줄이는 '파일 변수' 활용법 공개

카카오 스토리FE개발팀이 웹 서비스 확장 과정에서 Redux의 과도한 의존성을 줄이기 위해 파일 변수(File Variable) 개념을 도입하고 이를 클라이언트와 서버에서 안전하게 관리하는 노하우를 공개했다. Redux는 복잡한 플로우로 인한 가독성 저하와 불변성 추적의 어려움이 있을 수 있어, 변경 추적이나 UI 리렌더링과 무관한 상태는 파일 변수로 분리하는 전략을 취했다.

파일 변수의 정의와 클라이언트 사이드 활용

파일 변수는 특정 모듈 내에서만 접근 가능한 ES6 전역 변수로, Redux의 액션과 리듀서 보일러플레이트 없이 상태를 관리한다. 예를 들어 모바일 여부(isMobile)를 판단할 때, 최초 참조 시에만 User-Agent를 파싱하는 싱글턴 패턴을 적용해 성능을 최적화한다. 다만 SSG 환경에서는 window 객체가 없어 초기화가 불가능하며, 하드 내비게이션 시 페이지가 리로드되므로 변수가 초기화되는 점을 유의해야 한다.

서버 사이드의 데이터 유출 위험과 AsyncLocalStorage

서버에서 파일 변수를 사용할 경우, 모든 유저가 동일한 모듈(컨텍스트)을 공유하게 되어 최초 접속한 유저의 정보가 이후 모든 사용자에게 노출되는 개인정보 유출 위험이 있다. 이를 해결하기 위해 Node.js 16.4 이상에서 지원하는 AsyncLocalStorage를 활용한다. AsyncLocalStorage는 각 요청별로 독립적인 저장소 컨텍스트를 유지하므로, 유저 간 데이터 공유 문제를 방지할 수 있다.

클라이언트-서버 통합 관리

서버와 클라이언트에서 동일한 값을 참조하도록 UserAgent 클래스를 통해 파일 변수를 추상화했다. 서버에서는 AsyncLocalStorage를 사용해 값을 저장하고, _document를 통해 서버에서 계산된 값을 클라이언트의 window 객체에 주입한다. 클라이언트에서는 최초 참조 시 window 객체에서 값을 꺼내 싱글턴 패턴으로 초기화함으로써, 환경 구분 없이 getIsMobile() 함수 하나로 일관된 값을 사용할 수 있게 구현했다.