vue는 이미 설치되어 실행하고 있기에 이는 생략하고 설명하겠다.
1. express 설치
1) express 설치
npm i express-generator -g
위의 명령어를 쳐서 설치해준다.
2) express 프로젝트 만들기
express backend --view=pug
backend라는 express 프로젝트를 만들어준다.
3) express 실행
설치가 다 되었다면 backend폴더로 이동해준다.
npm install
- 명령어를 쳐서 기본적인 모듈을 설치해준다.
- 즉 package.json에 있는 모듈을 설치해주고, node_modules를 설치해주는 것이다.
- 그리고 express가 잘 실행되는지 확인한다.
잘 되었다면 위와 같은 화면이 보이게 된다.
2. vue와 express 연결
1) 프론트에 있는 파일 express로 보내기
npm run build
이는 프론트 폴더에 가서 해주어야 한다.
2) backend 확인
그리고 나서 backend파일에 public파일을 확인해보면 css, js파일이 업데이트된 것을 확인할 수 있다. 이는 vue파일이 build가 되어 express에 열 수 있는 준비가 된 것이다.
3) express에서 열기
npm start
명령어를 치면 localhost:3000으로 들어가보면 express가 실행된 것을 확인할 수 있다. 또한 vue에서 보이던 파일이 확인이 가능하다.
front와 통신하기
1. front에서 작업하기
1) vue.config.js 파일을 생성
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<http://localhost:3000/api>',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
outputDir: '../backend/public',
}
vue.config.js파일을 루트에 만들어 위와 같이 작성해준다. 이는 http통신을 간편하게 하기 위한 것이다. 프론트엔드에서 ‘/api’주소로 요청 발생시에 'http://localhost:3000/api'주소로 요청을 보낸다.
이 설정을 해주지 않을 경우에 매번 components에 vue파일을 만들 때 설정해주어야 한다.
2) axios 설치
npm i axios
front폴더에서 설치해주어야 한다. 그리고 이를 src/main.js파일에 가서 넣어준다.
// main.js
import { createApp, VueElement } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
VueElement.prototype.$http = axios
createApp(App)
.use(store)
.use(router)
.mount('#app')
위와 같이 설정해준다.
💡 VueElement.prototype.$http = axios : vue컴포넌트에서 axios를 this.$http로 요청가능하다는 뜻이다.
3) front에서 데이터 가져오기
<template>
<div v-if="movie">
<p>{{ movie.id }}</p>
<p>{{ movie.name }}</p>
<p>{{ movie.rate }}</p>
</div>
</template>
<script>import axios from 'axios'
export default {
components: {},
data() {
return {
movie: []
}
},
created() {
axios
.get('/api/movies')
.then((res) => {
this.movie = res.data[0]
console.log(res.data)
})
.catch((err) => {
console.error(err)
})
}
}
</script>💫 여기서 진짜 중요한게 axios를 임포트해서 created()에 써줘야 한다.
→ 여기서 삽집을 많이 했다. 기본적으로 this.$http구문으로 많이 쓰는 것 같다. 그렇지만 내 경우에 먹지 않아, 기본적으로 쓰는 구문으로 바꿨더니 잘 됐다.
이를 꼭 라우터 설정을 해서 보이게 작업해줘야 한다. 그리고 나서
npm run build
를 해줘야 백엔드에 반영이 된다.
2. backend에서 작업하기
backend 작업을 해주기 위해 backend폴더로 이동한다.
1) 더미 데이터 넣기
// movies.json
[
{
"id": 1,
"name": "기생충",
"rate": "54.80%",
"director": "봉준호",
"actors": "송강호(기택), 이선균(박사장), 조여정(연교) 등",
"time": "131분",
"synopsis": "폐 끼치고 싶진 않았어요
전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족.
장남 기우(최우식)에게 명문대생 친구가 연결시켜 준 고액 과외 자리는
모처럼 싹튼 고정수입의 희망이다.
온 가족의 도움과 기대 속에 박사장(이선균) 집으로 향하는 기우.
글로벌 IT기업 CEO인 박사장의 저택에 도착하자
젊고 아름다운 사모님 연교(조여정)가 기우를 맞이한다.",
"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": "머나먼 사막 속 신비의 아그라바 왕국의 시대.
좀도둑 ‘알라딘’은 마법사 ‘자파’의 의뢰로 마법 램프를 찾아 나섰다가
주인에게 세 가지 소원을 들어주는 지니를 만나게 되고,
자스민 공주의 마음을 얻으려다 생각도 못했던 모험에 휘말리게 되는데…",
"poster": "<https://movie-phinf.pstatic.net/20190524_104/1558663170174Q2mmw_JPEG/movie_image.jpg?type=f125>"
}
]
위와 같은 더미 데이터를 넣어 프론트엔드에서 보이는 지 작업해줄 것이다.
2) movie.js 만들기
var express = require('express');
var router = express.Router();
var movies = require('./movies.json');
router.get('/', function (req, res, next) {
res.send(movies)
});
module.exports = router;
routes폴더로 이동하여 movie.js파일을 만들어 준다. 그리고 위의 작성한 더미데이터가 잘 받아와지는지 파일의 위치를 확인한다.
3) app.js에 설정
var moviesRouter = require('./routes/movie');
app.use('/api/movies', moviesRouter)
위의 두줄을 각각의 자리에 맞게 설정해준다.
4) 서버 실행
npm start
실행시켜준다. 그러면 값이 제대로 받아와지면 데이터가 제대로 뜬다. 그렇지 않으면 콘솔에 에러가 뜨니 콘솔창을 확인해보면 된다.
주의
기본적으로 이러한 에러창이 뜨면서 프론트에서 설정한 창이 보이지 않게 된다. 그럴 경우에는 아래에 글을 정리해놓았으니 참고해서 따라하면 된다.
2023.06.26 - [Error] - [Error] Vue와 express 통신시 백엔드에서 나타나는 오류 해결하기
[Error] Vue와 express 통신시 백엔드에서 나타나는 오류 해결하기
문제 발생 백엔드에서 실행시 이러한 오류가 나면서 실행이 안되었다. 이 때 통신을 하는 것을 못 받아와서 그런가보다 하고 넘겼다. 그런데 프론트에서 할 때는 이러한 오류가 안 나서 검색을
uhee-12.tistory.com
frontend 테스트
npm run build
frontend테스트를 위해 위의 명령어를 매번 치는 것을 복잡한 일이다. 특히 vue의 컴포넌트 창이 많아지게 된다며 build속도도 더불어 느려지게 된다. 그래서 frontend를 개발중일 때는
npm run serve
를 실행시켜 오류가 있는지 확인해준다. npm run build한 것과 같이 오류가 나온다.
그리고 오류가 나오지 않고 제대로 실행이 된다면 이를 빌드하여 backend프로젝트에 frontend코드를 적용해주면 된다. 그리고 localhost:3000과 localhost:8080이 차이가 있는지 확인해주면 된다. 차이가 없을 경우에 그대로 백엔드에서 사용하면 된다.
