ESBuild를 위한 HMR, 직접 만들기

이 글은 프론트엔드 개발 경험을 향상시키는 HMR(Hot Module Replacement)의 원리와 다양한 번들러에서의 구현 방식을 소개하고, ESBuild 기반 번들러를 직접 개발한 경험을 공유합니다. HMR은 코드 수정 시 페이지 새로고침 없이 변경 사항을 즉시 반영하여 빠른 피드백 루프를 제공하며, 특히 UI 상태를 유지하면서 개발할 수 있다는 장점이 있습니다.

Metro, Webpack, Vite 등 주요 번들러들이 HMR을 지원하는 방식을 설명하고, ESBuild를 활용하여 HMR 기능을 직접 구현하는 과정을 상세히 다룹니다. 이를 통해 개발 생산성을 높이는 HMR의 중요성과 구현 방법에 대한 깊이 있는 이해를 돕습니다.