# NestJS에서 Handlebars 이용하기

NestJS에서 Handlebars 이용하기

백엔드 프레임워크지만 간단한 프론트 화면이 필요할 경우가 있다.

기본 사용 방법

1. Handlebars 설치
   npm install --save hbs

2. main.ts 설정

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

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

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

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

3. 컨트롤러 렌더링

import { Get, Controller, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello world!' };
  }
}

파일 분리(Partials)

header, footer 등 중복되는 파일은 분리해서 이용하곤한다.
nestjs에서는 사용방법이 조금 다르다.

1. main.ts 파일 설정 추가
   • css, js 파일은 루트의 public 폴더 안에.
   • 렌더링할 페이지들은 루트의 views 폴더 안에.
   • Partials 적용할 파일은 루트의 views/partials 폴더 안에.

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');
  hbs.registerPartials(join(__dirname, '..', '/views/partials'));

2. main.ts에서 설정한 경로(views/partials)에 header, footer 등 분리하고 싶은 파일 생성 및 작성
3. 불러오고싶은 위치에서
   {{>header}}
{{>menu}} 등으로 파일명을 적어 불러오면 끝!