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
npm을 통해서 express를 설치하고./backend의 이름으로 프로젝트를 생성한다. 이후npm을 실행시켜서 express가 제대로 작동하는 지 확인한다.
npm install express-generator
express --view=pug backend-
Vue 프로젝트를 Webpack으로 빌드할 때 결과물을
./backend폴더 내의public으로 변경한다. (이전에 작성한 이 게시물을 참고하여vue.config.js파일을 수정하면 된다.)
⚠️ 서버 동작 중에 빌드를 하면 오류가 발생할 수 있으므로 서버 종료 후 빌드해야 한다. -
Vue Router와 express의 연동을 위해
npm을 통해서connect-history-api-fallback모듈을 설치한다. 이후./backend폴더 내의app.js파일에 모듈을 등록한다.
let app = express();
app.use(require('connect-history-api-fallback')());4. Reference
