Next Javascript ES2015 시작을 위한 자료입니다.

1. Next Javascript
ES2015 시작하기
FE-next Group
이진권

2. ES6? ES2015?
• 최초엔 ES5의 다음 버전이라고 하여 ES6로 지칭
• ES6, ES7 등의 명세 작업에 TC39가 착수하면서
ES2015 라고 부르자는 커뮤니티 합의가 있었음
https://esdiscuss.org/topic/javascript-2015
• 둘다 명칭은 맞지만 ES2015로 부르는 추세

3. Technical Commitee:
TC39
• ECMA : European Computer Manufacturers
Association
• ECMA에 는 기술 위원회 (TC39)를 발족,
문법과 의미를 표 화,
일반적인 목 에 쓸 수 있고,
플랫폼을 가리지 않으며,
제조사에 중립적인 스크립트 어를 만들기로 함

4. ES2015 Syntax
• 대다수 브라우저는 아직 ES5 만 해 할 수 있음
(최신 크롬도 마찬가지)
• ES2015의 문법을 이 할 수 있는 브라우저는
극히 일부
• 과연 지금 공부해서 쓸모가 있을까?

5. Next Frameworks
• 그럼에도 최신 FE 프레임워크들은 차 ES2015
(혹은 ES2015명세를 포함하는 TypeScript)
형태로 개발 되기 시작
근래 많은 오픈소스 라이브러리도 ES2015로 개발
• 트렌드나 택이 아니라 필수로 자리 매김 하는 분위기
(ECMAScript Standard)
• React.js
• Angular 2
• 기타 등등 (video.js)

6. So, can I use ES2015?
• 실제 서비스 사례
30여개 서비스를 대상으로 한 어느 모듈
Babel 변환을 기반으로 한 ES2015 로 100% 전환
• 필드에 8개월간 수많은 피드 을 받아본 과,
Polyfill을 이용했을 때 기본적인 문법들은 정상적으로 동작
(심지어 IE7-8, Android 2 OK)
• BUT, 기능에 따라 동작 여부 확인 필요
(Promise, WeakMap 등)
• Babel 6 을 사용하려면 좀 더 신중할 필요
(IE8에 syntax 오류가 발생하는 default 키워드 변환 > 이 참
고 > https://phabricator.babeljs.io/T2817)

7. Babel
• ES2015의 Syntax 에 대한 많은 화
• 거의 모든 브라우저에 100% 지원이 되지 않음
• 하지만, 문법은 언젠가 표 화 될 것이고, 지금 당장 사용
하려면 변환(transform to ES5) 프로세스가 필요함
• 그 변환을 도와주는
node.js 기반의 Front-End 도구. Babel.js
• 기존의 여러 도구들과 통합해서 사용 가능
(gulp, grunt, webpack 등등)

8. Preset ES2015
• babel 만으로는 변환이 되지 않음
• preset 이라는 추가 node 모듈(패키지)을 설치하여
babel 변환에 사용
• preset 은 여러가지가 재
stage-0,1,2, preset2015, react
• 여러 플러그인을 포함하는 일종의 패키지

9. 일단 실행 & 실습 해보기
• babel에 제공하는 실시간 Transformer
http://babeljs.io/repl/
• 좌측 코드는,
브라우저에
바로 실행 안됨
• 변환된 우측 코드는,
브라우저에
바로 실행 가능

10. 커맨드 실행
저 babel 도구 설치
(node.js 선행 설치 필요)
npm install -g babel-cli (babel cli 설치)
npm install babel babel-preset-es2015
그리고 babel 실행

11. RUN building

12. 그리고, 고도화
• 입맛대로 골라쓰기
(빨간색은 작성자 선호 도구)
• gulp, grunt - task runner
• webpack, browserify - module bundler

13. imports?
• js 안에 추가로 파일 import를 할 땐
module bundler가 필요. (webpack, browserify)
다양한 툴이 있기 때문에 기호에 맞춰서 사용됨

14. 레퍼런스 모음
• 호환성 테이블
http://kangax.github.io/compat-table/es6/
• ES6 Features
http://es6-features.org/
• ES6 Features github
https://github.com/lukehoban/es6features
• Babel - learn ES2015
https://babeljs.io/docs/learn-es2015/

15. 산출물 코드 저장
• https://github.com/FE-next/es2015/

16. Appendix1.
Webstorm with ES2015
• Webstorm 이용시 에디터창에
es2015인식을 못할땐,
설정에 Languages & Frameworks >
Javascript 의 Javascript language version 을
ECMAScript 6로 변경

17. Appendix2.
Sourcemap으로 디버깅을 편하게
• webpack 사용시 설정파일에 devtool:
‘sourcemap’을 하면 소스맵을 만들수 있음
• gulp 사용시 gulp-sourcemaps 이용 가능

18. Appendix3.
Live Coding
• webpack 을 써서 프로젝트를 만들다보면 transform 과
정에 시간이 많이 소요됨
(어느 프로젝트는 10초 내외)
• 매 코드를 갱신하려면 10초씩 기다려야 하지만,
webpack-dev-server를 이용하면 빠르게 변환이 가능함
http://webpack.github.io/docs/webpack-dev-server.html
• 작성해서 사용하고 있는 샘플 코드
https://github.com/FE-next/es2015/blob/master/jinkwon/spinbox/
webpack.dev-server.config.js

19. 감사합니다.