자바스크립트 개발 도구

깃(git) : 프로젝트가 커져도 쉽게 관리할 수 있고, 다른 개발자와 협력할 수 있게 돕는 버전 컨트롤 도구

튜토리얼1 : https://try.github.io/levels/1/challenges/1

튜토리얼2 : 매튜 맥컬로프의 문서 ( 한국어 번역 본 : https://git-scm.com/book/ko/v2 )

---

노드(Node) : 브라우저 밖에서 자바스크립트를 실행시켜주는 도구. npm(설치된 패키지 관리)이라는 도구 설치 기능을 가진 것도 함께 설치됨.

node 설치 : https://nodejs.org/ ( 설치 후 노드$node -v와 npm$npm -v이 잘 동작하는 지 확인 )

npm을 통해 패키지를 설치하면 node_modules이라는 폴더가 새로 생기는데, 이는 매번 삭제해주는 것이 좋다.

npm init을 통해 package.json의 파일이 자동으로 생성되는데, 그 파일에 dependencies(의존성 리스트)를 읽고 필요한 패키지를 자동(npm install)으로 생성한다. 

---

걸프(Gulp) : 반복적인 개발 작업을 자동화하는 빌드 도구. 그런트(Grunt)도 널리 쓰임.

1. 걸프 전역 설치 : npm install -g gulp (전역 설치는 개발에 사용할 컴퓨터에 한 번만 하면 된다.)

2. 그리고 프로젝트마다 로컬 걸프가 필요 : 프로젝트 루트에서 npm install --save-dev gulp

- 걸프는 최종사용자에게는 필요가 없지만, 개발 과정에서 도움이 되는 개발 의존성에 속합니다.

- 걸프가 없어도 앱은 잘 동작하지만, 개발할 때 걸프가 있으면 작업이 편해진다.

3. glupfie.js 만들기

4. 걸프가 성공적으로 설치됐는지 확인 $gulp

---

바벨(Babel) : ES6 코드를 ES5 코드로 변환하는 트랜스 컴파일러. 트레이서라는 것도 많이 쓰임.

- ES5를 ES6로 바꾸는 트랜스 컴파일러로 시작.

- 버전 6 이상 : ES5를 ES6으로 변환하려면

1. ES6 변환 프리셋을 먼저 설치. npm install --save--dev babel-preset-es2015

2. 프로젝트 루트에 .babelrc 파일을 만들고 아래 내용을 씁니다.

{ "preset" : ["es2015"] }  : 이 파일이 있으면 프로젝트에서 바벨을 사용할 때 ES6를 사용한다는 것을 인식한다.

3. 걸프가 이제 유용한 일을 할 수 있는 준비가 되었다! = ES6 코드를 ES5 코드로 바꾸는 일!

gulp-babel 패키지 설치하기 : npm install --save-dev gulp-babel

4. gulpfile.js를 수정한다. (걸프 3번 확인)

걸프는 파이프라인(.pipe)개념으로 작업을 처리한다.

(1) Line 9, 14 : 변환할 파일 지정, **는 '서브디렉토리를 포함해 모든 디렉토리'를 뜻하는 와일드 카드 = 서브디렉토리 깊이에 관계없이 es6 디렉토리 안에 있는 모든 .js 파일을 선택

(2) Line 10,15 : (1)의 소스파일을 바벨에 파이프로 연결. 바벨은 ES6 코드를 ES5 코드로 변형합니다.

(3) Line 11,16 : 컴파일된 코드를 다음 디렉토리에 저장.

(4) ES6 코드 작성

- 눈여겨볼 ES6 문법 : for ... of

(5) gulp 명령어로 컴파일 : 그러면 각 dist 폴더에 es5로 변환된 .js 파일이 생성된다! 와우!

* error : babel-core 모듈로 해결.

(6) ES6소스만 추적하고 ES5는 추적하지 않게 dist와 public/dist 디렉토리를 .gitignore 파일에 추가.

---

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

설치하기

사용하기

1. 프로젝트에 사용할 설정파일 만들기 (.eslintrc)

프로젝트마다 다른 표준이나 규칙에 따라 작업 할 경우 대비

프로젝트 루트에서 eslin --init 명령 실행 (질문에 따라 답을 하면 .eslintrc 파일이 생성되면서 ESLint를 사용할 수 있다.)

? ESLint 설정을 어떻게 하고 싶은지

? ECMAScript 6 기능을 사용하겠는가

? 어디에서 코드를 실행할 것인지 (Node or Brower)

? 코몬JS를 사용하겠는가 (코몬JS는 ES6 스타일 모듈의 일종)

? JSX를 사용하겠는가 (JSX는 XML 기반 자바스크립트 확장, 페이스북의 UI 라이브러리 리액트에서 사용)

? 들여쓰기방식 (탭 또는 띄어쓰기)

? 따옴표를 어떤것을 사용하는가 ( " 또는 ' )

? 줄 끝 문자에 무엇을 사용하는가 (리눅스,맥은 유닉스, 윈도우는 윈도우 선택)

? 세미콜론 필수로 하겠는가

? 설정파일형식은 무엇으로 하겠는가 (JavaScript, YAML, JSON)

2. ESLint 사용하기

방법1. Gulpfile에 ESLint추가 : 방법3을 사용하던 말던, 방법1은 꼭하자. 빌드 시, 걸프를 실행하므로 여기서 체크하는 것이 좋기 때문.

1) 설치

2) gulpfile.js 수정

3) Gulpfile의 기본 작업에 ESLint에 추가했으므로 걸프만 실행하면 된다. (지적한 부분을 볼 수 있다.)

* 위 에러는 실무 브라우저 코드에 console.log 코드를 남겨놓는 경우는 엉성한 습관이라고 잡아주고 있습니다.

* 이 외, 지적을 무시하고 싶은 내용은 .eslintrc.js 파일의 "rules"에 추가하면 됩니다.

ex) console.log를 남기고 싶다면 우측의 네임(여기서는 no-console)을 사용하여 작성합니다. 

"no-console": [ ... ], ... 의 내용이 궁금하다면 ESLint 웹사이트를 참고하자. (공부시에 콘솔과 quotes 규칙을 꺼두는게 좋다!)

방법2. 직접 사용하기 : eslint es6/testjs

방법3. 에디터 통합