[Vue 시작하기] 개발 환경 세팅

vue.js

---

1. IDE 선택하기

vscode 설치하기

• Vetur Extension : Vetur 플러그인은 Vue.js를 개발하는데 도움을 주는 플로그인(타입스크립트를 함께 사용)

• Vue Peek Extension : 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일을 바로 열고 그 파일로 이동할 수 있는 기능을 제공하는 플로그인
• Vue 2 Snippets Extension : Vue 컴포넌트를 자동완성을 제공한다.

2. Nodejs 환경 구축하기

Vue, Angular, React와 같은 모던 자바스크립트 프레임워크는 대부분 nodejs를 사용하여 코드를 빌드한다.

• Nodejs의 공식 홈페이지에서 LTS(Long Term Support) 안정성 보장이되어 해당 버전을 다운받는다.

• 버전 확인하는방법

npm이란 자바스크립트 기반의 패키지를 쉽게 설치 및 관리할 수 있도록 도와주는 툴
nodejs를 설치하면 자동으로 npm도 함께 설치되므로 별도로 설치할 필요는 없다.

 

3. Vue 환경 구축하기

Vue Devtools

• 웹 브라우저인 크롬에서 사용할 수 있는 확장 애플리케이션이다.

• Vue를 사용한 애플리케이션을 개발할 때 도움을 주는 유용한 툴, 애플리케이션의 구조 및 데이터의 흐름을 디버깅할 때 유용하다.

• 별도로 설정을 변경하지 않으면 개발용 빌드에서는 사용할 수 있지만 배포용 빌드에서 사용할수없다.

• Vue 프로젝트를 빌드할 시

Vue CLI

• Vue 프레임워크는 애플리케이션 환경을 쉽고 빠르게 구축할 수 있는 CLI를 제공한다.

• 주의) Vue CLI를 이용하기 위해서는 nODEjs 6.x버전 이상, npm 3버전 이상의 환경이 설치되어있어야한다.

• 만약 현재 3.x버전이 설치되어있고 2.x버전을 사용하게 된다면 아래 모듈 설치

• Vue CLI를 사용하여 프로젝트를 생성하는 명령어

4. Vue CLI로 생성된 파일 살펴보기

.babelrc	많은 모던 웹 브라우저들이 ES6문법을 어느정도 지원해주지만 아직 부족한 상황이기 때문에 크로스 브라우징을 위해 코드를 ES5로 변환해줘야 한다. 이 파일에서는 ES6 문법을 ES5로 트랜스파일링하게 되는데 바벨에 대한 세팅이 정의되어 있다. 가장 중요한 속성은 presets인데 기본적으로 env와 stage-2 프리셋을 세팅해준다.
.editorconfig	코드에 영향을 미치는 것이 아닌 여러가지 IDE에서 통일된 코딩 스타일을 유지할 수 있게 도와주는 파일이다. indent나 파일의 인코딩 형식 등 코딩 스타일에 대한 설정이 정의되어있다.
.eslintrc.js	린터(Linter)란 코딩 컨벤션(Coding convention)과 관련된 에러(Error)를 체크 해주는 작은 프로그램이다. 코딩 컨벤션이란 읽기 쉽고 관리하기 쉬운 코드를 작성하기위한 일종의 코딩 스타일에 대한 약속이라고 할 수 있다. 이런 코딩 컨벤션에 대한 설정 파일이다.
.eslintignore	파일에 선언되어 있는 경로에 위치한 파일들을 린터(Linter)가 검사를 진행하지 않는다.
.gitignore	파일에 선언된 경로에 위치한 파일들은 깃에서 따로 형상 관리하지 않는다.
build	디렉터리에는 Vue 프로젝트를 브라우저에 실행할 수 있게끔 빌드하기 위해 작성된 파일들이 위치하게 된다. 이 중 Webpack의 설정 파일인 webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js, webpack.test.conf.js 이다. 이 파일들은 webpack.base.conf.js 기반으로 하여 각 환경별로 다른 세팅이 작성되어있는 파일이다. Webpack은 여러개로 나눠져 있는 소스 파일을 하나로 합치거나 HTML,CSS,이미지와 같은 자원들을 Javascript 모듈로 변환하여 애플리케이션의 성능을 향상 시킬수 있는 도구다. 지금은 Webpact을 사용해서 운영환경에 올릴 수 있는 완성본을 만드는 것 정도만 알고 있으면 된다.
config	디렉터리에는 설정에 필요한 여러가지 상수들이 선언되어있다. 크게 dev 속성과 build 속성이 있는데 dev는 개발관형에서 사용하는 상수들이 선언되어있고, build속성은 개발이 완료된 후 애플리케이션을 빌드할 때 사용하는 상수들이 선언되어있다.
index.html	기본적인 Vue 애플리케이션은 Webpack이 번들링된 파일을 index.html에 삽입하고 클라이언트에서 렌더링을 수행하는 방식으로 작동한다. 외부 스크립트를 CDN을 통해 호출해야 하거나 문서의 타이틀을 수정하는 등 HTML에 작성해야 하는 코드가 있다면 이파일에 작성하면 된다.
node_modules, package.json	node_modules에는 사용자가 npm을 통해 설치한 패키지들이 위치하고 있다. npm을 통해 설치한 패키지들은 package.json이라는 파일을 통해서 관리하게 되는데 Vue CLI는 기본적으로 Vue 애플리케이션을 작성할 때 필요한 패키지들을 초기 설정시 설치해주기 때문에 따로 원하는 패키지가 없다면 새롭게 설치할 필요는 없다.
src	애플리케이션이 동작하는데 필요한 대부분의 소스는 src 디렉터리안에 존재한다.
assets	정적 리소스들이 위치한다. static 디렉터리와 차이가 있다면, 이 디렉터리에 위치하는 리소스들은 빌드시 Webpack이 처리하게 된다. Vue CLI는 이미지, 미디어 파일을 url-loader를 통해 처리하게 된다. url-loader는 파일이 코드내에서 사용되었을때 파일 경로를 사용하여 파일을 불러오는 것이 아니라 파일을 Base64라는 포맷의 문자열로 인코딩시켜 코드에 직접 삽입하는 방식으로 불러온다. 이 방식은 HTML이나 자바스크립트 같은 코드를 로드한 후에 추가적으로 파일을 다시 로드할 필요가 없기 때문에 효율적이긴 하지만 정적 리소스의 크기가 커지면 커질수록 리소스를 Base64로 변환하였을때 문자열이 길이가 길어져서 html에 삽입하는 방식의 효율성이 떨어지게 되므로 프로젝트 진행시 정적 리소스를 static 디렉터리에 위치할 것인지 또는 assets 디렉터리에 위치할 것인지에 대한 판단이 필요하다.
components	Vue 컴포넌트들이 위치하게 된다. 컴포넌트는 하나의 독립적인 기능을 가지고 있는 단위 모듈을 의미한다. 일종의 부품을 만들어서 조립하는 방식으로 이해하면 된다.
router	Vue의 공식 라이브러리인 Vue Router의 코드가 위치하게 된다. 사용자가 접속한 URL에 어떤 컴포넌트를 랜더해야 하는지 정해주는 라이브러리다. index.js에서 Router 객체를 추출하는 모듈 형태로 되어있다. 애플리케이션이 커지게 되면 Router 객체의 개수도 늘어나 index.js에 작성하는 코드가 많아지게 되므로 관리를 쉽게 하기 위해 별도의 자바스크립트 모듈 파일을 만들고 import문을 이용해 index.js 에 모듈을 추가하여 병합하는 방법을 사용하기도 한다.
App.vue	Vue 애플리케이션의 루트 컴포넌트다. Vue 애플리케이션의 컴포넌트들은 App 컴포넌트를 중심으로 트리 형태의 구조를 가지게 된다.
main.js	Webpack이 빌드를 시작할 때 가장 처음 불러오는 진입 지점(Entry Point)이다. 해당 파일에서는 App.vue 파일을 불러와서 Vue객체를 생성하고 app 엘리먼트에 바인딩 하는 코드가 작성되어있다.
static	이미지, 폰트와 같은 정적 리소스들이 위치하게 된다. 내부에 위치한 파일들은 Webpack을 거치지 않는다. Webpack은 이 디렉터리에 있는 파일들을 그대로 복사하여 빌드 결과물 디렉터리인 dist 디렉터리로 옮길 것이다.
test	e2e 테스트(end to end Test)에 관한 코드와 단위 테스트(Unit Test)에 대한 코드들이 위치하고 있다.

---

출처 : 커피 한 잔 마시며 끝내는 Vue.js

- 공부하며 정리한 내용입니다.