[vue.js] express로 backend 연동하기

byungjur_96·2021년 1월 13일
0

vue-js

목록 보기
6/8
post-thumbnail

express를 이용하여 Vue 프로젝트를 서버에 올릴 때 URI를 매칭하는 방법

1. Terminology

1) SPA

SPA란 'Single Page Application'의 약자로, 최초에 하나의 HTML 페이지를 로드한 이후 사용자의 인터렉션에 따라 동적으로 페이지를 업데이트하는 웹 어플리케이션 을 의미한다. 따라서, 일반적인 웹 어플리케이션의 경우 페이지 간의 이동 시에 대상 URL을 서버에 요청해 전체 페이지에 해당하는 HTML 콘텐츠를 받아오는 반면에 SPA의 경우 Ajax를 이용하여 필요한 데이터를 받아와서 화면에 표시한다.

SPA를 사용하면 페이지 이동 시에 필요한 리소스만 부분적으로 로딩을 하기 때문에 전체 페이지에 해당하는 HTML을 모두 받아오는데 드는 오버해드가 줄어들어 어플리케이션의 속도가 향상되며, 더 나은 사용자 경험을 제공할 수 있다는 장점이 있다.

반면에 JS 파일로 번들링하여 한 번에 받기 때문에 초기 구동 속도가 그리며, 검색 엔진 최적화(SEO, Search Engine Optimization)가 어렵다는 한계 역시 존재한다. (이는 SSR로 해결 가능하다.)

2) Webpack

Webpack이란 여러 개의 JavaScript 파일을 Module Bundling이란 기법을 통해 하나의 파일로 통합시켜주는 Static Module Bundler이다. 여러 개의 JavaScript 파일을 브라우저에서 로딩하는 것보다 시간과 비용을 많이 절약할 수 있으며, 뿐만 아니라 이번 포스팅의 관련된 내용에서는 'Vue 어플리케이션을 express 프레임워크 프로젝트로 번들링'하는 역할을 한다고 한다. (항상 문제 안생기게 사용만 계속 해왔지만, Front-End를 하면 할수록 Webpack의 중요함을 크게 느끼게 되는 것 같다. 언제 기회가 된다면 Webpack에 대해서도 한 번쯤 꼼꼼히 짚어보는 기회가 있으면 좋을 것 같다.)

2. Purpose

처음에 진행 중인 프로젝트를 배포할 때에는, 단순히 Vue 프로젝트를 npm serve 하였을 때 나오는 페이지만 제대로 구현이 완료되면 포트 번호 정도만 바꿔주면 배포가 완료된 것이라고 생각하였다. 하지만, 웹 호스팅 업체를 통한 서비스 배포는 조금 다른 개념이었고, 혹시나 하는 마음에 배포 후 메인 화면에서 다른 화면으로 전환하는 순간 오류가 발생하는 것을 확인해보았다. 이전에 그러려니 하고 넘어간 SPA, Webpack과 같은 개념들이 서비스 배포 전 가벼운 마음으로 시작한 검토 과정에서 발목을 붙잡았고, 그 해결책에 비해 상당히 오랜 시간을 삽질로 고생하였다. 명쾌하게 설명하기엔 아직 내가 갈 길이 멀고, 간단하게 설명하자면 'Vue 프로젝트를 express를 통해 배포하는 법 ' 정도로 정리할 수 있을 것 같다.

3. Usage

  1. npm 을 통해서 express를 설치하고 ./backend 의 이름으로 프로젝트를 생성한다. 이후 npm 을 실행시켜서 express가 제대로 작동하는 지 확인한다.
    npm install express-generator
    express --view=pug backend
  1. Vue 프로젝트를 Webpack으로 빌드할 때 결과물을 ./backend 폴더 내의 public 으로 변경한다. (이전에 작성한 이 게시물을 참고하여 vue.config.js 파일을 수정하면 된다.)
    ⚠️ 서버 동작 중에 빌드를 하면 오류가 발생할 수 있으므로 서버 종료 후 빌드해야 한다.

  2. Vue Router와 express의 연동을 위해 npm 을 통해서 connect-history-api-fallback 모듈을 설치한다. 이후 ./backend 폴더 내의 app.js 파일에 모듈을 등록한다.

	let app = express();
	app.use(require('connect-history-api-fallback')());

4. Reference

  1. Vue와 Express를 합쳐서 통합 프로젝트 만들기 [link]
  2. (공식 문서) HTML 히스토리 모드 서버 설정 예제 [link]
  3. Vue의 라우터 [link]
  4. Vue Router (개념 및 구현) [link]
  5. 아하 프론트 개발기(1) — SPA와 SSR의 장단점 그리고 Nuxt.js [link]
  6. Webpack과 express 프레임워크를 사용한 Vue App 개발환경 구축하기 [link]
profile
개발 외의 일들에 더 흥미를 가지는 개발자. Interested in Web, NLP, UI/UX.

0개의 댓글