NestJS ejs 적용하는 방법, 동적 웹페이지 렌더링 하기
NestJS는 강력한 서버 사이드 애플리케이션 프레임워크로, EJS(Embedded JavaScript)와 같은 템플릿 엔진을 사용하여 동적인 웹 페이지를 렌더링할 수 있습니다. 이 글에서는 NestJS 프로젝트에 EJS를 적용하는 방법에 대해 알아보겠습니다.
NestJS ejs 적용하는 방법
1. NestJS 프로젝트 생성
NestJS 프로젝트를 생성하기 위해 터미널에서 다음 명령어를 실행합니다.
nest new my-nest-project
cd my-nest-project
2. EJS 패키지 설치
NestJS에서 EJS를 사용하려면 관련 패키지를 설치해야 합니다.
npm install ejs --save
3. 메인 파일 수정
main.ts 파일을 열고, EJS를 설정해야 합니다.
// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as express from 'express';
import * as path from 'path';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
// set view engine and views directory
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
await app.listen(3000);
}
bootstrap();
4. Views 폴더 생성
프로젝트 루트에 views 폴더를 생성하고, 그 안에 EJS 템플릿 파일을 추가합니다.
<!-- views/welcome.ejs -->
<html>
<head>
<title>Welcome to NestJS</title>
</head>
<body>
<h1>Hello, NestJS!</h1>
</body>
</html>
5. 컨트롤러 설정
컨트롤러를 만들어서 EJS 템플릿을 렌더링하도록 설정합니다.
// app.controller.ts
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('welcome') // Render the 'welcome.ejs' file
getHello() {
return { message: 'Hello, NestJS!' };
}
}
6. 서버 실행
터미널에서 다음 명령어를 실행하여 서버를 시작합니다.
npm run start
7. 확인
웹 브라우저에서 http://localhost:3000을 열어 "Hello, NestJS!"가 표시되는지 확인합니다.
이제 당신은 NestJS 프로젝트에 EJS 템플릿을 성공적으로 적용했습니다. 필요에 따라 더 많은 기능을 추가하고 다양한 템플릿을 사용할 수 있습니다. NestJS의 강력한 기능을 활용하여 웹 애플리케이션을 개발해보세요!
▼ 아래 NestJS 기능 써보셨나요? ▼
NestJS JWT 토큰 유효 시간 설정하는 방법
NestJS JWT 토큰 유효 시간 설정하는 방법 NestJS에서 JWT(Json Web Token)을 사용하여 인증을 구현할 때, 토큰의 유효 시간을 설정하는 것은 중요한 보안 고려 사항 중 하나입니다. 이 글에서는 Nest.js의 Jwt
lemonlog.tistory.com
NestJS 앱의 시작, main.ts 기본 구조
NestJS 앱의 시작, main.ts 기본 구조 우리의 NestJS 앱이 여기서 시작됩니다. main.ts 파일은 우리 앱의 진입점이자, 새로운 모험의 문을 열어주는 열쇠입니다. 이 코드를 통해 앱이 어떻게 생성되고 구
lemonlog.tistory.com
'Programming & Platform > NestJS' 카테고리의 다른 글
| NestJS createQueryBuilder 사용하는 방법, 예시코드 (0) | 2024.01.10 |
|---|---|
| NestJS TypeORM 트랜잭션 사용방법, 예시코드 (0) | 2024.01.06 |
| NestJS 빠른 테스트를 위한 명령어 npm run start:dev (0) | 2024.01.05 |
| NestJS JWT 토큰 유효 시간 설정하는 방법 (0) | 2023.12.28 |
| NestJS 앱의 시작, main.ts 기본 구조 (0) | 2023.12.27 |
