Vue.js - Vue CLI 이용하여 프로젝트 생성 및 설정 파일 확인

 

1. Vue CLI를 이용하여 프로젝트 생성 명령어

vue init <template-name> <project-name>

 

template-name과 project-name은 직접 입력해야 합니다.

여기서 눈여겨봐야 할 것은 template-name 영역입니다.

 

template-name은 6개 중 하나를 입력해야 한다. 옵션 6개는 다음과 같습니다.

 

- webpack : webpack 빌드 도구와 vue-loader를 이용하는 풀옵션으로서, 선택에 따라 linter, router, css 전처리, 테스팅 도구들을 사용할 수 있다.

- webpack-simple : webpack 빌드 도구와 vue-loader를 이용하는 옵션으로서, 작은 애플리케이션을 구축하는데 용이하다.

- browserify : browserify와 vueify를 이용하는 풀옵션으로서, 선택에 따라 linter와 단위 테스팅 도구를 사용할 수 있다.

- browserify-simple : browserify와 vueify를 이용하는 간단한 옵션으로서, 작은 애플리케이션을 구축하는데 용이하다.

- pwa-webpack : 빌드 도구를 이용하는 PWA 기반의 애플리케이션을 만드는데 용이하다.

- simple : 하나의 HTML 파일 안에서 Vue 컴포넌트로 개발하기에 용이하다.

 

-- webpack 옵션을 통해 hello-world 프로젝트 생성
vue init webpack hello-world

webpack 옵션의 기본값으로 설정을 원한다면, 모든 옵션에 'Y' 또는 엔터를 입력하면 됩니다.

정상적으로 프로젝트를 생성이 완료되면, 해당 디렉토리에 'hello-world'라는 폴더가 생겼을 것입니다.

 

생성된 파일에 대해서 확인해보겠습니다.

 

---

2. 생성된 파일 살펴보기

 

프로젝트가 정상적으로 생성되었으면 아래와 같은 구조로 되어 있을 것입니다.

 

 

 

.babelrc

 

많은 모던 웹 브라우저들이 javaScript ES6 문법을 어느 정도 지원해주긴 하지만 아직 지원이 부족한 상황이기 때문에 크로스 브라우징을 위해 코드를 ES5로 변환해주어야 합니다. 이때 주로 바벨이라는 도구를 사용하여 ES6 문법을 ES5문법으로 트랜스파일링하게 되는데 .babelrc에는 바벨에 대한 세팅이 정의되어 있습니다.

 

---

.editorconfig

 

.editorconfig 파일은 코드에 영향을 미치는 것이 아닌 여러 가지 IDE에서 통일된 코딩 스타일을 유지할 수 있게 도와주는 파일입니다. indent나 파일의 인코딩 형식 등 코딩 스타일에 대한 설정이 정의되어 있습니다. WebStorm과 intelliJ와 같이 .editorconfig 플러그인이 기본적으로 내장되어 있기도 하지만 별도의 플러그인으로 설치해줘야 하는 경우도 있습니다. 필자는 VSCode를 사용하는데 과거에는 별도로 플러그인을 설치해줘야 적용됐지만 현재는 내장 기능으로 포함되어 별도의 플러그인이 없어도 설정을 적용할 수 있습니다.

 

---

.elsintrc.js

 

린터(Linter)란 코딩 컨벤션과 관련된 에러를 체크해주는 작은 프로그램입니다. 코딩 컨벤션이란 읽기 쉽고 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일에 대한 약속이라고 할 수 있습니다. 간단하게 if문을 통해 알아보겠습니다.

 

// 첫 번째 스타일
if (isTrue) {
  // ...
} else {
  // ...
}
 
 
// 두 번째 스타일
if (isTrue) 
{
  // ...
} else 
{
  // ...
}

 

동작에는 아무런 문제가 없지만, 코드 스타일이 다릅니다. 이렇게 보면 사소한 이런 문제는 많은 사람이 동시에 작업하는 프로젝트에서 코드를 읽기 힘들게 만들고, 개발자의 의도치 않은 실수를 발생시키는 원인이 되기도 하므로 보통 코딩 컨벤션을 정하고 린터를 통해서 이 컨벤션을 지키도록 강제하는 것입니다.

 

Vue CLI를 사용할 때는 프로젝트를 생성할 때 Webpack이 빌드를 진행할 때 린터를 통한 코딩 컨벤션 검사도 같이 수행하도록 설정할 수 있으며, 물론 컨벤션을 지키지 않았다면 빌드는 실패합니다. .eslintrc.js는 이런 코딩 컨벤션에 대한 설정 파일입니다.

 

---

.eslintignore

 

.eslintignore 파일의 내부에 선언되어 있는 경로에 위치한 파일들은 린터가 검사를 진행하지 않습니다.

 

 

---

 

.gitignore

 

보통 프로젝트를 진행하게 되면 형상관리 툴을 이용하여 버전 관리를 합니다. 그중 가장 대표적으로 Git을 많이 사용하는데, 이때 gitignore에 선언된 경로에 위치한 파일들은 깃에서 따로 형상관리하지 않습니다. 만약 깃을 사용하지 않는 프로젝트라면 무시해도 괜찮습니다.

 

---

.postcssrc.js

 

PostCSS는 자바스크립트를 사용하여 CSS를 변환하는 툴입니다. PostCSS와 플러그인들을 사용하여 autoprefixer 플러그인을 사용하여 특정 브라우저에서 지원되지 않는 속성에 -webkit-과 같은 prefix를 자동으로 붙일 수도 있고 --color: red;와 같은 변수를 사용하거나 @import를 사용한 css파일을 모듈링할 수도 있습니다.

그러나 PostCSs는 sass와 less와 같은 CSS 메타언어와는 다르다. 우선 PostCSS는 언어가 아닌 소프트웨어 개발 도구이며, 어떤 플러그인을 사용하느냐에 따라서 수행하는 역할이 달라집니다.

자바스크립트의 바벨이 맡은 역할처럼 PostCSS 역시 '미래의 css 문법'을 사용할 수 있게 해 준다고 이해하는 편이 좋다고 합니다.

 

---

build

 

build 디렉토리에는 Vue 프로젝트를 브라우저에서 실행할 수 있게끔 빌드하기 위해 작성된 파일들이 위치하게 됩니다. Webpack은 여러개로 나눠져 있는 소스 파일을 하나로 합치거나 HTML, CSS, 이미지와 같은 자원들을 javascript 모듈로 변환하여 애플리케이션의 성능을 향살 시킬 수 있는 도구입니다. Webpack을 사용해서 운영환경에 올릴 수 있는 완성본을 만든다는 것 정도만 알면 될 것 같습니다.

 

---

config

 

config 디렉토리에는 설정에 필요한 여러 가지 상수들이 선언되어 있습니다. 크게 나눠 보자면 dev 속성과 build 속성이 있는데, dev 속성은 개발환경에서 사용하는 상수들이 선언되어 있고 build 속성은 개발이 완료된 후 애플리케이션을 빌드할 때 사용하는 상수들이 선언되어 있습니다.

 

---

assets

 

assets 디렉토리에는 애플리케이션에서 사용되는 정적 리소스들이 위치한다. 뒤에서 언급할 static 디렉토리와 차이가 있다면, 이 디렉터리에 위치하는 리소스들은 빌드 시 Webpck이 처리하게 된다는 것입니다. Vue CLI는 png, jpg, gif와 같은 이미지 파일이나 mp4, mp3와 같은 미디어 파일을 url-loader를 통해 처리하게 됩니다.

rul-loader는 파일이 코드 내에서 사용되었을 때 파일 경로를 사용하여 파일을 불러오는 것이 아니라, 파일을 Base64라는 포맷의 문자열로 인코딩 시켜 코드에 직접 삽입하는 방식으로 불러옵니다.

 

정적 리소스의 크기가 커지면 커질수록 리소스를 Base64로 변환하였을 때 문자열의 길이가 길어져서 HTML에 삽입하는 방식의 효율성이 떨어지게 되므로 정적 리소스를 static 디렉토리에 위치할 것인지 또는 assets 디렉토리에 위치할 것인지 판단이 필요합니다.

 

---

components

 

components 디렉토리에는 Vue 컴포넌트들이 위치하게 됩니다. 컴포넌트는 하나의 독립적인 기능을 가지고 있는 단위 모듈을 의미합니다. 일종의 부품을 만들어서 조립하는 방식으로 이해하면 됩니다.

 

---

router

 

router 디렉토리에는 Vue 공식 라이브러리인 Vue Router의 코드가 위치하게 됩니다. Vue Router는 사용자가 접속한 URL에 어떤 컴포넌트를 랜더 해야 하는지 정해주는 라이브러리입니다. index.js에서 Router 객체를 추출하는 모듈 형태로 되어 있습니다.

 

---

App.vue

 

App.vue 파일은 Vue 애플리케이션의 루트 컴포넌트입니다. Vue 애플리케이션의 컴포넌트들은 App 컴포넌트를 중심으로 트리 형태의 구조를 가지게 됩니다.

 

---

main.js

 

main.js는  Webpack이 빌드를 시작할 때 가장 처음 불러오는 진입 지점입니다. 즉, 작성한 애플리케이션은 이 파일을 실행함으로써 시작된다고 보면 됩니다. 해당 파일에서는 App.vue 파일을 불러와서 Vue 객체를 생성하고 엘리먼트에 바인딩하는 코드가 작성되어 있습니다.

 

---

Static

 

static 디렉터리에는 이미지, 폰트와 같은 정적 리소스들이 위치하게 됩니다. static 디렉터리의 내부에 위치한 파일들은 Webpack을 거치지 않습니다. Webpack은 이 디렉터리에 있는 파일들을 그대로 복사하여 빌드 결과물 디렉토리인 dist 디렉토리로 옮길 것이며, 처음 Vue CLI로 프로젝트를 세팅하면 .gitkepp 파일 하나만 존재하는 걸 확인할 수 있습니다. 깃은 현재 비어있는 디렉터리를 추적하지 않기 때문에 이를 추적하게 하기 위해 .gitkeep 이라는 파일을 생성해둔 것입니다.

 

---

test

 

test 디렉토리에는 e2e 테스트 (end to end Test)에 관환 코드와 단위 테스트(Unit Test)에 대한 코드들이 위치하고 있습니다. 테스트 실행은 각각의 명령어를 통해 실행할 수 있습니다.

 

---