Vue.js를 이용하여 Frontend 서버를 구성하고 Node.js 플랫폼의 Express.js 모듈로 Backend를 구성하는 방법에 대해서 기술하고자 합니다. Vue.js를 시작하는 입문자에게 도움이 될 것입니다. 먼저 디렉토리를 하나 생성합니다. mkdir vue.js
Vue.js Frontend
VUE CLI를 글로벌로 설치를 합니다. 여기서 vue-cli는 Vue 개발 환경을 설정해주는 도구입니다. CLI란 명령 줄 인터페이스로 ‘Command Line Interface’ 약자이고 텍스트 터미널을 통해 명령줄을 입력하여 프로젝트 관리를 대신해 줍니다.
npm install -g @vue/cli OR yarn global add @vue/cli
설치가 끝나면
vue --version 으로 버전을 확인을 합니다.vue 프로젝트 생성을 해보겠습니다. 프로젝트명은 알아보기 쉽게 ‘fe’로 하겠습니다. 처음에 만들어 놓았던 ‘vue.js’ 디렉토리로 가서 진행을 하시면 됩니다.
cd vue.js
vue create fe
preset을 선택하라고 나옵니다. 여기서는 첫번째 ‘Vue3, babel, eslint’로 선택을 합니다.
설치가 잘 되면 커맨드가 다시 활성화 됩니다. 잘 설치면 ‘fe’ 디렉토리로 가서 npm run serve 혹은 yarn serve 명령어를 내려줍니다.
cd fe
npm run serve OR yarn serve
해당 주소인 ‘http://localhost:8080’으로 들어가보면 정상적으로 프론트엔드 VUE가 실행이 됩니다.
Express.js Backend
백엔드 설치에 앞서 Node 플랫폼을 설치를 해야 합니다. Node.js 설치가 안 되었다면 설치해 주세요.
Node.js 설치가 된 상태에서 설명을 드리고 있습니다.
프론트엔드를 Vue.js로 구성이 되었다면 이번에는 Express.js로 백엔드 구성을 하겠습니다.
먼저 express를 글로벌로 설치를 하겠습니다.
npm install -g express-generator처음에 프로젝트 디렉토리인 ‘vue.js’에서 작업을 하도록 하겠습니다. 백엔드 프로젝트명은 ‘be’로 하겠습니다. 참고로 view 속성을 이용해서 템플릿 엔진을 설정할 수 있다. 대표적으로 3개의 템플릿이 있다.(pug, handlebars, ejs)
간단히 말해서 pug(jade)는 다른 문법의 구문을 사용하고 있고 handlebars, ejs는 html 구문을 사용을 한다. 좀 더 자유도가 높은 것은 자바스크립트를 자유롭게 쓸 수 있는 ejs다.
express --view=ejs be
설치가 잘 되면 위와 같은 모습의 형태가 보입니다. 간단하게 설치가 되었네요. 만들어진 ‘be’ 디렉토리로 가서 ‘npm install’ 및 ‘npm start’를 하고 나서 실제 브라우저에서 실행을 해보겠습니다.
cd be
npm install
npm start브라우저로 ‘http://localhost:3000/’을 실행해 볼게요. 아래와 같은 화면이 나오면 성공입니다.
프론트엔드와 백엔드를 간단하게 구성을 하였는데 VSC에서 보면 해당 디렉토리 구조는 심플하게 나뉘어진 모습입니다. (‘be’인 Backend와 ‘fe’인 Frontend)
vue.js의 프론트엔드 디렉토리 구조를 간단히 살펴보면 public 디렉토리가 가장 처음 로드되는 기본 html이 위치하고 있고 src 디렉토리에는 이미지와 파일 저장소인 ‘assets’와 웹 페이지의 화면을 구성할 컴포넌트들로 구성된 ‘components’와 최상위 컴포넌트인 ‘App.vue’ 파일로 구성이 되어있다. 마지막으로 ‘main.js’ 파일은 애플리케이션의 최초 진입점이다.
Node.js nodemon
nodemon은 서버의 변경 사항을 재시작할 필요없이 자동으로 변경사항을 실시간으로 적용하는 모듈입니다.
설치 방법은 글로벌로 설치해야 하니 ‘npm install nodemon -g’, 그리고 Mac OS 사용자는 npm 앞에 ‘sudo’를 붙이시면 됩니다.
npm start을 하면 package.json 파일의 Scripts > start가 실행이 됩니다.
start는 “node ./bin/www”로 node로 파일을 실행하는 명령입니다.
nodemon 실행 방법은 ‘nodemon 파일이름’입니다.
최종적으로 express 폴더에서 ‘npm start -> nodemon ./bin/www’로 변경해서 실행하면 됩니다.
nodemon 실행 이후에는 node에서 변경되는 모든 사항을 감지하여 서버가 자동으로 재시작하면서 변동 사항이 적용이 됩니다. 개발 테스트 하기에 편리하며 실제 프러덕션에서 배포할 때에 무중단 서비스를 nodemon으로 백그라운드로 돌리게 됩니다.