HMR(Hot Module Replacement): Vite vs Webpack 비교 🌟

HMR(Hot Module Replacement): Vite vs Webpack 비교 🌟

HMR(Hot Module Replacement)은 웹 개발 생산성을 높이기 위한 도구로, 코드가 변경될 때 페이지를 새로고침하지 않고도 변경된 모듈을 즉시 업데이트할 수 있도록 합니다. 이를 통해 개발자는 빠르게 결과를 확인하고, 상태를 유지하면서 작업을 이어갈 수 있죠.

 

이번 글에서는 HMR이 무엇인지, Vite와 Webpack에서의 HMR 동작 방식, 그리고 둘의 차이점과 장단점을 비교해 볼게요!

---

HMR이란 무엇인가요? 🤔

HMR은 모듈 업데이트를 효율적으로 관리하는 개발 도구의 기능입니다. 일반적인 브라우저 새로고침과 다르게, 변경된 부분만 갱신하여 전체 상태를 초기화하지 않습니다.

HMR의 핵심 목표

• 빠른 피드백: 변경 사항을 즉시 확인 가능
• 상태 유지: 브라우저에서 유지 중인 애플리케이션 상태(예: 입력 폼 값, 스크롤 위치 등)를 초기화하지 않음
• 개발 속도 향상: 불필요한 재시작 과정을 줄여 생산성 증가

---

Webpack에서의 HMR 🔧

Webpack은 HMR을 위한 내장 기능을 제공합니다.

번들링 프로세스 중 변경된 모듈을 감지하고, 이를 브라우저에 전달하여 업데이트를 수행합니다.

Webpack HMR의 작동 방식

1. 변경 감지: 파일이 변경되면 Webpack Dev Server가 이를 감지
2. 번들 갱신: 변경된 모듈만 다시 번들링
3. 모듈 업데이트: 변경된 모듈만 브라우저에 푸시. 전체 페이지 새로고침 없이 UI 갱신

npm install webpack webpack-cli webpack-dev-server --save-dev

// webpack.config.js
module.exports = {
  devServer: {
    hot: true, // HMR 활성화
  },
};

장점

• 복잡한 애플리케이션에서도 안정적으로 동작
• 다양한 플러그인과 로더로 유연성 제공

단점

• 번들링 시간이 길어질수록 HMR 속도가 느려질 수 있음
• 큰 프로젝트에서 초기 로드가 느릴 가능성

---

Vite에서의 HMR ⚡️

Vite는 HMR을 기본적으로 내장하며, Webpack과 달리 ES 모듈 기반으로 동작합니다.

Vite는 번들링 없이 개발 서버를 제공하므로 HMR 성능이 매우 빠릅니다.

Vite HMR의 작동 방식

1. 변경 감지: Vite는 파일 시스템 변화를 감지
2. 모듈 갱신: 변경된 모듈을 즉시 브라우저로 전달
   • 브라우저는 변경된 ES 모듈만 다시 로드
3. 상태 유지: 변경된 부분만 업데이트하므로 브라우저 상태는 유지됨

npm create vite@latest my-app
cd my-app
npm install
npm run dev

장점

• 번들링이 없기 때문에 HMR 속도가 눈에 띄게 빠름
• 소규모 프로젝트부터 대규모 프로젝트까지 적합

단점

• HMR이 ES 모듈에 의존하므로 구형 브라우저 호환성이 떨어질 수 있음

---

Vite vs Webpack: HMR 비교 🥊

기준	Vite	Webpack
기술 기반	ES 모듈 기반의 네이티브 HMR	번들 기반 HMR
속도	번들링 없이 변경된 모듈만 로드하여 매우 빠름	번들링을 포함하여 속도가 느릴 수 있음
상태 유지	변경된 모듈만 업데이트, 상태 유지 탁월	변경된 모듈만 업데이트, 그러나 번들링 시간 영향
설정	별도의 설정 필요 없음	HMR 설정이 필요
플러그인 지원	Vite 전용 플러그인 필요	풍부한 생태계의 다양한 플러그인 지원
대규모 프로젝트	대규모 프로젝트에서도 우수한 성능 제공	대규모 프로젝트에서 초기 로드 시간이 느려질 수 있음

---

언제 Vite와 Webpack을 사용할까? 🤔

1. Vite가 적합한 경우
   • 빠른 HMR이 중요한 소규모 또는 중소규모 프로젝트
   • 최신 브라우저만 타겟으로 하는 프로젝트
   • 개발 중 빠른 피드백이 필요한 경우
2. Webpack이 적합한 경우
   • 대규모 애플리케이션이나 복잡한 의존성
   • 오래된 브라우저까지 지원해야 하는 경우
   • 플러그인과 로더가 풍부한 생태계 활용이 필요한 경우

---

HMR 사용 예제: React 기반 프로젝트

Webpack과 React

// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    hot: true,
  },
  plugins: [new ReactRefreshWebpackPlugin()],
};

Vite와 React

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

---

결론: Vite vs Webpack, HMR 최종 정리

• 속도 중심이라면 Vite가 탁월한 선택
• 플러그인 활용 및 구형 브라우저 지원이 중요하다면 Webpack이 적합

🌷전설의 개발자가 되어봅시당!🌷