[Node.js] Express와 Vue 연동

Express 프레임워크는 코드의 양도 줄여주고 추후 유지보수가 쉽기 때문에 Node를 사용하는 대다수가 사용할 정도로 대중적이고 인기가 가장 많다. 

 

Vue는 사용자의 인터페이스를 만들기 위해 사용하는 자바스크립트 프레임워크로 프론트엔드쪽에서 사용하는 프론트엔드라고 생각하면 편할 것 같다.

 

만약 Express나 Node에 대한 문법이나 이론같은건 생활코딩같은 사이트에서 가볍게라도 공부를 하고 오는 편이 좋다고 생각한다.

 

생활코딩 Express 사이트 opentutorials.org/course/3370

Node.js - Express - 생활코딩

이번 포스팅에서는 백엔드에서는 Express, 프론트엔드에서는 Vue를 사용하는 기초환경을 만들 것이다.

---

 1. Vue 설치 및 프론트엔드 프로젝트 생성

먼저 cmd 에서 npm을 이용해 vue를 설치한다.

npm install -g vue-cli 

이후 cmd에서 자신이 작업할 폴더로 이동한뒤에 frontend 프로젝트를 생성하자 

연동을 위해 라우터는 설치를 하도록 하자(vue-router)

vue init webpack frontend

 

cd frontend
npm run dev

이후 frontend 프로젝트 폴더로 이동해 서버를 실행시키고

http://localhost:8080에 접속해 제대로 실행되는지 확인해본다.

해당 화면이 뜨면 잘 설치되었다는 뜻이다.

 2. Express 설치 및 backend 프로젝트 생성

npm install -g express-generator
express --view=pug backend
cd backend 
npm install 
npm start

frontend에 비해 프로젝트 생성의 어려움은 없다.

위의 명령어를 cmd에서 입력해준 뒤 http://localhost:3000으로 접속해서 화면이 제대로 뜨는지 확인해본다.

 3. frontend 와 backend 연동

frontend 프로젝트에서 설정

이렇게 프론트엔드와 백엔드 각각의 서버를 성공적으로 실행 시켰다면 이제 두 서버를 이어주도록 하자.

일단 자신이 사용하고있는 코드 에디터에서 frontend 프로젝트에 접근한다.(필자는 VS Code를 사용했다)

 

config/index.js 안의 경로를 백엔드쪽으로 수정할것이다.

'../dist/index.html' -> '../../backend/public/index.html'
'../dist' -> '../../backend/public'

npm run build

해당 명령어로 빌드작업을 하게 되면 backend 프로젝트에 css나 js 파일이 생성되는것을 확인할 수 있다.

 

backend 프로젝트 설정

이후 backend 프로젝트 폴더로 이동한다.

routes/index.js 파일을 열고 res.render()로 작성된 코드는 주석처리한 후 res.sendfile()을 집어넣는다.

backend/routes/index.js


...
var path = require('path'); // path 추가
...
  //res.render('index', { title: 'Express' }); //주석처리
  res.sendFile(path.join(__dirname, '../public/index.html')); // res.sendFile() 코드 추가
...

해당 작업후 cmd에서 backend 폴더로 이동한 뒤에 run start를 입력해 서버를 실행시킨다.

npm start

이후 백엔드 기본 포트였던 3000번으로 접속해보면(localhost:3000) 아까 8080포트에서 보였던 프론트엔드 화면이 보일 것이다. 그러면 성공적으로 연동이 된것이다.

---

이번 포스팅에서는 Vue와 Express의 기초적인 연동을 진행했다. 다음 포스팅에서는 백엔드쪽의 데이터를 프론트엔드쪽에서 핸들링 하도록 하자.