Overview

새로운 사용환경 구축에 도전하는 건 개발자의 운명과도 같습니다. 오늘은 여러 장점을 가지고 있는 Vue (프론트엔드 자바스크립트 프레임워크)를 도전해보겠습니다. Vue는 다른 프레임워크에 비해 가볍고, 개발하기에 편합니다. 그럼 우선 Vue를 설치합시다!


Vue 설치

  1. CDN
    • https://unpkg.com/vue 주소를 script 태그에 직접 추가

  2. Vue.js 파일다운
    • 개발용, 배포용 버전을 다운 받아 script 태그에 추가
    • 개발용 버전은 개발에 도움이 되는 모든 경고를 출력하기 때문에 개발 중에만 사용하고, 실제 서비스에서는 배포용 버전으로 사용해야 한다.

  3. NPM 설치
    • 규모가 큰 프로젝트 경우 컴포넌트별 독립적으로 관리할 수 있는 싱글 파일 컴포넌트 방식 추천

Vue를 설치하는 방법은 여러 가지가 있습니다. 각자 특성에 맞게 편리한 방법으로 설치해주세요. 이번 글에서는 싱글 파일 컴포넌트 방식을 사용할 것이므로 NPM vue-cli 를 설치해 프로젝트를 구성하겠습니다. 

# vue-cli 전역 설치, 권한에러시 sudo 추가
$ npm install vue-cli -global




vue-cli

vue-cli를 사용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있습니다. 다만, 싱글 파일 컴포넌트 체계를 사용하려면 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요합니다.

vue-cli 설치 명령어

  • vue init webpack : 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅，문법 검사 등을 지원
  • vue init webpack-simple : 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
  • vue init browserify : 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅，문법 검사 등을 지원
  • vue init browserify-simple : 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
  • vue init simple : 최소 뷰 기능만 들어간 HTML 파일 1개 생성
  • vue init pwa : 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트



여러 설치 명령어 중에 특성에 맞는 초기 프로젝트를 생성하세요.

1) vue init webpack 실행

# 해당 프로젝트 폴더에서 실행
$ vue init webpack

# 현재 디렉토리에서 프로젝트 생성 여부
? Generate project in current directory? (Y/n)
# 프로젝트 이름
? Project name (vue_ex)
# 프로젝트 설명
? Project description (A Vue.js project)
# 프로젝트 작성자
? Author (곽정섭 <kwakjs@brandi.co.kr>)
# 빌드 방식
? Vue build (Use arrow keys)
# vue-router를 설치 여부
? Install vue-router? (Y/n)
# 코드를 보완하기 위해 ESLint를 사용 여부
? Use ESLint to lint your code? (Y/n)
# ESLint 사전 설정 선택
? Pick an ESLint preset (Use arrow keys)
# 단위 테스트 섧정
? Set up unit tests (Y/n)
# 테스트 러너 선택
? Pick a test runner (Use arrow keys)
# Nightwatch로 e2e 테스트를 설정 여부
? Setup e2e tests with Nightwatch? (Y/n)
# 프로젝트가 생성 된 후에`npm install`을 실행해야합니까?
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)


2) 고급 웹팩 기능을 활용한 프로젝트 구성 방식으로 설치

01


3) 설치완료

02


4) package.json 파일에 설정된 라이브러리 설치

$ npm install


5) 개발모드 실행

# 해당 프로젝트 폴더에서 실행(소스수정시 자동 새로고침)
$ npm run dev


6) http://localhost:8080/ 브라우저 실행

03


7) Yeah, You got it!!!!

04



추가 도구: Vue Devtools(크롬 확장 플러그인)

Vue Devtools(크롬 확장 플러그인)은 Vue를 사용할 때, 브라우저에서 사용자 친화적으로 검사하고 디버그할 수 있습니다.

05
크롬 개발자 도구에 Vue 탭이 추가됨



Conclusion

Vue를 설치하는 여러 방법 중 고급 웹팩 기능을 활용한 프로젝트 구성을 알아봤습니다. 다음 글에서는 Vue 인스턴스 및 디렉티브(지시문) 사용법을 다뤄보겠습니다.


참고
설치방법 — Vue.js

글
곽정섭 | 커머스 개발팀
kwakjs@brandi.co.kr
브랜디, 오직 예쁜 옷만