Next Javascript ES2015 시작하기

Next Javascript ES2015 시작하기

Next Javascript ES2015 시작하기 from JinKwon Lee

 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. 감사합니다.