파일 변수 Deep-Dive[카카오 FE 블로그]

아티클 링크 : https://fe-developers.kakaoent.com/2024/240715-handling-file-variables/

파일 변수 Deep-Dive | 카카오엔터테인먼트 FE 기술블로그

 

아티클 내용

화두는 상태관리할 때 굳이 redux를 써야 하나에서 시작한다. Redux 자체의 문제는 아니지만 아티클에 의하면 팀에서 리덕스를 남용하는 일이 생겼고, 이를 개선하는 과정에서 찾은 방법 중 하나가 파일 변수이다.

 

파일 변수는  카카오팀에서 만든 용어다. 기존에는 자바스크립트에서 전역 스코프, 블록 스코프, 함수 범위 스코프가 자주 언급된다. 하지만 ES6에서 모듈이 추가되면서 모듈 범위 스코프도 존재한다.  모듈 내에 있는 전역 상태를 카카오팀에서는 파일변수라고 명명헀고 이를 활용해서 추적이 불필요한 상태에 사용한다.

이에 대한 원리로는 웹 사이트 진입 시 한 번 생성되고 해제되지 않는 Document 객체는 모듈 맵을 가지고 있으며, 이 모듈 맵은 특정 모듈을 단 한 번만 가져오도록 보장하기 때문이다. 
따라서 아래 두 가지 경우에 대해서는 파일 변수 사용을 유의해야 한다.

1. 특정 페이지에 대해 SSG를 사용하는 경우

2. Hard Navigation으로 페이지를 이동하는 경우

 

아티클은 SSG에서 유의해야 한다에서만 끝나지 않는다. next.js에서는 SSR도 하기 때문에 서버사이드에서 파일 변수를 사용하게 될 경우가 생긴다. 이에 대한 해결방법으로 분기처리하여 서버사이드와 클라이언트 사이드 모두 파일변수를 쓸 수 있는 클래스를 생성해서 사용한다.

 

느낀점

흔히 리엑트 컴퍼넌트에서 전역변수를 쓰면 잘못되었다고 말하는 경우가 많다. 첫 부트캠프에서 앞선 말을 듣고 상수 값이 아닌 것을 모듈 단위에서 사용하는 것을 막연하게 거리끼게 되었던 것 같다. 그 당시에 들었던 대답이 '누가 그렇게 사용하냐?' 였었는데  왜 사용하지 않는지에 대한 깊은 고민을 이어가지는 못했었다. 하지만 아티클에서는 나와 다르게 모듈맵과 연관지어 모듈 단위의 생명주기에 대해서 파악하고, 이를 싱글톤 패턴을 활용하여 추적이 불가능한 상태를 관리하는 과정이 너무나 흥미로웠다.  그 당시 깊게 파고들지 않았던 나 자신에 대한 회고가 되었다,

'리액트 훅을 활용한 마이크로 상태 관리' 책에서 상태관리 로직을 설명하면서 파일 스코프, 모듈 스코프에 대한 언급이 있다. 파일 상태의 경우 결국  리랜더링을 보장해주지는 않는다. 상태관리 라이브러리로서의 기능을 하려면 구독기능이 추가되어야 하고, 그렇기에 단순히 사용하는 파일상태의 경우에는 추적이 불필요한 상태에만 사용하는 것이었다.