vue create 명령으로 생성된 node_modules 와 package.json 을 살펴본다. 

package.json 파일에는 프로젝트 정보 및 scripts, dependencies, devDependencies 등의 속성이 기본적으로 포함되어 있다.

• scripts : 주로 사용할 명령어 모음
• dependencies : 해당 모듈에 필요한 라이브러리 모음 (프로덕션 환경)
• devDependencies : 해당 모듈에 필요한 라이브러리 모음 (개발 및 테스트 환경)

1. dependencies / devDependencies 속성

디펜던시는 우리말로 의존성, 종속성이라고 한다. 라이브러리로 생각하면 편하지만, 어쨌든 이 속성에 기입하면 해당 모듈에 종속이 되므로 그냥 디펜던시라고 부른다. 이 디펜던시를 패키지 관리자(npm, yarn, ...)로부터 설치하고 나면 node_modules 디렉토리에 포함된다. 각종 테스트 도구나 컴파일러 관련 도구들은 개발 및 테스트 환경에서만 사용될 것이므로 devDependencies 속성에 포함할 것이다. 또한 빌드시 devDependencies 속성의 디펜던시들은 포함되지 않으므로 더 빠르고 가볍게 빌드가 가능하다. package.json 파일에 디펜던시를 정의한 후 npm 으로 설치해도 되고, npm 명령어(--save)로 설치 후에 package.json 파일의 디펜던시 속성을 업데이트 할 수도 있다.

> npm install --save vue vue-router vuex (--save: default)
> npm install --save-dev webpack webpack-cli

2. scripts 속성

...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

vue-cli-service serve 명령을 실행하면, 기본적으로 개발 서버 환경이 구동되며 브라우저(http://localhost:8080) 에서 프로젝트를 확인할 수 있다. 이 때 webpack-dev-server 기반의 HMR(Hot-Module-Replacement) 기능으로 소스 수정시 실시간으로 브라우저의 화면이 업데이트된다.

script 속성에는 패키지 관리자로부터 serve 명령을 실행하면 vue-cli-service serve 라는 구문을 실행하도록 되어 있는데 여기서 vue-cli-service 라는 파일은 ./node_modules/@vue/cli-service/bin/ 디렉토리에 있으며 ./node_modules/.bin 디렉토리에 심볼링 링크로 존재한다. 모든 디펜던시들이 이러한 형태를 가지고 있다. node_modules 디렉토리 안에 각자의 디렉토리들을 가지고 있으며 실행파일의 심볼릭 링크를 ./node_modules/.bin 디렉토리에 만들어서 경로를 단순하게 만들어 준다.

이 때 root 디렉토리에서 vue-cli-service serve 를 실행할 수 있는 방법은 다양하다.

> npm run serve (npm 사용)
> npx vue-cli-service serve (npx 사용)
> ./node_modules/.bin/vue-cli-service serve (심볼링 링크 사용)
> node ./node_modules/@vue/cli-service/bin/vue-cli-service serve (원본 파일 사용)
> vue-cli-service serve (./node_modules/.bin 디렉토리 path 추가 후 사용)

serve 명령 아래에 vue-cli-service build 명령을 실행하면, dist 디렉토리에 빌드된 결과물들이 생성되며, 이 결과물들을 실서버에 배포할 수 있다. vue-cli-service lint 명령은 소스 에러 체크시 사용한다.

Vue.js 란 무엇인가?

프론트엔드 개발자가 익혀야 하는 범주에 들어가는 SPA(Single-page application) 프레임워크 중 하나이다. SPA 는 프레임워크만의 기술로 렌더링하여 한번에 웹페이지 전체를 로드하는 방식으로, 이미 웹프론트 개발에 자리 잡은지 오래다. 이런 멋진 SPA 사이트를 만들기 위해서는 VueJS 나 ReactJS, AngularJS 중 하나를 학습하면 된다.

Vue.js 를 사용하는 이유?

Vue 는 Angular 나 React 에 비해 코드가 간결하고 자바스크립트를 덜 몰라도 개발하는데 문제가 없다고는 하는데... 그리고 HTML 렌더링하는 시간이 아주 쬐끔 더 빠르다고 한다. 개인적으로는 프론트 개발자는 아니지만 잠시 해야할 필요가 있다면 Vue, 프론트 개발자이면서 전문성을 높여야 한다면 React 를 배우는 것이 낫지않나 싶다.

Vue 사용법

스크립트로 vue.js 를 불러오고, js 에서 Vue 인스턴스를 이용하여 DOM 의 데이터를 렌더링하는 가벼운 예제이다.

<script src="https://unpkg.com/vue@next"></script>

<div id="counter">
  Counter: {{ counter }}
</div>

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
</script>

Vue 개발 환경

아마도 프레임워크를 저런식(?)으로 호출해서 사용할 일은 없을 것이고, VS code 나 WebStorm 정도의 IDE 를 사용해서 효율적으로 Vue 를 시작하게 될 것이다. 또한 npm 이나 yarn 같은 자바스크립트 패키지 관리 툴도 필요하다.