Vue.js 세팅 (vs code)
1. 프론트 개발환경 세팅
터미널 연 후
mkdir 프로젝트 폴더명
생성한 폴더로 경로 이동
cd 프로젝트 폴더명
npm install -g @vue/cli
프로젝트 생성
vue create frontend
babel, pwa, router, vuex
use history mode -> no
where do you prefer placing config for babel -> In dedicated config files
save this as a preset -> no
cd frontend
npm run serve
2. 백엔드 개발환경 세팅
최상위 폴더 이동 후 express 프레임워크 설치
cd ../
npm install -g express-generator express --view=pug backend
cd backend
npm install SET DEBUG=backend:* npm start
Ctrl + C 서버 중지 Y 실행
frontend폴더로 이동 후 vue.config.js 생성
module.exports = {
devServer: { //① api 요청이 있을때 어디에서 처리할지를 설정
proxy: {
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
outputDir: '../backend/public', //② 배포 파일의 위치를 지정
}
세팅 후
cd frontend
npm run build
cd ../backend
npm start
백엔드에서 프론트 엔드로 보낼 데이터 생성
backend 폴더 하위에 json 데이터 만들어주기
[
{
"id": 1,
"name": "기생충",
"rate": "54.80%",
"director": "봉준호",
"actors": "송강호(기택), 이선균(박사장), 조여정(연교) 등",
"time": "131분",
"synopsis": "<strong>폐 끼치고 싶진 않았어요</strong><br>전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족. <br>장남 기우(최우식)에게 명문대생 친구가 연결시켜 준 고액 과외 자리는 <br>모처럼 싹튼 고정수입의 희망이다. <br>온 가족의 도움과 기대 속에 박사장(이선균) 집으로 향하는 기우. <br>글로벌 IT기업 CEO인 박사장의 저택에 도착하자 <br>젊고 아름다운 사모님 연교(조여정)가 기우를 맞이한다.",
"poster": "https://movie-phinf.pstatic.net/20190528_36/1559024198386YVTEw_JPEG/movie_image.jpg?type=f125"
},
{
"id": 2,
"name": "알라딘",
"rate": "21.10%",
"director": "가이 리치",
"actors": "메나 마수드(알라딘), 윌 스미스(지니), 나오미 스콧(자스민) 등",
"time": "128분",
"synopsis": "머나먼 사막 속 신비의 아그라바 왕국의 시대. <br>좀도둑 ‘알라딘’은 마법사 ‘자파’의 의뢰로 마법 램프를 찾아 나섰다가 <br>주인에게 세 가지 소원을 들어주는 지니를 만나게 되고, <br>자스민 공주의 마음을 얻으려다 생각도 못했던 모험에 휘말리게 되는데…",
"poster": "https://movie-phinf.pstatic.net/20190524_104/1558663170174Q2mmw_JPEG/movie_image.jpg?type=f125"
}
]
라우터 설정해주기
backend/router/하위 test.js 생성
let express = require('express');
let router = express.Router();
let movies = require('../test.json');
router.get('/', function (req, res, next) {
res.send(movies)
});
module.exports = router;
backend/app.js 내용추가
let moviesRouter = require('./routes/해당하는');
app.use('/api/movies', moviesRouter)
5. 프론트 데이터 바인딩 화면 만들기
frontend/src/components 하위에 .vue 뷰 파일 생성
<template>
<div class="app">
<h1>5월 마지막주 영화 예매 순위</h1>
<ul class="movies">
<li v-for="movie in movies" :key="movie.id" class="item">
<span class="rank">{{ movie.id }}</span>
<router-link :to="{ name: 'show', params: { id: movie.id } }">
<img v-bind:src="movie.poster" class="poster" />
</router-link>
<div class="detail">
<strong class="tit">{{ movie.name }}</strong>
<span class="rate"
>예매율 <span class="num">{{ movie.rate }}</span></span
>
<router-link
:to="{ name: 'show', params: { id: movie.id } }"
class="link"
>자세히보기</router-link
>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
created () {
// 컴포넌트가 생성될 때, /api/movies에 요청을 보냅니다.
this.$http.get('/api/movies')
.then((response) => {
this.movies = response.data
}).catch(err => {
alert(err);
console.log(err);
})
},
data () {
return {
movies: []
}
}
}
</script>
마찬가지로 상세보기 뷰 페이지 생성
<template>
<div class="detail">
<h1>{{movie.name}}</h1>
<img v-bind:src="movie.poster" class="poster">
<section>
<h2>영화정보</h2>
<dl class="info">
<dt>감독</dt>
<dd>{{movie.director}}</dd>
<dt>출연</dt>
<dd>{{movie.actors}}</dd>
<dt>러닝타임</dt>
<dd>{{movie.time}}</dd>
</dl>
</section>
<section>
<h2>줄거리</h2>
<p v-html="movie.synopsis" class="synopsis"></p>
</section>
<router-link :to="{ name: 'index', params: { id: movie.id }}" class="link">돌아가기</router-link>
</div>
</template>
<script>
export default {
created: function () {
let id = this.$route.params.id;
this.$http.get('/api/movies/${id}')
.then((response) => {
this.movie = response.data[0]
})
},
data: function () {
return {
movie: {}
}
}
}
</script>
라우터 설정
frontend/src/routers/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Test from '../components/testView.vue'
const routes = [
{
path: '/',
name: 'test',
component: Test
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
라우터 설정 후 fronted/src/app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
api 통신 위해
npm install axios --save
frontend/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App)
app.use(router)
app.use(store)
app.config.globalProperties.$http = axios
app.mount('#app')
빌드 후 실행
cd ..\frontend
npm run build
cd ..\backend\
npm start