23. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 2

HMR의 장점과 적용 방법

1. HMR이란?

핫 모듈 리플레이스먼트(Hot Module Replacement, HMR)는 개발 중인 애플리케이션의 일부를 교체하는 기술로, 코드 변경을 감지하고 새로운 모듈로 교체함으로써 애플리케이션을 다시 빌드하지 않고도 변경 사항을 실시간으로 반영할 수 있습니다.

2. HMR의 장점

2.1 실시간 반영

HMR을 사용하면 코드 수정 후 브라우저를 새로 고치지 않아도 변경 사항이 즉시 반영됩니다. 이는 빠른 개발 속도와 효율적인 작업을 가능하게 합니다.

2.2 상태 유지

애플리케이션의 상태는 유지되므로, 변경된 부분만 교체되고 나머지는 그대로 유지됩니다. 이는 애플리케이션의 상태를 잃지 않고 개발자가 현재 작업 중인 상태에서 계속 작업할 수 있음을 의미합니다.

2.3 에러 피드백 제공

HMR은 즉시 적용되지 않는 변경 사항에 대한 에러를 제공하여 런타임에서 발생한 문제를 빠르게 파악하고 해결할 수 있도록 도와줍니다.

3. HMR 적용 방법

웹팩에서 HMR을 적용하는 방법은 간단합니다.

3.1 웹팩 설정 변경

웹팩 설정 파일(webpack.config.js)에서 HotModuleReplacementPlugin을 추가합니다.

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ... 다른 설정 ...

  devServer: {
    hot: true,
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

3.2 코드 수정

HMR을 적용할 모듈에서 아래와 같이 코드를 수정합니다.

// 예시 모듈
if (module.hot) {
  module.hot.accept('./path/to/module', function () {
    // 모듈이 변경되었을 때 실행할 코드
  });
}

 

HMR을 적용하려는 모듈에 if (module.hot)을 추가하고, 변경되었을 때 실행할 코드를 작성합니다.

위와 같이 설정하면 변경된 모듈이 자동으로 교체되고, 브라우저는 변경 사항을 즉시 반영합니다.

HMR은 개발 시간을 단축하고 효율적인 작업을 가능하게 하는 강력한 도구로, 웹팩의 강력한 기능 중 하나입니다.