# 환경설정

node는 여러 경로를 통해서 다운받을 수 있기때문에 버전 충돌이 발생할 수 있다. 한 경로를 통해서 설치하는 것이 좋은데 **nvm**은 Node Version Manager의 약자로 node.js의 **버전 관리**를 도와주는 bash script이다.

### nvm 설치

[nvm-sh/nvm](https://github.com/nvm-sh/nvm) 에서 설치 방법을 확인할 수 있다.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
```

```bash
$ vim ~/.zshrc
```

`~/.zshrc` 혹은 `~/.bash_profile` 등등의 파일을 열어서 확인해보면 아래와 같이 추가된 것을 확인할 수 있다.

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
```

터미널을 종료하고 다시 실행하거나 `source ~/.zshrc` 를 해주면 된다.

```bash
$ nvm --version
0.34.0
```

### Node 설치

```bash
$ nvm install node
$ node -v
v12.11.0
$ npm -v
6.11.3
```

### Vue 설치

```bash
$ npm install vue
```

## Vue-CLI

[vue-cli](https://cli.vuejs.org/)에서 CLI는 Command Line Interface의 약자로 윈도우에서는 command, 맥에서는 터미널 창에서 명령어를 통해 원하는 바를 실행시키는 도구를 말한다. vue-cli는 내부적으로 Webpack을 활용하며, 명령어를 실행시키면 CLI가 자동으로 최적화된 Webpack 형태의 결과물을 생성시켜준다.

* 새로운 vue 프로젝트 생성 : scaffolding(기본골격)을 선택하여 vue 프로젝트를 빠르게 생성할 수 있다.
* Vue 플러그인 설치/삭제 : 다양한 vue플러그인들을 추가하거나 삭제할 수 있다.
* `vue.config.js` 설정 : 웹팩의 구성에 대해 오버라이딩하여 추가 설정할 수 있다.
* vue GUI 도구 사용 : cli가 낯선 개발자를 위해 GUI형태로도 제공해준다.

### 설치하기

```bash
$ npm install -g @vue/cli
```

## 개발자 도구 설치하기

[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 크롬 확장 프로그램을 설치해준다. vue로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다.

* 확장 프로그램 설치가 완료되면 vue.js devtools에서 파일 url에 대한 엑세스 허용에 체크해준다.

## 참고링크

* [mac에서 node.js를 완전히 삭제하는 방법](https://gomugom.github.io/how-to-remove-node-from-macos/)
* [macOS setup for Vue](https://gist.github.com/nerdenough/d288f2e732637f55f9858070c6b8b15b)
* [node.js 버전 충돌 문제 해결](https://gompro.postype.com/post/1737968)
* [Vue-CLI 도구 활용방법](https://ux.stories.pe.kr/136)