Node.js의 네이티브 HMR: 기술적 심층 분석

2025-06-04

이 글에서는 Node.js에서 네이티브 핫 모듈 교체(HMR)를 구현하는 방법을 자세히 설명합니다. `--watch` 플래그나 Vite와 같은 가상 모듈 시스템을 사용하는 기존 방식은 비효율적이며 모듈 격리 문제가 있습니다. 저자는 Node.js의 내장 `node:module` 모듈 후크를 활용하여 파일 버전 번호를 기반으로 하는 증분 업데이트 메커니즘을 만들었습니다. 핵심은 파일 트리를 로드하고 모니터링하는 `FileTree` 클래스와 모듈 로딩 프로세스를 가로채고 캐시 무효화를 위해 URL에 버전 번호를 추가하는 `useTree` 후크입니다. 의존성 트리를 구축함으로써, 의존 모듈이 변경될 때 상위 모듈도 업데이트되도록 보장하여 효율적인 HMR을 구현하고 모듈 트리 전체의 재평가를 방지합니다.

더 보기
개발

Node 모듈 훅을 활용한 초고속 프론트엔드 개발

2025-05-07

프론트엔드 개발 속도를 높이기 위해, 저자는 일련의 직교하는 Node 모듈 훅을 만들었습니다. 하나의 모듈 로더는 JSX를 JS로 변환하고, 다른 하나는 import를 재매핑하며, 또 다른 하나는 .js 파일을 찾지 못할 경우 .{ts,tsx,jsx} 파일을 검색하고, 마지막 하나는 FileTree와 연동하여 쿼리 문자열 캐시 버스팅을 사용하여 파일의 최신 버전을 로드합니다. FileTree의 업데이트 이벤트는 프론트엔드 재구축을 트리거하며, 모듈 버전 관리를 통해 종속성이 변경된 경우에만 모듈이 다시 실행되므로 런타임 상태가 유지되고 전체 프로세스의 재시작이 방지됩니다.

더 보기
개발 모듈 훅