[To-Do 앱]Vue.js 와 Node.js를 이용해 웹 앱 만들기

이 포스트에서는 Node.js와  Vue.js를 이용해 프론트엔드 웹 서버를 만들어 본다. 

예상독자

• IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.
• 자바스크립트를 좀 안다.
• 백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.
• [To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST 

목표

• Node.js 설치
• Vue.js 설치
• Vue.js 앱 실행

Node.js 설치

Node.js는 오픈소스 자바스크립트 런타임 엔진(컴파일러+인터프리터+여러가지 다른 기능들)이다. Node.js를 사용하면 브라우저가 아닌 환경에서도 자바스크립트를 사용 할 수 있다. 오픈소스라는 장점 때문에 사람들이 많은 패키지들을 만들었고, 지금은 자바스크립트로 된 서버까지 있을 정도이다. Node.js는 공식 다운로드 사이트에서 다운받을 수 있다.

윈도우즈 유저는 Windows인스톨러, 맥 유저는 macOs Installer로 다운받을 수 있다.

<macOS Node.js 설치화면>

다운받고 나면 파워셸(또는 cmd)나 터미널을 켜보자. 

➜ npm --version
6.4.1

npm --version 명령어를 치면 버전이 리턴되는 것을 확인 할 수 있다. 이렇게 하면 node.js 설치를 완료 한 것이다.

Vue.js 설치

Node.js의 가장 큰 장점 중 하나는 바로 패키지 시스템이다. 패키지는 라이브러리라고 생각하면 이해하기 쉽다. 하지만 라이브러리 같은 경우 우리가 직접 라이브러리사이트에서 다운받아서 연결 해 줘야 하는 단점이 있다. 자바를 예를 들어보자, 자바에 라이브러리를 추가하려면 .jar를 다운받아 클래스패스에 추가시켜줘야한다. 이를 보완하기 위해서 maven, gradle과 같은 툴들이 생겼다. xml이나 groovy등으로 원하는 라이브러리를 추가하면 인터넷상의 리파지토리에서 해당 라이브러리를 다운받는 것이다. Node.js에서는 패키지매니저가 바로 그런 역할을 한다. 여러분이 package.json에 원하는 디펜던시들을 나열 해 놓으면 node.js가 알아서 그 디펜던시를 다운로드한다. 

Vue.js는 자바스크립트 프레임워크이다. 예를 들면 앞서 배웠던 스프링 부트같은 존재이다. 스프링 부트가 없으면 우리는 HttpRequestHandler등을 이용해서 리퀘스트를 직접 파싱하고 그 경로가 어딘지도 직접 짜야한다. @RequestMapping(value ="/todo")를 사용 할 수 없다면 URL 경로를 어떻게 해석 해야 할 지 생각해보자. 만만치 않다. 프레임워크라는 용어 자체가 익숙하지 않다면 지금은 해당 언어로 만들어진 툴 정도로 생각하면 된다. 이 툴을 이용해 우리는 더 쉽게 어플리케이션을 만들 수 있다.

➜ mkdir nodeJsProjects

일단 Node.js프로젝트만 모아놓을 새 프로젝트 폴더를 만들었다. cd를 이용해 nodeJsProjects 폴더로 들어간다. npm install -g vue-cli를 이용해 vue-cli를 설치 해 보자.

➜cd nodeJsProjects
➜sudo npm install -g vue-cli

/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 14.608s

이제 vue프로젝트를 생성 해 보자. 명령어 : vue init pwa to-do-frontend

➜ vue init pwa to-do-frontend

? Project name to-do-frontend
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)
? Project description A Vue.js project
? Author F.SoftwareEngineer <f.softwareengineer@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

vue-cli · Generated "to-do-frontend".

To get started:

cd to-do-frontend
npm install
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

나오는것 마다 엔터를 치다가 

Install vue-router? Y

User ESLint to lint your code? Y

Pick an ESLint preset Standard? 첫번째 것

나머지 질문에는 n를 선택한다. (n을 치고 엔터를 친다.)

➜ ls
to-do-frontend

다 하고 나서 ls(윈도우즈는 dir)를 이용해 디렉토리를 살펴보면 to-do-frontend앱의 프로젝트 디렉토리가 만들어 진 것을 확인 할 수 있다. 

➜ cd to-do-frontend
➜ ls
README.md    build        config       index.html   package.json src          static

그 내부로 들어가보면 vue-cli가 이것저것 boilerplate 파일과 폴더들을 만들어 놓은 것을 확인 할 수 있다. 아까 말 했던 package.json을 확인 해 보자.

{
  "name": "to-do-frontend",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "F.SoftwareEngineer <f.softwareengineer@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "sw-precache-webpack-plugin": "^0.11.4",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chalk": "^2.1.0",
    "connect-history-api-fallback": "^1.4.0",
    "copy-webpack-plugin": "^4.1.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.9.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "webpack-bundle-analyzer": "^2.9.0",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.3.0",
    "rimraf": "^2.6.2",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.7.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0",
    "uglify-es": "^3.1.3"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

이렇게 뭐가 이것저것 써있는 것을 확인 할 수 있다. 이 파일이 바로 이 앱에서 필요한 디펜던시 패키지들을 나열 해 놓는 파일이다. 예를들어서 아래를 보자.

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

이 말은 즉 "이 앱은 vue, 2.5.2버전과 vue-router 3.0.1버전에 디펜덴시가 있다"는 것임을 뜻한다. 디펜덴시가 있다는 뜻은 이 패키지들 없이는 빌드 및 실행이 안된다는 뜻이다. 그러면 이렇게 명시해 놓은 디펜던시를 어떻게 다운받을까? 바로 npm install을 이용하면 가능하다.

➜ npm install

...
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1286 packages from 660 contributors and audited 9248 packages in 78.887s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

뭐라뭐라 나오고 마지막에 이렇게 뜨면 package.json에 적어놓은 디펜덴시 패키지들을 성공적으로 설치 한 것이다.

Vue.js 앱 실행

이제 아래의 명령어로 서버를 실행 해 보자.

➜ npm run dev

정상적으로 실행 됐다면 다음과 같은 화면이 터미널에 뜬다.

이제 http://localhost:8080에 들어가보면 다음과 같은 화면이 실행된다.

잠깐! 나는 아무 HTML/Javascript코드도 작성을 안했는데 이 컬러풀한 화면이 왜 뜰까? 그것은 우리가 vue init pwa to-do-frontend로 프로젝트를 만들었을 때 vue가 우리가 시작하기 쉽도록 샘플 코드들을 만들어 주었기 때문이다.

여기서 끝내면 아쉬우니 뭐라도 바꿔보자. 여러분의 IntelliJ(Webstorm, Atom 또는 다른 IDE)를 이용해 프로젝트를 열어보자. 그리고 to-do-frontend/src/components/Hello.vue에 들어가보자. 

여기 msg에 Welcome to Your Vue.js PWS를 'Welcome to Your To Do App'으로 바꿔보자. 아직 서버를 실행중이라는 가정 하에 http://localhost:8080을 새로고침하면 다음과 같은 화면이 뜰 것이다. 만약 서버가 꺼졌다면 npm run dev로 다시 실행시키면 된다.

축하한다! 여러분은 vue.js와 node.js를 이용해 웹 앱의 프론트엔드 서버를 실행시켰다.

끝

이번 포스트에서는 Node.js와 Vue.js를 이용해 frontend웹 앱을 만들어 보았다. 앞의 스프링 부트 튜토리얼까지하면 우리는 총 2개의 서버를 가지고 있는 셈이다. 1. 스프링부트 RESTful API가 실행되는 서버, 2. Vue.js및 프론트엔드를 실행하기 위한 Node.js 서버. 작은 어플리케이션에서는 스프링부트 RESTful API서버는 필요 없을 수 있다. Node.js서버만 가지고도 몽고디비나 serverless api를 이용해 충분히 앱을 만들 수 있다. 하지만 대부분의 엔터프라이즈 웹 어플리케이션은 아직도 벡엔드에 RESTful API서버를 가지고 있는 추세이다. 나중에 기회가 되면 node.js서버에서 바로 몽고디비를 이용하는 방법도 포스팅 해 보겠다.

한가지 주의 할 점이 있다. 프론트엔드 부분은 내가 전문가가 아니라서 자세히 설명 할 수 없을지도 모른다. 따라서 이 포스트의 내용이 100% 정확하지 않음을 유념하기 바란다. 그래도 모르는게 있다면 댓글에 남겨라. 찾아보고 토론하다보면 답이 나올지 모른다. 

다음 포스트에서는 vue.js의 구조 및 라우팅에 대해 조금 더 알아보고 처음으로 frontend 앱에서 스프링부트 RESTful API를 사용 해 보도록 한다.

다음포스트 : [To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios)