#001 개발환경 설정

이번 블로깅 목표

- 가장 최근에 나온 책인 Leaning Javascript를 기반으로 학습 로깅을 할 예정. 

- 실제 원문은 2015년도에 나온건 함정.

- 자바스크립트에 대해서 알았지만 체계적으로 배우고 최신 ES6 버전으로 실력 점프업 하고 싶음.

npm 초기화

$ npm init

- 만약 node가 설치 되지 않은 경우, 먼저 node js를 설치 한 후 npm init을 실행해야함.

빌드 도구 설치 : gulp

$ npm install gulp -g

- 자바스크립트는 기본적으로 인터프리터 언어지만, ES6를 ES5로 트랜스컴파일하기 위해서 빌드 도구를 설치한다.

- 왜 최신 버전인 ES6를 ES5로 트랜스컴파일하냐면, 고객이 ES6를 지원하지 못하는 브라우저를 사용하고 있을 수 있으니 안정적인 ES5로 변환해주는 것.

- 좀 더 최신 빌드 툴로 webpack이 있지만 일단 gulp로 기본기를 다져보자.

빌드 기본 파일 생성 : gulpfile.js

const gulp = require('gulp')

gulp.task("default", function(){

console.log("default task");

});

- 프로젝트 Root경로에서 gulp의 기본 수행 파일인 gulpfile.js를 만든다.

- gulp는 task단위로 수행되는데 "default" task를 만들어보자

- 프로젝트 Root경로에서 gulp를 수행해보자

트랜스컴파일러 : babel

- Babel은 ES6코드를 ES5코드로 변환하는 트랜스컴파일러

- 브라우저가 ES6를 지원하지 못할 수 있으므로 트랜스컴파일러는 현재로서는 필수적으로 필요하다.

- 사실 Babel도 최신 ES6기능을 모두 지원하는 것은 아니다. (지원률 대략 72%정도)

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

- 프로젝트가 성장하며 ES6, React, ES7등 여러가지를 지원

- ES5를 ES6로 변환하려면 babel-preset 필요. 

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

프로젝트 Root에 .babelrc 파일 생성

- 이 파일이 있을 경우, 해당 프로젝트는 ES6를 사용한다는 것으로 인식.

- 아래 내용으로 .babelrc 파일 생성

{ "presets" : [ "es2015"] }

gulp를 이용한 트랜스컴파일 설정

- babel을 이용해 gulp에서 트랜스컴파일을 할 수 있도록 gulp-babel 설치

$ npm install gulp-babel --save-dev

- 추가로 babel-core를 설치해줘야함.

$ npm install babel-core

실제 gulpfile.js 수정하여 트랜스컴파일 수행

- 이전에 만들어두었던 gulpfile.js를 수정한다.

gulp.task("default",function(){

  gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));

  gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));

});

- 위와 같이 gulpfile.js를 수정했다면 트랜스컴파일 설정이 모두 완료된 것이다.

- 간단히 설명하자면 첫번째 gulp.src는 es6폴더 하위에 있는 모든 js파일을 babel을 이용해 트랜스 컴파일하여 dist폴더에 결과를 출력한다는 것을 의미한다.

- 아래도 마찬가지로 src, dest 경로만 달라졌을뿐 내용은 같다.