[NestJS] HMR

안녕하세요. 모리스입니다.😀

이번 포스트는 지난 포스트에 이어 NestJS에 대해 작성해보려 합니다.

 

React Native의 장점 중 하나는 바로 Hot Reload라고 생각해요.

요즘 Native로 iOS 앱을 개발하다 보니까 뭔가 하나를 수정하고 시뮬레이터로 확인해보려 해도 다시 처음 부터 빌드해야하는 불편함..ㅠ

물론 SwiftUI도 비슷한 동작을 하긴하지만..

 

아무튼 Nest JS의 webpack 라이브러리인 HMR(Hot Module Replacement)이 React Native의 Hot Reload 같은 역할을 한다고 보시면 돼요!

NestJS의 애플리케이션이 변경된 부분만 다시 로드해주는 기능입니다.!

 

조금 더 자세히 들여다 봐 볼까요?

 

📌 HMR이란?

NestJS는 기본적으로 hot reload 기능인 watch 모드를 지원해요.
프로젝트를 생성한 후 package.json 파일을 보면 다음과 같은 명령어가 들어 있어요:

"start:dev": "nest build --watch"

 

이 watch 모드도 일종의 hot reload 기능이지만, 프로젝트 전체를 재시작하는 방식이에요.
작은 프로젝트라면 괜찮지만, 프로젝트 규모가 커지면 전체를 다시 로드하는 방식은 비효율적이에요.

✅ HMR(Hot Module Replacement)은요,

변경된 파일만 다시 번들링해서 적용해주는 방식이에요.

📄 공식 문서 설명
Hot Module Replacement(HMR)는 애플리케이션 실행 중에 모듈 전체를 다시 로드하지 않고, 교체·추가·제거를 수행할 수 있도록 해줘요.
개발 속도를 다음과 같은 방식으로 크게 높여준다고 해요:

• 전체 reload 중에 손실되는 애플리케이션 상태를 유지할 수 있어요.
• 변경된 부분만 반영해서 개발 시간을 절약할 수 있어요.
• CSS/JS를 수정하면 브라우저에서 바로 적용돼요.

🔁 HMR은 이렇게 작동해요

1. 애플리케이션이 HMR 런타임에 업데이트가 있는지 물어봐요.
2. 런타임이 변경 내용을 비동기로 다운로드하고 앱에 알려줘요.
3. 앱이 업데이트된 모듈을 요청해요.
4. 런타임이 해당 모듈만 골라서 동기적으로 적용해줘요.

---

📌 NestJS에서 HMR 사용하기

1️⃣ 필요한 패키지 설치하기

npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

 

2️⃣ webpack-hmr.config.js 파일 만들기

프로젝트 루트 디렉토리에 webpack-hmr.config.js 파일을 만들고 다음 코드를 넣어주세요:

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
  };
};

✅ filename 앞에 options.output.을 붙여줘야 정상 작동해요!

3️⃣ main.ts에 HMR 설정 추가하기

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

 

4️⃣ package.json 수정하기

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

 

5️⃣ 서버 재시작하기

npm run start:dev

 

---

📒 참고 자료

[ Nest JS ] Hot reload 설정하기

 

Hot Module Replacement | 웹팩