HMR (Hot Module Replacement)

HMR은 애플리케이션이 실행 중인 상태에서 전체 페이지 새로고침 없이 변경된 모듈만 교체하는 기술이다. 개발 중 코드를 수정하면 변경 사항이 즉시 브라우저에 반영된다.

해당 개념이 필요한 이유

• 전체 새로고침의 문제: 코드 수정 → 페이지 리로드 → 애플리케이션 상태(state) 초기화
• 폼에 입력한 데이터, 스크롤 위치, 열려 있던 모달 등이 전부 사라짐
• 앱이 커질수록 리로드 시간도 길어짐
• HMR은 이 문제를 해결하여 상태를 보존하면서 변경된 코드만 교체

AS-IS (전체 새로고침)

코드 수정 → 전체 페이지 리로드 → 상태 초기화

예: 3단계 폼의 3단계에서 CSS 수정
→ 리로드 → 1단계부터 다시 진행해야 함
→ 앱이 클수록 리로드 시간도 증가

TO-BE (HMR)

코드 수정 → 변경된 모듈만 교체 → 상태 유지

예: 3단계 폼의 3단계에서 CSS 수정
→ CSS만 교체 → 3단계 상태 그대로 유지
→ 앱 크기와 무관하게 빠른 업데이트

동작 원리 (webpack 기준)

1. 파일 수정 감지
2. Compiler가 "Update" 생성
   ├── Updated Manifest (JSON): 변경된 청크 목록
   └── Updated Chunks (JS): 변경된 모듈의 새 코드
3. HMR Runtime이 업데이트 적용
   ├── check(): 매니페스트 다운로드 → 변경된 청크 확인
   └── apply(): 변경 모듈 교체 → accept 핸들러 실행
4. 해당 모듈에 HMR 핸들러가 없으면 → 부모로 버블업
5. 엔트리까지 핸들러가 없으면 → 전체 리로드로 폴백

Vite에서의 HMR

Vite의 HMR은 기존 webpack HMR과 다른 방식으로 동작한다:

특성	webpack HMR	Vite HMR
기반	번들된 코드 위에서 동작	Native ESM 위에서 동작
속도	앱이 커지면 느려짐	앱 크기와 무관하게 빠름
범위	변경된 청크 전체 재빌드	변경된 모듈 ~ 가장 가까운 경계까지만 무효화
캐싱	별도 설정 필요	HTTP 304 + Cache-Control 자동 활용

Vite HMR의 핵심: ESM 기반이므로 수정된 파일과 그 경계 사이의 모듈만 무효화한다. 앱에 수천 개의 모듈이 있어도 HMR 업데이트 속도는 일정하게 빠르다.

참고 문서

• webpack - Hot Module Replacement