1. git: 버전 컨트롤 도구

$ git init : 프로젝트 저장소 생성(프로젝트 루트에 .git 디렉토리가 생김)
$ git add README.md (README.md 파일 로컬저장소에 추가) 
$ git add -A (바뀐 사항 모두 로컬저장소에 추가)
$ git commit -m "add README.md" (커밋) 
$ git push (원격저장소에 추가) 
$ git pull (원격저장소에서 로컬저장소에 변경사항 적용)
$ git status (저장소의 현재 상태 출력) 

2. npm: 패키지 관리 도구

• npm은 package.json 파일을 통해 의존성을 관리한다.
• npm은 패키지를 설치할 때 전역(globally) 또는 로컬(locally)로 설치할 수 있다.
• 전역으로 설치하는 패키지는 보통 개발 과정에서 사용하는 터미널에서 실행하는 도구들이다
• 반면 로컬로 설치하는 패키지는 각 프로젝트에 종속되는 패키지이다.

  $ npm install -g underscore // 전역으로(-g) underscore 패키지 생성. 프로젝트 루트 내 node_modules 디렉토리에 생성. 
  $ npm init // package.json 파일 생성
  $ npm install --save underscore // package.json에 파일을 등록하기 위해서는 --save, --save-dev 플래그가 사용된다.

--save: 일반의존성, --save-dev: 개발의존성(앱을 실행할 때는 필요없지만, 프로젝트를 개발할 때 필요하거나 도움이 되는 패키지)

3. gulp: 빌드 도구

반복적인 개발 작업을 자동화하는 빌드 도구. grunt도 널리 쓰인다.

$ npm install --save-dev gulp

4. babel: ES6 코드를 ES5 코드로 변환하는 트랜스컴파일러

4-1. 프로젝트 구조

• 서버 쪽 코드(노드 소스)는 es6 디렉토리에 저장
• 브라우저 코드는 public/에 저장. 브라우저에 보내는 자바스크립트는 원래 공개된(public) 것이다.
• ES6코드를 ES5로 변환한 코드는 distribution의 약자인 dist 디렉토리에 저장하는 경우가 많다.
  
  

4-2. 트랜스컴파일러

• 가장 널리 쓰이는 트랜스컴파일러는 바벨과 트레이서이다.
• 바벨 버전 6부터는 ES5를 ES6로 변환하려면 ES6 변환 프리셋을 설치하고 바벨이 해당 프리셋을 사용하게끔 설정해야 한다.

 $ npm install --save-dev babel-preset-es2015

• 이 파일이 있으면 프로젝트에서 바벨을 사용할 때 ES6를 사용한다는것을 인식하게 된다.
• 프로젝트 루트에 .babelrc 파일을 만들고 이 파일의 내용을 { “presets”:[“es2015”] }로 작성한다.
  

4-3. 바벨과 걸프 함께 사용

• gulpfile.js 파일 참고 gulpfile.js파일 참고
• gulp는 파이프라인 개념으로 작업을 처리한다.

 $ npm install -g gulp
 $ npm install --save-dev gulp-babel

5. ES린트: 자주 하는 실수를 피하고 더 나은 프로그래머가 되도록 돕는 프로그램

• ESLint를 사용하기 위해서는 .eslintrc 를 만들어야 한다.
• eslint –init 명령을 통해 .eslintrc 파일을 생성할 수 있다.
• ESLint는 eslint es6/test.js처럼 직접 실행할 수도 있고, 에디터에 통합하거나 Gulpfile에 추가할 수도 있다.

    $ npm install -g eslint
    $ npm install --save-dev gulp-eslint 
  

전체 예제는 ch2.자바 스크립트 개발 도구 참고.