[Vue] Vue CLI

Vue CLI

• Vue.js 개발을 위한 표준 도구
• 프로젝트 구성을 도와주는 역할
• Vue 개발 생태계에서 표준 tool 기준을 목표로 함

 

- Node.js

• JS를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 JS 런타임 환경
  • 브라우저 밖을 벗어날 수 없던 JS언어의 한계 해결
• Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경 제공
• 단순히 브라우저에서만 조작할 수 있던 JS를 SSR 아키텍처에서도 사용할 수 있도록 함

 

- NPM (Node Package Manage)

• JS언어를 위한 패키지 관리자
• Node.js 설치 시 함께 설치됨

 

Vue CLI 사용하기

- 설치

# 설치
$ npm insatll -g @vue/cli

# 버전 확인
$ vue --version

 

- 프로젝트 생성

$ vue create my-app

 

- 서버 실행

# 프로젝트 디렉토리로 이동
$ cd my-app

# 서버 실행
$ npm run serve

 

Vue 프로젝트 구조

- node_modules

• node.js 환경의 여러 의존성 모듈

• webpack : 모듈 간 의존성 문제 해결 위한 도구, 프로젝트에 필요한 모든 모듈 매핑, 내부적으로 종속성 그래프 빌드
  • 모듈은 단지 파일 하나를 의미 (스크립트 하나 === 모듈 하나)
  • 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악 어려워짐
  • 모듈 의존성 문제를 해결해주는 작업을 Bundling이라 함
  • Bundling을 해주는 도구가 Bundler, webpack은 Bundler 중 하나
  • Bundling된 결과물은 더 이상 순서에 영향 받지 않고 동작

 

- public/index.html

• Vue 앱의 뼈대, 실제 제공 되는 단일 html 파일

 

- src/assets

• webpack에 의해 빌드된 정적 파일

 

- src/components

• 하위 컴포넌트들 위치

 

- src/App.vue

• 최상위 컴포넌트

 

- src/main.js

• webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point
• 실제 단일 파일에서 DOM과 data를 연결했던 것과 동일한 작업이 이루어지는 곳
• Vue 전역에서 활용할 모듈을 등록할 수 있는 파일

 

- babel.config.js

• babel 관련 설정이 작성된 파일
• babel
  • JS의 ECMAScripts2015+ 코드를 이전 버전으로 번역/변환해주는 도구
  • 과거 JS의 파편화/표준화 영향 → 최신 문법 사용해도 이전 브라우저/환경에서 동작하지 않는 상황 발생
  • 원시 코드(최신 버전)를 목적 코드(구 버전)로 옮기는 번역기

 

- package.json

• 프로젝트의 종속성 목록과 지원되는 브라우저에 대한 구성 옵션 포함

 

- package-lock.json

• node_modules에 설치되는 모듈과 관련된 모든 의존성을 설정 및 관리
• 팀원 및 배포 환경에서 정확히 동일한 종속성을 설치하도록 보장하는 표현
• 사용할 패키지의 버전을 고정
• 개발 과정 간의 의존성 패키지 충돌 방지