작성 중
# Backend 생성
cd ~/music_project
nest new backend
cd backend
npm run start
curl http://localhost:3000
typeorm 모듈 설치
npm install --save @nestjs/typeorm typeorm mysql
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 파일로 설정을 분리할 수도 있음
{
"type": "mysql",
"host": "localhost",
"port": 3306,
"username": "root",
"password": "root",
"database": "test",
"entities": ["src/**/*.entity{.ts,.js}"],
"synchronize": true
}
다음과 같이 줄여쓸 수 있음
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
@Module({
imports: [TypeOrmModule.forRoot()],
})
export class ApplicationModule {}
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 { }
nest generate module music
nest generate service music
nest generate controller music
# 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라는 설정 객체로 만들어 두고 사용함
export const server = {
baseURL: 'http://localhost:3000'
}
vue 파일에서는 이 설정을 import해서 서비스 URL을 구성하고, axios http client를 이용하여 백엔드 서비스에 접근함
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();
});
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 }
]
});