문서
ESBuild를 위한 HMR, 직접 만들기
이근혁 · 토스 · 토스 기술 블로그
소개
프론트엔드 개발 경험을 향상시키는 HMR(Hot Module Replacement)의 원리와 다양한 번들러가 HMR을 어떻게 지원하는지 살펴보고, ESBuild 기반 번들러를 직접 개발한 과정을 소개드려요.
AI 핵심 요약
ESBuild 기반 React Native 번들러에는 HMR이 기본 제공되지 않아, 코드 변경 때마다 앱을 새로고침해야 하는 불편이 있었다. 이를 해결하기 위해 SWC 플러그인으로 모듈을 런타임에서 등록·교체할 수 있게 변환하고, ESBuild의 onLoad 경로와 Metafile을 활용해 모듈 ID와 의존성 그래프를 구성했다. 별도의 파일 감시와 웹소켓 전송으로 변경 모듈을 클라이언트에 전달하고, React에는 react-refresh를 적용해 상태를 유지하며 갱신하도록 했다. 그 결과 빠른 빌드 속도와 실시간 코드 반영을 함께 제공하는 개발 환경을 만들었으며, 플러그인 환경에서는 증분 빌드와 별도로 캐싱도 고려해야 한다.
- ESBuild 플러그인의 onLoad 훅에서 args.path를 모듈 ID로 활용할 수 있다.
- Metafile의 imports 정보를 정제하면 모듈 간 의존성과 역방향 의존성을 추적할 수 있다.
- ESBuild watch 모드만으로 변경 파일을 식별할 수 없으므로 별도의 파일 감시 기능이 필요하다.
- React 컴포넌트의 상태를 유지하며 갱신하려면 react-refresh로 컴포넌트 시그니처를 추적한다.
- 플러그인을 사용하는 경우 증분 빌드 API와 별도로 파일 변경 시간을 이용한 캐싱을 구현해야 한다.
