[ETC] HMR (Hot Module Replacement)

Hot Module Replacement (HMR)
웹 애플리케이션을 개발할 때 사용하는 모듈 교체 기술

이 기술은 웹 애플리케이션의 실행 중에 개별 모듈을 교체하거나 수정하면서

애플리케이션을 다시 로드하지 않고 변경 사항을 반영

이렇게 하면 개발자가 변경사항을 실시간으로 확인하면서 효율적으로 작업할 수 있다.

HMR의 핵심 이점은 아래와 같다.

1. 개발 속도 향상: 변경 사항을 반영하려면 전체 애플리케이션을 다시 로드할 필요가 없으므로 개발 시간을 절약할 수 있다.
2. 상태 보존: HMR을 사용하면 수정된 모듈만 업데이트되고, 애플리케이션의 전체 상태는 유지된다. 따라서 매번 상태를 재설정하지 않아도 되므로 테스트와 디버깅이 쉬워집니다.
3. 스타일 조정: CSS/SCSS와 같은 스타일 시트를 수정할 때, HMR은 즉시 변경 사항을 반영하여 새 스타일을 적용합니다. 이는 디자인 작업을 더욱 빠르고 효율적으로 만듭니다.

HMR은 대부분의 현대적인 모듈 번들러(예: webpack, Parcel)에 기본적으로 내장되어 있으며, React.js, Vue.js 등의 주요 프레임워크에서도 지원됩니다. Next.js에서도 개발 서버를 실행할 때(next dev) 이 기능을 자동으로 활성화합니다.

단, HMR은 개발 환경에서만 사용되며, 프로덕션 환경에서는 사용되지 않습니다. 이는 프로덕션 환경에서는 애플리케이션의 성능 최적화와 안정성이 중요하며, 빌드 과정을 거쳐 최적화된 코드를 실행해야 하기 때문입니다.