사전 준비
nest.js 설치를 해준 뒤, nest.js 프로젝트를 초기화한 지점에서 시작합니다.
템플릿 엔진 설치 및 세팅
npm install --save hbsMVC 앱을 만들기 위해선 HTML를 렌더링해줄 템플릿 엔진을 설치해주겠습니다. nest.js 공식 홈페이지와 동일하게 hbs(Handlebars) 엔진으로 설치해주겠습니다. 다른 엔진을 무방합니다.
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();위 코드는 Express 엔진에게 정적 파일은 public에 있고, 템플릿은 views에 있으며, 템플릿 엔진은 hbs를 사용할 것이라고 알려줍니다.
템플릿 렌더링
// src/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(){{!-- views/index.hbs --}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</title>
</head>
<body>
Jejas
{{ message }}
</body>
</html>
디렉터리 구조는 이렇습니다.
실수인지 우연인지 템플릿 주소를 찾을 수 없다는 에러가 계속 발생했는데, 'views' 디렉터리 명 앞부분에 띄어쓰기를 넣은 ' views'로 명명한 것 때문이었습니다.
참고
'Research > Design pattern' 카테고리의 다른 글
| 아키텍처_MVC 패턴 (0) | 2023.02.14 |
|---|---|
| 페이지 API 데이터 구조에 대한 고민 (0) | 2023.02.14 |
| software_Message Broker란 (0) | 2023.02.07 |
댓글