Webpack의 HMR과 자동 새로고침 현상

HMR이란?

• HMR은 Hot Module Replacement의 줄임말이다.
• HMR을 활성화하면 모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다.
• 즉, 브라우저를 새로고침 하지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다. 새로고침을 위한 LiveReload 대신에 사용할 수 있다.
• 이로 인해서 코드를 수정하고 바로 웹 애플리케이션에 반영이 되게 할 수 있다.
• 조심할점으로는 HMR은 프로덕션용이 아니고 개발용으로만 사용해야 한다.

동작 방법

1. 애플리케이션은 HMR 런타임에 업데이트된 내용이 있는지 확인 요청
2. 런타임에서 업데이트된 내용을 비동기적으로 다운로드받고 애플리케이션에 알림
3. 애틀리케이션은 런타임에 업데이트 요청
4. 런타임은 업데이트를 동기적으로 적용

---

자동 새로고침 현상

프로젝트를 하다가 자동적으로 새로고침이 발생하여 개발할 때 불편한 적이 있었다.

이 프로젝트의 초기 세팅은 CRA가 아니라 인프런에서 제로초님의 Slack 클론 코딩 강좌를 보고 세팅한 것이다. 그렇기에 왜 자꾸 새로고침이 발생하는지 이유를 알 수 없었다. 그러다가 GPT한테 이유를 물어봤는데 HMR이 활성화되어 있어서일 수도 있다고 그랬다.

요즘 GPT를 잘 믿지 않지만 한번 속는셈 치고 해 봤다.

HMR을 비활성화, Reload 추가하고 비활성화(실패)

2개의 속성을 모두 비활성화하니까 오랜 시간이 지나도 새로고침이 발생하지 않았다.

하지만 코드를 수정하고 바로 웹 애플리케이션에 반영해 주는 것이 HMR 속성인데, 이를 비활성화하니까 코드 수정이 바로 반영되지 않았다.

HMR을 활성화, Reload 추가하고 비활성화(성공)

Reload만 비활성화하니까 드디어 원하는 대로 동작했다.

새로고침은 발생하지 않고, 코드를 수정하면 Input에 입력된 데이터들이 유지되고 반영이 되었다!