1. Vue CLI란?

CLI

• Command-Line Interface
• 텍스트 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식

Vue CLI

• 기본 vue 개발 환경을 설정해주는 도구
• vue 개발을 위한 표준 도구로서 프로젝트 구성을 도와줌
• vue-cli가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, 라이브러리 선택, webpack 설정 등에 대한 고민을 덜 수 있음

1) Vue CLI 시작하기

설치하기

npm 또는 yarn (node.js 패키지 매니저)이 설치되어 있어야함

npm install -g @vue/cli
# OR
yarn global add @vue/cli

설치 확인

vue --version // 3.4.0

vue의 version이 나온다면 설치 완료

프로젝트 생성하기

vue create {프로젝트명}

프로젝트가 생성되고 나면 다음과 같은 화면이 나오며 vue 버전을 선택하라고 한다. 방향키를 이용해 선택하면 된다. (현재 더 안정적인 Vue 2 선택)

Vue 선택 후 생성된 프로젝트로 이동하라고 친절하게 안내해준다.

프로젝트 폴더로 이동 후 서버를 실행하면 다음과 같은 화면을 볼 수 있다.

2. 프로젝트 구조

1) node_modules

• node.js 환경의 여러 의존성 모듈
• .gitignore에 넣어 깃에 올리지 않도록 한다. (용량이 매우 큼)

2) node_modules - Babel

• 자바스크립트의 컴파일러
• 자바스크립트의 ES6+ 코드 (최신코드)를 구 버전으로 번역해주는 도구
• 자바스크립트의 파편화, 표준화의 영향으로 코드의 스펙트럼이 매우 다양

3) node_modules - Webpack

• static module bundler
• 모듈 간의 의존성 문제를 해결하기 위한 도구
• 프로젝트에 필요한 모든 모듈을 매핑하고 내부적으로 종속성 그래프를 빌드함

4) Module

• 애플리케이션이 커지면서 파일 하나에 모든 기능을 담기가 어려워짐
• 따라서 파일을 여러개로 나누어 관리 하고, 분리된 개별 js 파일이 모듈이 된다.
• 모듈은 기능 단위로 분리하며, 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성

모듈의 의존성 문제

• 모듈 간 의존성이 깊어지면서 문제가 발생했을 때 어떤 모듈간의 문제인지 파악하기 어렴다.
• 이러한 의존성 문제를 해결하기 위해 Module이 등장했다.

5) Bundler

• 모듈 의존성 문제를 해결해주는 작업
• 모듈은 하나로 묶어주고 묶인 파일은 하나가 됨
• Vue CLI는 이러한 Babel, Webpack 모두 초기 설정에 자동으로 세팅됨

6) package.json

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

7) package-lock.json

• node-modules에 설치되는 모듈과 관련된 모든 의존성 설정 및 관리
• 혐업 및 배포 환경에서 정확히 동일한 종속성을 유지하여 설치하기 위해 보장하는 표현
• 개발 과정 간의 의존성 패키지 충돌 방지 (파이썬에서 requirements.txt 역할)

8) public/index.html

• Vue 앱의 뼈대가 되는 html 파일
• Vue 앱과 연결될 요소가 있음

9) src/

src/assets

• 정적 파일을 저장하는 디렉토리

src/components

• 하위 컴포넌트들이 위치

src/App.vue

• 최상위 컴포넌트
• public/index.html과 연결됨

src/main.js

• webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point
• public/index.html과 src/App.vue를 연결시키는 작업이 이루어지는 곳
• Vue 전역에서 활용할 모듈을 등록할 수 있는 파일