1. vs code 터미널에서 작성
2.
3. 작업 디렉토리 생성
<html />$ mkdir movie
프론트엔드와 백엔드 작업을 하게 될 작업디렉토리를 생성한다.
4. Frontend 작업디렉토리 생성 및 front 서버 실행
<html />$ npm install -g yarn $ npm install -g @vue/cli $ vue create frontend $ cd frontend $ npm run serve
npm 명령으로 vue.js 개발을 위해 필요한 패키지를 설치한다.
그리고 vue create 명령을 이용해 frontend 디렉토리를 생성하고,
새로 생성된 frontend 프로젝트 디렉토리에서 서버를 실행하고 브라우저에서 http://localhost:8080에 접속하면 다음과 같은 페이지를 확인할 수 있다.
위와 같이 페이지가 정상적으로 출력되면 frontend 쪽은 준비가 되었다.
<html />$ cd ../
5. Backend 작업디렉토리 생성 및 backend 서버 실행
이번엔 앞서 생성했던 example디렉토리에서 express를 이용해서 backend 서버 프로젝트를 생성한다.
<html />$ npm install -g express-generator $ express --view=pug backend $ cd backend $ npm install $ npm start
위와 같이 서버 실행 후 http://localhost:3000으로 접속하면,
다음과 같이 epxress 서버가 정상 실행된 것을 확인할 수 있다.
6. Frontend와 Backend 연동하기
이제 앞서 생성했던 frontend가 express에 연동되어 보여질 수 있도록 해보자.
실행했던 express 서버는 종료시키고 frontend 디렉토리에서 vue.config.js 파일을 생성해준다.
<html />module.exports = { devServer: { // ① api 요청이 있을때 어디에서 처리할지를 설정 proxy: { '/api': { target: 'http://localhost:3000/api', changeOrigin: true, pathRewrite: { '^/api': '' } } } }, outputDir: '../backend/public', // ② 배포 파일의 위치를 지정 }
위와 같이 /api 요청이 있을 때 해당 요청을 backend 쪽의 /api로 돌려주는 proxy 설정을 추가해준다.
그리고 frontend 프로젝트를 build했을 때 output이 ../backend/public에 위치하도록 한다.
위와 같이 파일 생성이 완료되었다면 frontend 디렉토리에서 다음명령을 실행하자.
<html />$ npm run build
위 명령을 실행하면 backend/public 디렉토리에 frontend 프로젝트로 부터 빌드된 결과 파일들이 위치하는 것을 확인할 수 있다. backend 디렉토리에서 express 서버를 다시 실행해보자.
<html />$ npm start
express 서버 실행 후 다시 http://localhost:3000으로 접속하면 아래와 같이 앞서 만든 frontend 페이지가 그대로 보이는 것을 확인 할 수 있다.
7. Backend 데이터를 Frontend에 뿌려보기
이제 본격적으로 Backend에서 관리하는 데이터를 Frontend에 뿌려보자. 먼저, backend 디렉토리에 movies.json이라는 파일을 생성한다.
<html />
[
{
"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"
},
]
json으로 생성된 데이터를 보낼 수 있는 라우터를 설정한다. backend/routes/ 디렉토리에 movies.js를 생성한다.
내용은 다음과 같다.
<html />var express = require('express'); var router = express.Router(); var movies = require('../movies.json'); router.get('/', function (req, res, next) { res.send(movies) }); // 영화 상세 페이지를 위한 코드 router.get('/:id', function (req, res, next) { var id = parseInt(req.params.id, 10) var movie = movies.filter(function (movie) { return movie.id === id }); res.send(movie) }); module.exports = router;
새로 생성한 router를 backend/app.js에 등록해준다. 다음 내용을 파일에 추가해주면 된다.
<html />var moviesRouter = require('./routes/movies'); app.use('/api/movies', moviesRouter);
Backend 쪽에서 데이터를 연동할 준비는 마쳤다. 이제 Frontend 쪽에서 Backend로 데이터를 요청하고 요청한 데이터를 뿌려주는 작업만 남았다.
8. Frontend에서 Backend로 데이터를 요청하고 요청한 데이터 출력하기
frontend 디렉토리에서 추가로 필요한 패키지를 설치해준다.
<html />$ npm install vue-router --save $ npm install axios --save
frontend/src/components 디렉토리에 MovieIndexPage.vue 파일을 생성하고 다음과 같이 입력한다.
<html />
<template>
<div class="wrap">
<h1>5월 마지막주 영화 예매 순위</h1>
<ul class="movies">
<li v-for="movie in movies" 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
})
},
data () {
return {
movies: []
}
}
}
</script>
그리고 상세 페이지를 보여줄 MovieShowPage.vue를 생성한다.
<html />
<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 () {
var id = this.$route.params.id;
this.$http.get('/api/movies/${id}')
.then((response) => {
this.movie = response.data[0]
})
},
data: function () {
return {
movie: {}
}
}
}
</script>
다음으로는 앞서 만들었던 vue 파일들을 노출시켜주기 위한 router 설정을 위한 파일을 생성한다. frontend/src/routes/index.js를 생성해주자.
<html />import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/MovieIndexPage' import Show from '@/components/MovieShowPage' Vue.use(Router) export const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'index', component: Index }, { path: '/:id', name: 'show', component: Show } ] })
위와 같이 router를 생성하고 frontend/src/App.vue에서 기존에 있던 걸 다 지우고,
<router-view> 컴포넌트를 추가하여 메인페이지에서 router로 연결된 페이지가 출력될 수 있도록 하자.
App.vue를 다음과 같이 수정한다.
<html />
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
이제 frontend/src/main.js를 다음과 같이 작성하여 앞서 만들었던 router가 정상적으로 연결되도록 한다.
<html />import Vue from 'vue' import App from './App.vue' import {router} from './routes/index.js' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios; new Vue({ render: h => h(App), router, }).$mount('#app')
여기까지 작업을 하고 frontend 디렉토리에서 npm run serve 명령을 이용해서
다시 http://localhost:8080에 접속하면 아래와 같은 내용을 확인할 수 있다.
Frontend는 정상동작되는 걸 확인했다. 이제 작업했던 내용을 다시 build해서
backend서버에서도 새로운 Frontend 페이지가 노출 될 수 있도록 frontend 디렉토리에서 다음 명령을 실행한다.
<html />$ npm run build
이후 backend 디렉토리에서 npm start 명령으로 서버를 다시 실행하고 http://localhost:3000으로 접속하면 앞서와 같은 페이지를 확인하는 것이 가능하다.
작업했던 소스는 다음 github 링크에서도 참고할 수 있다.
'Node.js' 카테고리의 다른 글
| Nodejs Express MariaDB(Ubuntu) 회원가입 및 로그인 (1) (0) | 2021.12.21 |
|---|---|
| [MERN] SNS Chat App 만들기 (1) (0) | 2021.11.24 |
| [Node.js] Express Server 구축 (0) | 2021.11.09 |
| [React] constructor() 생성자 사용법 (0) | 2021.10.20 |
| [Node.js] 템플릿엔진 (0) | 2021.09.14 |
