ESBuild를 위한 HMR, 직접 만들기

HMR의 개념과 동작 원리

• HMR은 변경된 코드 조각만 런타임에서 동적으로 교체하는 기능을 제공한다.
• 핵심 원리는 모듈을 전역에 등록한 뒤, 변경된 모듈만 교체하는 방식을 사용한다.

Metro, Webpack, Vite 등 다양한 번들러의 HMR 구현 방식 비교

• Metro는 HMR을 구현하기 위해 코드를 변환하는 과정을 거친다.

ESBuild 기반 번들러에서 HMR 구현 시 해결해야 할 과제들

1. 런타임 모듈 접근: ESBuild가 생성하는 번들러는 런타임 환경에서 모듈을 참조하거나 등록할 수 있는 구조를 제공하지 않기 때문에 변환 작업이 필요하다.
2. 의존성 그래프 구축: 파일 변경 감지 및 변환 작업을 위해 의존성 그래프를 구축해야 한다.

핵심 구현 전략

1. 런타임 모듈 접근 구현: SWC 플러그인을 활용하여 코드를 변환하고, 런타임에서 모듈을 참조하거나 교체할 수 있는 기능을 구현한다.
2. 파일 변경 감지: 번들러는 파일이 변경되었음을 감지하고 해당 파일을 새로 변환하여 런타임으로 전달한다.
3. React 환경 추가 구현: React 환경에서는 모듈 교체뿐만 아니라 React의 내부 상태도 조작하여 변경 사항을 반영해야 한다.

프론트 엔드 개발에서 좋은 개발 경험이란

• 코드 가독성과 일관성을 유지하는 것이 중요하다.
• 사용하기 쉬운 번들러, 린터, 디버깅 도구를 활용하여 생산성을 높일 수 있다.
• HMR을 통해 빠른 피드백 루프를 유지하여 개발 속도를 향상시킬 수 있다.