17. HMR이란?

🔥 HMR이란?

좋아요, 아주 중요한 개념이에요!
HMR은 Hot Module Replacement(핫 모듈 교체) 의 약자예요.
개발 중에 코드 수정하면, 브라우저가 페이지를 새로고침 없이 즉시 반영해주는 기능이에요.

✅ 예를 들어:

<template>
  <h1>Hello, World!</h1>
</template>

➡️ 이걸 Hello, Vue!로 바꿨을 때

HMR이 있으면 → 페이지를 새로 고침하지 않고 텍스트만 바뀜!

💡 HMR의 장점

장점설명

⚡ 빠른 개발 속도	페이지 전체 새로고침 없이 변경된 부분만 즉시 반영
😎 상태 유지	예: 입력 폼에 텍스트 입력한 상태가 유지됨
🔄 더 빠른 테스트	코드 수정 → 바로 반영 → 확인까지 순식간

🛠️ HMR이 없으면?

• 수정할 때마다 브라우저가 전체를 다시 로딩
• 앱 상태가 초기화됨
• 폼, 탭, 토글 등 다시 클릭해야 함 😫

🚀 Vite와 HMR

Vite는 기본적으로 HMR을 내장하고 있어서 따로 설정할 필요 없이 그냥 됩니다.
코드 저장만 해도 브라우저가 순식간에 반응하죠.

🎨 시각화

변경 감지 ↓ Vite dev server ↓ 브라우저에 바뀐 모듈만 푸시 ↓ 브라우저 화면 "부분 업데이트" 코드 복사

한 마디로 정리하면:

HMR = 코드 바꾸고 저장하면, 바로 화면에 반영되는데 새로고침도 안 함. 완전 마법처럼!