반응형
NestJS와 EJS를 사용한 뷰 구성
이번 페이지에서는 EJS를 사용하여 NestJS 애플리케이션에서 뷰를 구성하는 방법을 알아봅니다.
필요한 패키지 설치
먼저 EJS와 관련된 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요.
npm install --save ejs @nestjs/serve-static뷰 엔진 설정
src/app.module.ts 파일을 열고 다음과 같이 수정하여 EJS 뷰 엔진을 설정합니다.
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
@Module({
imports: [
ServeStaticModule.forRoot({
rootPath: join(__dirname, '..', 'public'),
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}뷰 및 정적 파일 설정
애플리케이션의 뷰 및 정적 파일을 위한 폴더를 생성해야 합니다. 프로젝트 루트 디렉토리에서 다음 폴더를 생성하세요.
mkdir views public이제 src/main.ts 파일을 열고 다음과 같이 수정하여 뷰와 정적 파일에 대한 설정을 추가합니다.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
// 뷰 엔진 설정
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('ejs');
await app.listen(3000);
}
bootstrap();기본 뷰 구성
views 폴더에 index.ejs 파일을 생성하고 다음 내용을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
</head>
<body>
<h1>Welcome to the Chat App</h1>
</body>
</html>기본 라우트 수정
src/app.controller.ts 파일을 열고 다음과 같이 수정하여 기본 라우트가 index.ejs 파일을 렌더링하도록 변경합니다.
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index')
index() {}
}
애플리케이션 실행
터미널에서 다음 명령을 실행하여 애플리케이션을 시작합니다.
npm run start
브라우저에서 http://localhost:3000에 접속하여 작성한 EJS 뷰가 잘 렌더링되는지 확인합니다.
이렇게 나오면 잘되고 계신겁니다!!
이로써 NestJS와 EJS를 사용하여 기본 뷰를 구성하는 방법을 알아보았습니다. 다음 페이지에서는 Socket.io를 사용하여 채팅 서버를 구현하는 방법을 살펴보겠습니다.
반응형
'Framework > NestJS' 카테고리의 다른 글
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 4 (1) | 2023.04.28 |
|---|---|
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 3 (0) | 2023.04.19 |
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 1 (2) | 2023.04.17 |
