프론트엔드
ESBuild를 위한 HMR, 직접 만들기
두줄요약
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
핵심 내용
- HMR의 개념과 동작 원리 소개
- Metro, Webpack, Vite, ESBuild의 HMR 구현 방식 비교
- ESBuild 기반 번들러에 HMR을 직접 구현한 과정 정리
구조와 흐름
- 런타임 모듈 등록과 교체 가능한 구조 마련
- 모듈 ID 생성, 의존성 그래프 구축, 파일 변경 감지 연결
- React 환경에서는 react-refresh로 상태 유지 리렌더링 지원
적용해볼 점
- ESBuild의 onLoad, metafile, watch를 조합한 확장 설계
- 변경 모듈과 역의존성 전파를 통한 부분 갱신
- 증분 빌드와 캐싱으로 개발 속도 보완