작성 중

개발 가이드 모음

• Nest.js 공식 문서
  • Angular와 Spring MVC 스타일의 웹 서비스 개발이 가능함
• Persistent storage 연동 방법
  • Nestjs and Mysql in 5 Minutes
    • typeorm 모듈을 이용하여 MySQL 연동하는 게 관건
  • MongoDB를 사용한다면 mongoose 모듈을 사용하면 됨
• Frontend와 Backend 분리
  • How To Build a Blog with Nest.js, MongoDB, and Vue.js
    • 디렉토리 구조는 다음의 github 프로젝트에서 확인할 수 있는 것처럼 최상위 디렉토리에서 frontend와 backend를 분리
      • https://github.com/yemiwebby/nest-vue-project
  • Building a modern app using Nest.js, MongoDB and Vue.js

Nest.js의 장점

• Node.js + Express.js보다 추상화된 웹 서비스 프레임웍
• Angular.js처럼 typescript로 개발할 수 있음
• Angular의 객체 선언과 export 및 import로 엄격한 코드 정합성 관리
• Spring MVC와 유사한 아키텍쳐

Backend 초기화

# Backend 생성
cd ~/music_project
nest new backend
cd backend
npm run start
curl http://localhost:3000

MySQL 연동

typeorm 모듈 설치

npm install --save @nestjs/typeorm typeorm mysql

app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
 imports: [
 TypeOrmModule.forRoot({
 type: 'mysql',
 host: 'localhost',
 port: 3306,
 username: 'root',
 password: 'root',
 database: 'test',
 entities: [__dirname + '/**/*.entity{.ts,.js}'],
 synchronize: true,
 }),
 ],
})
export class ApplicationModule {}

forRoot()에 설정을 기입하는 대신, ormconfig.json 파일로 설정을 분리할 수도 있음

ormconfig.json

{
 "type": "mysql",
 "host": "localhost",
 "port": 3306,
 "username": "root",
 "password": "root",
 "database": "test",
 "entities": ["src/**/*.entity{.ts,.js}"],
 "synchronize": true
}

다음과 같이 줄여쓸 수 있음

app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
 imports: [TypeOrmModule.forRoot()],
})
export class ApplicationModule {}

MongoDB 연동

• MySQL과 달리 json 형태의 문서 객체를 통째로 저장할 때 유리함
• 인덱스 검색의 고성능을 기대하기 어려움

app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { MongooseModule } from '@nestjs/mongoose';

@Module({
 imports: [
 MongooseModule.forRoot('mongodb://localhost/nest-blog', { useNewUrlParser: true }),
 ],
 controllers: [AppController],
 providers: [AppService],
})
export class AppModule { }

DAO 레이어 개발

• interface 선언
• DTO 객체 정의

서비스 로직 개발

모듈

nest generate module music

서비스

nest generate service music

컨트롤러

nest generate controller music

Validation 설정

CORS 설정

Frontend 분리

# Frontend 생성
# ~/music_project 디렉토리에서
vue create frontend
cd frontend
npm install axios --save
npm run serve
curl http://localhost:8080

최근의 웹개발은 백엔드와 프론트엔드를 하나의 프로젝트에 담아둘지언정 완전히 분리하는 구조를 채택하고 있음

프론트엔드는 HTML과 CSS, Javascript 등의 정적 리소스를 패키징하여 브라우저로 내려보내고 브라우저에서 클라이언트-사이드-렌더링을 함

프론트엔드에서는 백엔드를 HTTP API를 통해서만 접근하고 백엔드를 블랙박스로 취급함

# ~/music_project/frontend 디렉토리에서 
mkdir src/utils

벡엔드 HTTP API는 localhost의 3000번 포트에 바인드되어 있으므로(맨 위 Backend 초기화 부분을 참조할 것)

다음 설정을 server라는 설정 객체로 만들어 두고 사용함

frontend/src/utils/helper.js

export const server = {
 baseURL: 'http://localhost:3000'
}

vue 파일에서는 이 설정을 import해서 서비스 URL을 구성하고, axios http client를 이용하여 백엔드 서비스에 접근함

frontend/src/components/vue파일들

import { server } from "@/utils/helper";
import axios from "axios";
import router from "../../router";

axios
 .post(`${server.baseURL}/blog/post`, data)
 .then(data => {
 router.push({ name: "home" });
 });

axios
 .put(`${server.baseURL}/blog/edit?postID=${this.id}`, postData)
 .then(data => {
 router.push({ name: "home" });
 });

axios
 .get(`${server.baseURL}/blog/posts`)
 .then(data => (this.posts = data.data));

axios
 .delete(`${server.baseURL}/blog/delete?postID=${id}`)
 .then(data => {
 console.log(data);
 window.location.reload();
 });

라우팅 설정

frontend/src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import HomeComponent from '@/views/Home';
import EditComponent from '@/components/post/Edit';
import CreateComponent from '@/components/post/Create';
import PostComponent from '@/components/post/Post';

Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
 { path: '/', redirect: { name: 'home' } },
 { path: '/home', name: 'home', component: HomeComponent },
 { path: '/create', name: 'Create', component: CreateComponent },
 { path: '/edit/:id', name: 'Edit', component: EditComponent },
 { path: '/post/:id', name: 'Post', component: PostComponent }
 ]
});