MVC(Model-View-Controller) 패턴은 사용자 인터페이스, 데이터 및 논리 구조를 구현하는 소프트웨어 디자인 패턴입니다. MVC 모델의 핵심은 비즈니스 로직과 화면 구현을 분리하여 관리하는 것입니다.
각 요소는 다음과 같은 특징을 갖고 있습니다. 보다 자세한 사항은 MDN의 MVC 설명 문서를 참고해보시기 바랍니다.
- 모델(Model): 앱에서 처리할 데이터를 관리합니다. 데이터 상태가 변경되면 뷰 또는 컨트롤러에게 이를 전달합니다.
- 뷰(View): 레이아웃과 화면을 처리합니다.
- 컨트롤러: 명령을 모델과 뷰 사이에서 사용자 입력에 대한 응답을 처리하는 로직을 포함하고 있습니다.
NestJS에서 MVC 구현하기
이제 NestJS에서 MVC 패턴을 구현해보도록 하겠습니다. 먼저, 새로운 프로젝트를 시작합니다.
$ sudo npm i -g @nestjs/cli
$ nest new proejct다음으로 View를 처리할 패키지를 설치해줍니다.
$ npm install --save hbsmain.ts 파일을 아래와 같이 설정해줍니다.
// 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);
//__dirname은 현재 디렉토리 의미 ..은 상위 폴더를 의미
// 여기에는 css와 js 정적 파일이 들어감
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(8000);
}
bootstrap();
여기까지 하셨다면 프로젝트 폴더에 public과 views 디렉토리를 만들어 줍니다. public 디렉토리에는 css 디렉토리와 js 디렉토리를 만들어줍니다. 여기까지의 폴더 구조는 다음과 같습니다.
다음으로 views 디렉토리를 만들고 index.hbs 템플릿 파일을 생성합니다.
// index.hbs
<html>
<head>
<meta charset='utf-8' />
<title>App</title>
<link href='css/styles.css' rel='stylesheet' />
</head>
<body>
{{message}}
<script src='js/scripts.js'></script>
</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!' };
}
}이제 서버를 실행하고 http://localhost:8000에 접속하면 Hello world!가 표시됩니다.
MongoDB 연결하기
마지막으로 MongoDB를 연결해보도록 하겠습니다. 보다 자세한 사항은 몽구스 사용하여 MongoDB 연결하기 포스팅을 참조하실 수 있습니다.
먼저, 환경 변수를 사용하기 위해 config 패키지를 설치해줍니다.
$ npm i --save @nestjs/config다음으로 app.module.ts 파일에서 다음과 같이 MongoDB를 연결해줍니다.
// app.module.ts
import { Module, NestModule } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { MongooseModule } from '@nestjs/mongoose';
import mongoose from 'mongoose';
import { AppController } from './app.controller';
import { AppService } from './app.service';
@Module({
imports: [
ConfigModule.forRoot({
isGlobal: true,
}),
MongooseModule.forRoot(process.env.MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule implements NestModule {
configure() {
const DEBUG = process.env.MODE === 'dev' ? true : false;
mongoose.set('debug', DEBUG);
}
}이상으로 NestJS에서 MVC 패턴을 구현하고 MongoDB를 연결하는 방법에 대해 알아봤습니다.
참고 자료
'개발 > NestJS' 카테고리의 다른 글
| NestJS 기초 (14) 이미지 파일 업로드하기 (0) | 2022.11.07 |
|---|---|
| NestJS 기초 (13) JWT를 사용한 인증 인가 처리와 데코레이터 구현 (0) | 2022.11.01 |
| NestJS 기초 (12) 가드를 사용한 인증과 인가 (0) | 2022.10.17 |