Vite에서 Hot Module Replacement (HMR)

마조리카·2024년 4월 29일

프론트엔드 하꼬 일기

목록 보기

6/8

Vite에서 Hot Module Replacement (HMR) API 활용하기

모던 웹 개발에서 개발자 경험을 향상시키는 가장 중요한 기능 중 하나는 Hot Module Replacement (HMR)입니다. Vite는 HMR을 매우 쉽게 구현하고 제공하여, 코드 변경 사항을 즉각적으로 반영할 수 있도록 도와줍니다. 이 글에서는 Vite의 HMR API를 사용하여 어떻게 개발 프로세스를 향상시킬 수 있는지 알아보겠습니다.

HMR이란?

Hot Module Replacement (HMR)는 웹 애플리케이션을 개발할 때 페이지 전체를 새로고침하지 않고도 JavaScript 모듈이나 스타일시트를 교체할 수 있는 기술입니다. 이를 통해 애플리케이션의 상태를 유지하면서 코드를 업데이트할 수 있으므로, 개발 시간을 단축하고 개발자 경험을 크게 향상시킵니다.

Vite의 HMR API

Vite는 모듈 단위로 HMR을 처리할 수 있는 API를 제공합니다. 이 API를 사용하면 특정 모듈이 업데이트 될 때마다 특정 코드를 실행할 수 있습니다. Vite의 HMR API는 import.meta.hot 객체를 통해 접근할 수 있습니다.

HMR API 주요 메서드

accept : 모듈 자체가 HMR 프로세스를 처리하도록 설정합니다.
dispose : 모듈이 교체되기 전에 정리 코드를 실행합니다.
decline : HMR을 거부하고 전체 페이지 새로고침을 유도합니다.

간단한 예시: 카운터 상태 유지

카운터 예제의 설명

예를 들어, 위의 카운터 예제에서는 count라는 변수가 있습니다. 이 변수는 사용자가 카운터를 증가시킬 때마다 값이 증가합니다. 만약 일반적인 개발 환경에서 코드를 수정하고 페이지를 새로고침한다면, count의 값은 초기화되어 버립니다. 하지만 HMR을 사용하면, 코드 변경이 있을 때 페이지를 전체적으로 새로고침하지 않고도 코드 변경 사항을 반영할 수 있습니다. 이 경우 count 변수의 값은 유지됩니다.

이를 위해 import.meta.hot 객체를 사용하여 HMR이 가능하도록 설정합니다:

import.meta.hot.accept() 메소드는 현재 모듈이 새로운 버전으로 교체될 때 이전 모듈의 상태를 그대로 유지할 수 있도록 합니다. 즉, 모듈이 업데이트 되어도 count의 값은 유지되며, 개발자는 코드 변경 사항을 즉시 볼 수 있습니다.
import.meta.hot.dispose() 메소드는 모듈이 교체되기 전에 실행됩니다. 이 메소드는 필요한 경우 정리 작업을 수행하는 데 사용할 수 있습니다. 예를 들어, 메모리에서 데이터를 제거하거나, 이벤트 리스너를 해제하는 등의 작업을 포함할 수 있습니다.

// src/counter.js
let count = 0; // 카운터 상태

function updateDisplay() {
  document.body.textContent = `Count: ${count}`;
}

function increment() {
  count++;
  updateDisplay();
}

document.addEventListener('click', increment); // 클릭 이벤트에 반응하여 카운터 증가
updateDisplay(); // 초기 디스플레이 업데이트

if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log('Module updated without refreshing the whole page!');
  });

  import.meta.hot.dispose(() => {
    document.removeEventListener('click', increment); // HMR 전 클릭 이벤트 리스너 해제
    console.log('Module will be replaced soon, cleaning up.');
  });
}