프로젝트를 한 창 하던 중이었다...

개발을 하는 과정 중에 변동 사항이 있으면 적용을 해 볼 때마다 서버를 껐다가 켰다가 하는 번거로운 작업들이 은근 시간을 많이 잡아 먹는다. 그래서 nodemon이라는 고마운 친구가 있어서 ctrl + s를 눌러줄 때 마다 서버를 알아서 다시 켜주는 간단한 작업을 해줘서 개발 과정중에 기분이 아주 좋았는데.

이번에 nestjs를 쓰러 오면서 nodemon을 쓸 수 없게 되었다.

사람은 한 번 맛본 편리함을 버리고 다시 불편했을 때로 돌아가는것을 극도로 혐오한다.

그래서 나 또한 서버를 껏다 켰다 하다가 스트레스가 만땅이었다.

따라서 nest에서도 쓸 수 있는 아주 좋은 친구가 있으리라 생각했는데 고것이 바아로 WEBPACK HMR(Hot-Module-replacement)가 있었다.

---

웹팩을 사용하면 변경 사항이 발생할 때마다 전체 프로젝트를 다시 컴파일할 필요가 없다.
이렇게 하면 애플리케이션을 인스턴트화하는 데 필요한 시간이 크게 줄어들고 반복 개발이 훨씬 쉬워진다.

CLI 사용할 때 쓰는 방법.

설치

먼저 필요한 패키지를 설치해준다.

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

구성

설치가 완료되면 webpack-hmr.config.ts 애플리케이션의 루트 디렉터리에 파일을 만든다.

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, autoRestart: false }),
    ],
  };
};

핫 모듈 교체

HMR을 활성화 하려면 애플리케이션 항목 파일 main.ts을 열고 다음 웹팩 관련 코드를 추가한다.

declare const module: any;

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

  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
    }),
  );

  await app.listen(PORT);

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

실행 프로세스를 단순화 하려면 package.json 파일에 스크립트를 추가해준다.

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

이제 터미널을 열고 다음 명령을 실행한다.

npm start