Model-View-Controller
- Nest는 기본적으로 후드 아래에서 Express 라이브러리를 사용합니다.
- 따라서 Express에서 MVC (Model-View-Controller) 패턴을 사용하는 모든 기술은 Nest에도 적용됩니다.
- 먼저 CLI 도구를 사용하여 간단한 Nest 응용 프로그램을 스케폴딩(골격 만들기) 합시다.
$ npm i -g @nestjs/cli
$ nest new project
- MVC 앱을 만들려면 HTML 뷰를 렌더링 할 템플릿 엔진도 필요합니다.
$ npm install --save hbs
- 우리는 hbs (Handlebars) 엔진을 사용했지만 여러분은 요구사항에 맞는 것을 사용할 수 있습니다.
- 설치 프로세스가 완료되면 다음 코드를 사용하여 Express 인스턴스를 구성해야합니다.
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 템플릿 엔진을 사용하여 HTML 출력을 렌더링해야한다고 Express에 알렸습니다.
템플릿 렌더링
- 이제 그 안에 views 디렉토리와 index.hbs 템플릿을 만들어 봅시다.
- 템플릿에서 컨트롤러에서 전달 된 message를 인쇄합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</title>
</head>
<body>
{{ message }}
</body>
</html>
- 그런 다음 app.controller 파일을 열고 root() 메소드를 다음 코드로 바꿉니다.
//app.controller.ts
import { Get, Controller, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index')
root() {
return { message: 'Hello world!' };
}
}
- 이 코드에서는 @Render() 데코레이터에서 사용할 템플릿을 지정하고 경로 처리기 메서드의 반환 값이 렌더링을 위해 템플릿으로 전달 됩니다.
- 반환 값이 message 프로퍼티가 있는 객체이고 템플릿에서 만든 message 자리 표시자와 일치함을 알립니다.
- 응용 프로그램이 실행되는 동안 브라우저를 열고 http://localhost:3000으로 이동하십시오.
- 당신은 Hello world! 메시지를 보아야합니다!
동적 템플릿 렌더링
- 애플리케이션 로직이 렌더링 할 템플릿을 동적으로 결정해야하는 경우 @Res 레코데이터를 사용해야합니다.
- @Render() 데코레이터가 아닌 route 핸들러에 view 이름을 제공하십시오.
HINT
Nest는 @Res() 데코레이터를 감지하면 라이브러리 별 response 객체를 삽입합니다.
이 객체를 사용하여 템플릿을 동적으로 렌더링 할 수 있습니다.
여기에서 response 객체 API에 대해 자세히 알아보십시오.
//app.controller.ts
import { Get, Controller, Render } from '@nestjs/common';
import { Response } from 'express';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
root(@Res() res: Response) {
return res.render(
this.appService.getViewName(),
{ message: 'Hello world!' },
);
}
}
예제
- 실제 사례까 여기에 있습니다.
Fastify
- 이 장에서 언급했듯이 Nest와 함께 호환 가능한 HTTP 공급자를 사용할 수 있습니다.
- 그러한 라이브러리 중 하나는 Fastify 입니다.
- Fastify로 MVC 응용 프로그램을 만들려면 다음 패키지를 설치해야합니다.
$ npm i --save fastify point-of-view handlebars
- 다음 단계는 플랫폼과 관련된 약간의 차이점을 제외하고 Express와 거의 동일한 프로세스를 다룹니다.
- 설치 프로세스가 완료되면 main.ts 파일을 열고 내용을 업데이트 하십시오.
//main.ts
import { NestFactory } from '@nestjs/core';
import { NestFastifyApplication, FastifyAdapter } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';
async function bootstrap() {
const app = await NestFactory.create<NestFastifyApplication>(
AppModule,
new FastifyAdapter(),
);
app.useStaticAssets({
root: join(__dirname, '..', 'public'),
prefix: '/public/',
});
app.setViewEngine({
engine: {
handlebars: require('handlebars'),
},
templates: join(__dirname, '..', 'views'),
});
await app.listen(3000);
}
bootstrap();
- Fastify API는 약간 다르지만 이러한 메소드 호출의 최종 결과는 동일하게 유지됩니다.
- Fastify와의 차이점은 @Render() 데코레이터에 전달 된 템플릿 이름에 파일 확장자가 포함되어야한다는 것입니다.
//app.controller.ts
import { Get, Controller, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index.hbs')
root() {
return { message: 'Hello world!' };
}
}
- 응용 프로그램이 실행되는 동안 브라우저를 열고 http://localhost:3000 으로 이동하십시오.
- 당신은 Hello world 메세지를 보아야합니다!
예제
- 실제 사례가 여기에 있습니다.
'Node > Nest Js' 카테고리의 다른 글
| Nest.js, React.js, Typescript 및 MongoDB로 최신 풀 스택 개발 - 1부 (0) | 2020.02.01 |
|---|---|
| Nest js Providers (0) | 2020.01.30 |
| Nest Js 컨트롤러 (0) | 2020.01.28 |
| Nest Js 첫걸음 (0) | 2020.01.28 |
| Nest js 소개 (0) | 2020.01.27 |
_김은찬
두번 다시는 꺾이지 않으리