ESBuild를 위한 HMR 직접 만들기

이 게시물은 HMR(Hot Module Replacement)의 원리와 다양한 번들러들의 HMR 지원 방식을 살펴보고, ESBuild 기반 번들러에서 직접 HMR 기능을 구현한 과정을 소개합니다.

HMR 개념과 번들러별 구현

• HMR은 코드 변경 시 페이지 새로고침 없이 변경 내용을 즉시 반영하는 기능으로 개발 생산성 향상에 기여
• Metro, Webpack, Vite 등은 각각의 방식으로 런타임에서 모듈을 등록하고 변경된 모듈만 교체
• ESBuild는 기본적으로 HMR을 제공하지 않아 자체 구현이 필요

ESBuild 기반 HMR 구현 주요 내용

• 런타임 모듈 접근을 위해 SWC 플러그인을 이용한 코드 변환
• 모듈 식별자(ID)로 절대 경로를 활용하여 고유 모듈 관리
• Metafile을 이용해 의존성 그래프를 구축하고 변경 전파 관리
• 파일 변경 감지 기능을 별도로 구현하여 상태 동기화
• 변경된 모듈을 변환 후 웹소켓으로 클라이언트에 전송, 평가하여 교체
• React 환경에서는 react-refresh를 활용해 내부 상태 유지하며 리렌더링 지원
• 증분 빌드 API와 캐싱을 조합해 효율적 빌드 구현

결과 및 의의

이 구현으로 토스의 React Native 개발 환경에서 빠른 빌드 속도와 실시간 코드 반영이 가능해졌으며, 개발자 경험이 크게 향상되었습니다.