NestJs에서 View(hbs) 핫리로딩 설정

처음 NestJS 실행시 뷰파일 수정을 해도 새로고침을 해도 변경이 안되는 경우가 대부분일겁니다.

그럴때 사용하는 방법입니다.

NestJS에서 hbs(Handlebars) 뷰 파일을 변경할 때 자동으로 반영(핫리로딩) 되도록 설정하는 방법을 설명하겠습니다.

---

✅ 1. nodemon을 이용한 핫리로딩 설정

NestJS에서는 nodemon을 사용하여 핫리로딩을 설정할 수 있습니다. 하지만 기본적으로 hbs 파일 변경을 감지하지 않으므로, 이를 직접 설정해야 합니다.

🔹 1) nodemon 설치

npm install --save-dev nodemon

🔹 2) nodemon.json 설정 추가

프로젝트 루트에 nodemon.json 파일을 생성하고 다음과 같이 설정합니다.

{
  "watch": ["src", "views"],
  "ext": "ts,hbs",
  "ignore": ["node_modules"],
  "exec": "ts-node -r tsconfig-paths/register src/main.ts"
}

✅ 설명

• "watch": ["src", "views"] → src(NestJS 코드)와 views(HBS 템플릿) 폴더를 감시하여 변경 사항 반영
• "ext": "ts,hbs" → hbs 파일과 TypeScript 파일 변경 시 서버 자동 재시작
• "ignore": ["node_modules"] → node_modules 폴더 변경은 감지하지 않음

🔹 3) package.json 스크립트 수정

package.json의 "scripts" 부분에 start:dev 명령어를 추가합니다.

"scripts": {
  "start": "node dist/main.js",
  "start:dev": "nodemon"
}

이제 개발 모드에서 실행하면 .hbs 파일 변경 시 자동으로 서버가 재시작됩니다.

npm run start:dev

---

✅ 2. hbs 핫리로딩을 위한 캐시 제거

기본적으로 hbs는 뷰를 캐싱하기 때문에, 변경 사항이 즉시 반영되지 않을 수 있습니다. 이를 방지하기 위해 hbs.cache = false; 및 파일 감지를 추가합니다.

🔹 1) main.ts 수정

main.ts에서 hbs의 캐시를 비활성화하고, views 폴더 내 파일 변경 시 자동으로 hbs를 다시 로드하도록 설정합니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import * as hbs from 'hbs';
import * as fs from 'fs';
import { join } from 'path';

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

  // 뷰 엔진 설정
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  // 핫리로딩을 위해 뷰 캐시 비활성화
  app.set('view cache', false);
  hbs.cache = false;

  // 개발 환경에서 HBS 파일 변경 감지
  if (process.env.NODE_ENV !== 'production') {
    fs.watch(join(__dirname, '..', 'views'), { recursive: true }, () => {
      hbs.handlebars.helpers = {}; // 기존 헬퍼 초기화
      hbs.cache = {}; // 핸들바 캐시 초기화
      console.log('🔄 HBS 파일 변경 감지 → 캐시 삭제');
    });
  }

  await app.listen(3000);
}
bootstrap();

✅ 설명

• app.set('view cache', false); → NestJS의 뷰 캐시 비활성화
• hbs.cache = false; → Handlebars의 캐시 비활성화
• fs.watch(join(__dirname, '..', 'views') → views 폴더 내 파일이 변경되면 hbs 캐시 초기화

---

✅ 3. 브라우저 캐시 무효화

뷰 변경 사항이 반영되지 않는 경우, 브라우저가 캐싱한 데이터를 사용하고 있을 수도 있습니다. 이를 방지하려면 NestJS에서 HTTP 캐시를 무효화해야 합니다.

🔹 1) main.ts에서 캐시 무효화 코드 추가

app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  next();
});

이제 브라우저에서 강제 새로고침(CTRL + SHIFT + R) 하면 변경 사항이 즉시 반영됩니다.

---

✅ 4. hbs 헬퍼도 핫리로드 적용 (선택 사항)

만약 hbs 헬퍼(helper)를 변경할 때도 자동 반영되도록 하려면 hbs.unregisterHelper()를 활용할 수 있습니다.

fs.watch(join(__dirname, '..', 'views/helpers'), { recursive: true }, () => {
  Object.keys(hbs.handlebars.helpers).forEach(helper => hbs.unregisterHelper(helper));
  console.log('🔄 HBS 헬퍼 변경 감지 → 캐시 삭제');
});

---

🔥 최종 실행 방법

이제 다음 명령어로 실행하면 .hbs 파일 변경 시 자동으로 적용됩니다.

npm run start:dev

---

🎯 최종 정리

방법 설명

nodemon 설정	.hbs 파일 변경 감지 및 자동 서버 재시작
hbs.cache = false	Handlebars의 캐시 비활성화
fs.watch()	views 폴더 감시 후 핫리로드
HTTP 캐시 비활성화	브라우저 캐시 무효화 (CTRL + SHIFT + R)
hbs.unregisterHelper()	헬퍼 핫리로드 (선택 사항)

이제 .hbs 파일을 수정하면 서버가 자동으로 재시작되거나, 캐시 없이 변경 사항이 즉시 반영될 것입니다. 🚀