파일 변수 Deep-Dive

간단 소개

파일 변수의 개념과 클라이언트/서버 환경에서의 활용법, 주의사항 및 환경에 구애받지 않고 파일 변수를 다루는 방법을 설명한다.

AI Summary

파일 변수의 정의 및 클라이언트 사이드 활용
- 파일 변수는 모듈 범위 전역 변수로, 특정 파일 내에서만 접근 가능한 변수이다.
- 클라이언트 사이드에서 Redux 없이 유저 환경 정보와 같이 추적 불필요한 상태 관리에 유용하다.
- 싱글턴 패턴을 활용하여 최초 참조 시점에 값을 초기화할 수 있다.
클라이언트 사이드 사용 시 유의점 및 서버 사이드 활용
- SSG 페이지에서는 클라이언트 사이드 파일 변수 활용이 불가능하며, Hard Navigation 시 파일 변수 값이 초기화된다.
- Document 객체의 모듈 맵 덕분에 한 번 임포트된 모듈은 가비지 컬렉션 대상이 되지 않는다.
- 서버 사이드에서는 파일 변수가 모든 유저에게 공유되므로 AsyncLocalStorage를 사용하여 각 유저에게 독립적인 컨텍스트를 제공해야 한다.
환경에 상관없이 파일 변수 다루기
- 클라이언트와 서버에서 모두 사용할 파일 변수를 정의하고, UserAgent 클래스를 통해 클라이언트와 서버의 isMobile 값을 각각 관리한다.
- Next.js의 _document를 활용하여 서버 값을 클라이언트에 넘겨주고, 클라이언트에서는 해당 값을 참조하여 파일 변수를 초기화한다.