개발 결과
시작하며...
시작의 발단은 스터디이다. node를 공부하려 들어갔지만, vue를 front로 붙이자며 시작한 것이 정말 어렵게 되었다. 처음에는 굉장히 쉽게 생각을 했다. 무슨 자신감이었는지 모르겠다. 하지만 이건 커피에 홍어를 찍어먹으면 맛있을 거라 생각하는 것만큼 큰 착각이었다. vue는 생각보다 어려웠다.
시작환경
[Window10]
[Visual-Studio]
[Node.js] ->설치되어 있음.
영상으로 개발하기
[vue+express] webpack과 express 프레임워크를 사용한 vue App 개발환경 구축하기
도움이 되셨다면 구독과 좋아요 부탁드립니다!
https://www.youtube.com/watch?v=HHXnC6RfEyk
개발 순서
1. Webpack 설치 및 환경 구성하기
2. express 프레임워크 프로젝트 생성하기
3. vue 개발한 화면을 express 프레임워크에 반영하기
1. Webpack 설치 및 환경 구성하기
1. visual-studio에서 터미널을 열고 프로젝트 디렉토리에서 VUE-CLI가 설치가 안되어 있을 경우, 아래 명령어를 실행한다. 이 명령어는 vue-cli를 전역에 설치하는 명령어이다.
> npm install -g vue-cli
2. vue init <템플릿> <프로젝트 이름> -> 명령어 입력하면 frontend로 webpack 프로젝트 폴더가 생성됨.
템플릿 기본으로 webpack 사용.
> vue init webpack frontend
3. frontend 경로로 이동한다.
> cd frontend
4. npm 패키지 설치 명령어
> npm install
5. 컴파일과 ESLint를 해서 로컬로 vue 페이지를 실행시킨다.
> npm run dev
npm run dev 를 터미널창에서 실행하고 아무것도 안건드리고 조금 두면, 아래 사진처럼 정상적으로 어플리케이션이 실행된다는 log가 뜬다.
브라우저에서 (http://localhost:8080)으로 접속해보자. 아래 사진처럼 vue가 실행된 화면을 확인할 수 있다.
위의 localhost:8080으로 열린 위의 페이지는 src/component/Hellowould.vue 가 실행된 것이다.
다른 페이지를 추가해 보자.
src/component/mainpage.vue 를 생성한다. vue페이지는 기본적으로 <template><script><style>로 이루어져있다.
그리고 src/router/index.js 에 아래 캡쳐 사진에서 빨간 칸과 같이 입력한다.
vue-cli의 애플리케이션 구조(참고) & 빌드 명령어 (참고)
빌드 명령어 (참고)
2. express 프레임워크 프로젝트 생성하기
1. express 모듈을 처음 설치할 경우에만 아래 명령어를 입력. 이미 있다면 설치 ㄴㄴ 2번부터 진행하면 됩니다.
> npm install -g express
2. 템플릿은 ejs를 사용하고, backend란 이름으로 express 프레임워크를 생성한다.
> express --view=ejs backend
3. backend폴더 내로 이동
> cd backend
4. npm 패키지 설치 명령어
> npm install
5. express 실행
> node bin/www
express는 backend에서 port 3000을 사용한다. frontend는 vue로 되어있고, port는 8080을 사용하고 있다. 두 개의 서버가 동작하고 있는건데,,,, 여기부터가 이해가 되지 않는다. 따로 노는데 데이터는 어떻게 공유하는 것인지 알 수 없어서 3주를 아무것도 안했다.
하지만, 오늘은 다르다. 알게 된게 있다. 바로 webpack이다. webpack이 따로 놀고있는 express와 vue를 연결하는 연결고리였던 것이다.
어느 블로그의 말에 따르면....
Webpack을 통해 Vue 프로젝트를 번들링( > npm run build )하여 express 프레임워크 프로젝트로 전달할 것이다. 그러면 vue 8000 포트의 서버를 사용하지 않고, express가 동작하는 3000포트만 사용해서 서버를 동작할 수 있다.
frontend/config/index.js 파일에서 초기 설정값들이다. express 프레임워크 프로젝트로 번들링하기 위해서는 다음 build 안에 index: path.resolve(__dirname, '') 의 경로를 수정해줘야 한다. 여기에 적어주는 경로가 바로 번들링된 파일이 저장될 경로이다.
나는 '../../backend/public/index.html'로 수정해주었다.
3. webpack 번들링하기
번들링 : webpack으로 생성한 프로젝트에서 개발한 vue페이지를 express 프레임워크 프로젝트에 반영하는 것. 별개의 프로젝트로 개발하지만, backend 역할을 하는 express프레임워크에 vue 페이지를 반영하는 방법이 'webpack 번들링'입니다.
1. webpack 프로젝트인 frontend 경로로 이동
> cd frontend
2. /dist 폴더에 Production 파일 생성
> npm run build
처음에 실행했을 때, component에 만들어 준 mainpage.vue에서 에러가 나길래 봤더니, 세상에 마지막 줄에 새로운 라인을 추가 안해줬다고 오류가 생기는 건 처음봤다. 들여쓰기도 맞게 잘 해야 오류가 안났다. 어이가 없었음(-_ㅡ);;
정상 동작 화면...
backend/public경로에 index.html이 생성된 것을 확인하고,
backend/routes 경로에 index.js를 만들고
'/'요청이 들어왔을 때 vue페이지가 번들링 된 경로로 응답을 내보낸다.
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/', function(req,res,next){
res.sendFile(path.join(__dirname, '../public', 'index.html'));
});
module.exports = router;
backend/app.js에도 routes/index.js로 요청을 받을 코드를 입력한다.
const express = require('express');
const app = express();
let port = 3000;
const indexRouter = require('./routes/index');
app.use(express.static('public'));
app.use('/', indexRouter);
app.listen(port, function(){
console.log('서버가 ${port}에서 동작중입니다.');
});
> node bin/www
node app.js를 실행하면, vue에서만 볼 수 있었던 페이지를 backend-express 서버인 3000 포트를 요청하면, vue페이지를 확인할 수 있다.
알아야 할 개념.
1. backend로 사용하는 express와 frontend로 사용할 Vue를 연동하는 방법
=[방법]=> webpack으로 개발한 vue페이지를 express 프레임워크 프로젝트로 번들링한다.
2. webpack이란?
=[webpack이란?]=> 현대 Javascript Application의 Static Module Bundler이다.
=[사용이유]=> 여러개의 javascript 파일을 브라우저에 로딩하는 것은 시간과 비용이 많이 든다고 함.
Module Bundling을 통해 여러개의 Javascript 파일을 하나의 파일로 관리하기 쉽게 해준다. 성능이 좋다.
=[쉽게 말해서]=> 복잡하게 많은 js, css, html같은 자원(module)들을 webpack이라는 Module Bundler를 통해서 하나의 통합 모듈로 만들어 주는 것을 말합니다.
어느 블로거의 webpack 정의
웹팩은 모듈 번들러입니다. 웹팩은 지정한 메인 파일에서 시작해 자바스크립트의 require 과 import 문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성합니다. 모든 파일을 하나의 파일로 합쳐 성능을 향상시킬 수 있습니다.
댓글