Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Next Javascript

ES2015 시작하기
FE-next Group

이진권
ES6? ES2015?
• 최초엔 ES5의 다음 버전이라고 하여 ES6로 지칭
• ES6, ES7 등의 명세 작업에 TC39가 착수하면서 

ES2015 라고 부르자는 커뮤니티 합의가 있었음

https://esdisc...
Technical Commitee:
TC39
• ECMA : European Computer Manufacturers
Association
• ECMA에 는 기술 위원회 (TC39)를 발족,



문법과 의미를 표 화,...
ES2015 Syntax
• 대다수 브라우저는 아직 ES5 만 해 할 수 있음

(최신 크롬도 마찬가지)
• ES2015의 문법을 이 할 수 있는 브라우저는 

극히 일부
• 과연 지금 공부해서 쓸모가 있을까?
Next Frameworks
• 그럼에도 최신 FE 프레임워크들은 차 ES2015

(혹은 ES2015명세를 포함하는 TypeScript) 

형태로 개발 되기 시작

근래 많은 오픈소스 라이브러리도 ES2015로 개발...
So, can I use ES2015?
• 실제 서비스 사례

30여개 서비스를 대상으로 한 어느 모듈

Babel 변환을 기반으로 한 ES2015 로 100% 전환
• 필드에 8개월간 수많은 피드 을 받아본 과,

P...
Babel
• ES2015의 Syntax 에 대한 많은 화
• 거의 모든 브라우저에 100% 지원이 되지 않음
• 하지만, 문법은 언젠가 표 화 될 것이고, 지금 당장 사용
하려면 변환(transform to ES5) ...
Preset ES2015
• babel 만으로는 변환이 되지 않음
• preset 이라는 추가 node 모듈(패키지)을 설치하여 

babel 변환에 사용
• preset 은 여러가지가 재

stage-0,1,2, pr...
일단 실행 & 실습 해보기
• babel에 제공하는 실시간 Transformer

http://babeljs.io/repl/
• 좌측 코드는,

브라우저에 

바로 실행 안됨
• 변환된 우측 코드는,

브라우저에 

바...
커맨드 실행
저 babel 도구 설치

(node.js 선행 설치 필요)
npm install -g babel-cli (babel cli 설치)
npm install babel babel-preset-es2015
그리고...
RUN building
그리고, 고도화
• 입맛대로 골라쓰기

(빨간색은 작성자 선호 도구)
• gulp, grunt - task runner
• webpack, browserify - module bundler
imports?
• js 안에 추가로 파일 import를 할 땐 

module bundler가 필요. (webpack, browserify)


다양한 툴이 있기 때문에 기호에 맞춰서 사용됨
레퍼런스 모음
• 호환성 테이블

http://kangax.github.io/compat-table/es6/
• ES6 Features

http://es6-features.org/
• ES6 Features githu...
산출물 코드 저장
• https://github.com/FE-next/es2015/
Appendix1. 

Webstorm with ES2015
• Webstorm 이용시 에디터창에 

es2015인식을 못할땐,



설정에 Languages & Frameworks >
Javascript 의 Javas...
Appendix2.

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

Live Coding
• webpack 을 써서 프로젝트를 만들다보면 transform 과
정에 시간이 많이 소요됨

(어느 프로젝트는 10초 내외)
• 매 코드를 갱신하려면 10초씩 기다려야 하지...
감사합니다.
Upcoming SlideShare
Loading in …5
×

Next Javascript ES2015 시작하기

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

  • Be the first to comment

Next Javascript ES2015 시작하기

  1. 1. Next Javascript
 ES2015 시작하기 FE-next Group
 이진권
  2. 2. ES6? ES2015? • 최초엔 ES5의 다음 버전이라고 하여 ES6로 지칭 • ES6, ES7 등의 명세 작업에 TC39가 착수하면서 
 ES2015 라고 부르자는 커뮤니티 합의가 있었음
 https://esdiscuss.org/topic/javascript-2015 • 둘다 명칭은 맞지만 ES2015로 부르는 추세
  3. 3. Technical Commitee: TC39 • ECMA : European Computer Manufacturers Association • ECMA에 는 기술 위원회 (TC39)를 발족,
 
 문법과 의미를 표 화,
 일반적인 목 에 쓸 수 있고, 
 플랫폼을 가리지 않으며,
 제조사에 중립적인 스크립트 어를 만들기로 함
  4. 4. ES2015 Syntax • 대다수 브라우저는 아직 ES5 만 해 할 수 있음
 (최신 크롬도 마찬가지) • ES2015의 문법을 이 할 수 있는 브라우저는 
 극히 일부 • 과연 지금 공부해서 쓸모가 있을까?
  5. 5. Next Frameworks • 그럼에도 최신 FE 프레임워크들은 차 ES2015
 (혹은 ES2015명세를 포함하는 TypeScript) 
 형태로 개발 되기 시작
 근래 많은 오픈소스 라이브러리도 ES2015로 개발 • 트렌드나 택이 아니라 필수로 자리 매김 하는 분위기
 (ECMAScript Standard) • React.js • Angular 2 • 기타 등등 (video.js)
  6. 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. 7. Babel • ES2015의 Syntax 에 대한 많은 화 • 거의 모든 브라우저에 100% 지원이 되지 않음 • 하지만, 문법은 언젠가 표 화 될 것이고, 지금 당장 사용 하려면 변환(transform to ES5) 프로세스가 필요함 • 그 변환을 도와주는 
 node.js 기반의 Front-End 도구. Babel.js • 기존의 여러 도구들과 통합해서 사용 가능
 (gulp, grunt, webpack 등등)
  8. 8. Preset ES2015 • babel 만으로는 변환이 되지 않음 • preset 이라는 추가 node 모듈(패키지)을 설치하여 
 babel 변환에 사용 • preset 은 여러가지가 재
 stage-0,1,2, preset2015, react • 여러 플러그인을 포함하는 일종의 패키지
  9. 9. 일단 실행 & 실습 해보기 • babel에 제공하는 실시간 Transformer
 http://babeljs.io/repl/ • 좌측 코드는,
 브라우저에 
 바로 실행 안됨 • 변환된 우측 코드는,
 브라우저에 
 바로 실행 가능
  10. 10. 커맨드 실행 저 babel 도구 설치
 (node.js 선행 설치 필요) npm install -g babel-cli (babel cli 설치) npm install babel babel-preset-es2015 그리고 babel 실행
  11. 11. RUN building
  12. 12. 그리고, 고도화 • 입맛대로 골라쓰기
 (빨간색은 작성자 선호 도구) • gulp, grunt - task runner • webpack, browserify - module bundler
  13. 13. imports? • js 안에 추가로 파일 import를 할 땐 
 module bundler가 필요. (webpack, browserify) 
 다양한 툴이 있기 때문에 기호에 맞춰서 사용됨
  14. 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. 15. 산출물 코드 저장 • https://github.com/FE-next/es2015/
  16. 16. Appendix1. 
 Webstorm with ES2015 • Webstorm 이용시 에디터창에 
 es2015인식을 못할땐,
 
 설정에 Languages & Frameworks > Javascript 의 Javascript language version 을 ECMAScript 6로 변경
  17. 17. Appendix2.
 Sourcemap으로 디버깅을 편하게 • webpack 사용시 설정파일에 devtool: ‘sourcemap’을 하면 소스맵을 만들수 있음 • gulp 사용시 gulp-sourcemaps 이용 가능
  18. 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. 19. 감사합니다.

×