Upload
-
View
12.802
Download
3
Embed Size (px)
Citation preview
FE����������� ������������������ 개발의����������� ������������������ 괜찮은����������� ������������������ 선택����������� ������������������
ES6����������� ������������������ &����������� ������������������ React����������� ������������������
SKPlanet.윤지수����������� ������������������ 2015.12.15
1. 지금까지����������� ������������������ FE����������� ������������������ 개발의����������� ������������������ 어려움����������� ������������������
2. 개선된����������� ������������������ 이후의����������� ������������������ 아름다운����������� ������������������ 모습����������� ������������������
3. ES6와����������� ������������������ React����������� ������������������ 의미
ES6와 React,이 둘은 무슨 관계인가 ?
ES6와 React,이 둘은 무슨 관계인가 ?
=> ES6 기반으로 React 코드를 작성할 수 있음
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 1.����������� ������������������ 지금까지����������� ������������������ FE개발의����������� ������������������ 어려움
너무 많은 FE관련 도구
Joose����������� ������������������ jsPHP����������� ������������������
Microsoft's����������� ������������������ Ajax����������� ������������������ library����������� ������������������ MochiKit����������� ������������������ PDF.js����������� ������������������ Rico����������� ������������������
Socket.IO����������� ������������������ Spry����������� ������������������ framework����������� ������������������ Underscore.js����������� ������������������
Cascade����������� ������������������ Framework����������� ������������������ Handlebars����������� ������������������
jQuery����������� ������������������ Mobile����������� ������������������ Mustache����������� ������������������
Unit����������� ������������������ testing[edit]����������� ������������������ Jasmine����������� ������������������ Mocha����������� ������������������ QUnit����������� ������������������ Unit.js����������� ������������������
AngularJS����������� ������������������ Backbone.js����������� ������������������ Cappuccino����������� ������������������ Chaplin.js����������� ������������������
Echo����������� ������������������ Ember.js����������� ������������������ Enyo����������� ������������������ Ext����������� ������������������ JS����������� ������������������
Google����������� ������������������ Web����������� ������������������ Toolkit����������� ������������������ JavaScriptMVC����������� ������������������
올바르게 선택할����������� ������������������ 수����������� ������������������ 있을까?
class Snake extends Animal { constructor(name: string) { super(name); } move(meters = 5) { alert("Slithering..."); super.move(meters); } }
var sam = new Snake("Sammy the Python"); sam.move();
code : http://www.typescriptlang.org/Handbook#classes
구조적인 언어를 품은 FE개발
(CoffeScript,����������� ������������������ TypeScript,����������� ������������������ Dart)
javascript����������� ������������������ 말고도����������� ������������������ 새로운����������� ������������������ 걸����������� ������������������ 이해해야����������� ������������������ 하는����������� ������������������ 불편함.
구조적인 언어를 품은 FE개발
(CoffeScript,����������� ������������������ TypeScript,����������� ������������������ Dart)
거대한 Framework의 등장 !
“GWT, AngularJS, BackboneJS, EmberJS.. ”
거대한 Framework도 당연히 없어질 수 있음.구글도 마찬가지.
거대한 Framework의 브라우저 호환성은 우리를 고려해주나?
거대한 Framework는 끼리끼리
결합을 하기도 함
결합은 끊기 어려움
Angular2.0����������� ������������������ &����������� ������������������ TypeScript.����������� ������������������
Ionic����������� ������������������ with����������� ������������������ Angular.����������� ������������������
React����������� ������������������ in����������� ������������������ WebCompoent.����������� ������������������
SPA는 왜 등장했을까?
SPA는 왜 등장했을까?
SPARefresh Ajax
SPA는 왜 등장했을까?
맞아! 더 나은 UX를 위해.
SPARefresh Ajax
SPA개발을����������� ������������������ 지원하는����������� ������������������ framework를����������� ������������������ 사용.����������� ������������������
점점����������� ������������������ 복잡하고����������� ������������������ 무거운����������� ������������������ 코드.����������� ������������������
느린����������� ������������������ 웹����������� ������������������ 사이트.����������� ������������������
다시..����������� ������������������ ����������� ������������������ 각종����������� ������������������ 최적화작업,����������� ������������������
구조변경,����������� ������������������ ����������� ������������������ 라이브러리����������� ������������������ 변경(제거)...
그런데, 거대한 framework가 SPA에 무슨 짓을 한거지?
HTML5세상을 맞아,앱과 같은 웹이 되기 위해 라이브러리 홍수현상.
service����������� ������������������ worker,����������� ������������������ ����������� ������������������ web����������� ������������������ socket,����������� ������������������ storage,����������� ������������������ webgl,����������� ������������������
html5����������� ������������������ libraries����������� ������������������ …⋯����������� ������������������
잘못된 학습 방법.트렌디한 프레임웍 사용법 학습에 집중하는 잘못
“����������� ������������������ jQuery����������� ������������������ +����������� ������������������ SASS����������� ������������������ +����������� ������������������ HTML5로����������� ������������������ 모던����������� ������������������ 웹����������� ������������������ 개발배우기”����������� ������������������
“AngularJS����������� ������������������ 로����������� ������������������ 웹앱����������� ������������������ 만들기”����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 2.����������� ������������������ 개선된����������� ������������������ 이후의����������� ������������������ 아름다운����������� ������������������ 모습
“If����������� ������������������ you����������� ������������������ can’t����������� ������������������ do����������� ������������������ without����������� ������������������ tools����������� ������������������ ����������� ������������������ you’re����������� ������������������ not����������� ������������������ a����������� ������������������ web����������� ������������������ developer.”����������� ������������������
Peter Paul Koch
가볍고, 단순하게 !웹개발은 결국 사용자를 위함
transpiler나 compiler보다는,JavaScript 언어 그대로를 사용함으로써,
지속성있는 코드를 유지.
제거하기 쉬운 라이브러리 사용.
jQuery를 사용하기 보다는 작은 조각같은 utility나 polyfill을 선택.
덜 의존하는 라이브러리 사용
의식의����������� ������������������ 전환.����������� ������������������ “언젠가����������� ������������������ 특정����������� ������������������ Framework로����������� ������������������ 통일되겠지?”����������� ������������������
꿈 깨 자,
FrontEnd����������� ������������������ 개발은����������� ������������������ 실행����������� ������������������ 환경이����������� ������������������ 다양해지고����������� ������������������ 있고����������� ������������������
서비스����������� ������������������ 개발도����������� ������������������ 다양하게����������� ������������������ 진화중이라����������� ������������������
단일����������� ������������������ Framework로����������� ������������������ 통일되기는����������� ������������������ 어려움.
HTML,CSS,JavaScript로 구성한 순수한 코드
image : http://edesign.tistory.com/7
vanillaJS
����������� ������������������ 3.����������� ������������������ 괜찮은����������� ������������������ 선택����������� ������������������ ES6
ES6����������� ������������������ (EcmaScript����������� ������������������ 2015) ?
알고보면 새로운 기능과 문법일뿐.
arrowsclassesenhanced object literalstemplate stringsdestructuringdefault + rest + spreadlet + constiterators + for..ofgeneratorsunicodemodulesmodule loadersmap + set + weakmap + weaksetproxiessymbolssubclassable built-inspromisesmath + number + string + array + object APIsbinary and octal literalsreflect apitail calls
각종 framework에서나 가능한 것들이 이젠 표준이다
var����������� ������������������ pairs����������� ������������������ =����������� ������������������ evens.map(v����������� ������������������ =>����������� ������������������ ({even:����������� ������������������ v,����������� ������������������ odd:����������� ������������������ v����������� ������������������ +����������� ������������������ 1}));
arrows
let����������� ������������������ num����������� ������������������ =����������� ������������������ 11;����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (true)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ let����������� ������������������ num����������� ������������������ =����������� ������������������ 22;����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ console.log(num);����������� ������������������ ����������� ������������������ //����������� ������������������ 22����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ console.log(num);����������� ������������������ ����������� ������������������ //����������� ������������������ 11
let
class����������� ������������������ SkinnedMesh����������� ������������������ extends����������� ������������������ THREE.Mesh����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ constructor(geometry,����������� ������������������ materials)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ super(geometry,����������� ������������������ materials);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.idMatrix����������� ������������������ =����������� ������������������ SkinnedMesh.defaultMatrix();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.bones����������� ������������������ =����������� ������������������ [];����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.boneMatrices����������� ������������������ =����������� ������������������ [];����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //...����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ get����������� ������������������ boneCount()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ this.bones.length;����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ }
classes
// lib/math.jsexport function sum(x, y) { return x + y;}export var pi = 3.141593;
// app.jsimport * as math from "lib/math";alert("2π = " + math.sum(math.pi, math.pi));
modules
//����������� ������������������ Dynamic����������� ������������������ loading����������� ������������������ –����������� ������������������ ‘System’����������� ������������������ is����������� ������������������ default����������� ������������������ loader����������� ������������������ System.import('lib/math').then(function(m)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ alert("2π����������� ������������������ =����������� ������������������ "����������� ������������������ +����������� ������������������ m.sum(m.pi,����������� ������������������ m.pi));����������� ������������������ });
modules loader
function����������� ������������������ timeout(duration����������� ������������������ =����������� ������������������ 0)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ new����������� ������������������ Promise((resolve,����������� ������������������ reject)����������� ������������������ =>����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ setTimeout(resolve,����������� ������������������ duration);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ })����������� ������������������ }����������� ������������������
var����������� ������������������ p����������� ������������������ =����������� ������������������ timeout(1000).then(()����������� ������������������ =>����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ timeout(2000);����������� ������������������ }).then(()����������� ������������������ =>����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ throw����������� ������������������ new����������� ������������������ Error("hmm");����������� ������������������ }).catch(err����������� ������������������ =>����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ Promise.all([timeout(100),����������� ������������������ timeout(200)]);����������� ������������������ })
Promises
function*����������� ������������������ anotherGenerator(i)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ yield����������� ������������������ i����������� ������������������ +����������� ������������������ 1;����������� ������������������ ����������� ������������������ ����������� ������������������ yield����������� ������������������ i����������� ������������������ +����������� ������������������ 2;����������� ������������������ ����������� ������������������ ����������� ������������������ yield����������� ������������������ i����������� ������������������ +����������� ������������������ 3;����������� ������������������ }����������� ������������������
function*����������� ������������������ generator(i){����������� ������������������ ����������� ������������������ ����������� ������������������ yield����������� ������������������ i;����������� ������������������ ����������� ������������������ ����������� ������������������ yield*����������� ������������������ anotherGenerator(i);����������� ������������������ ����������� ������������������ ����������� ������������������ yield����������� ������������������ i����������� ������������������ +����������� ������������������ 10;����������� ������������������ }����������� ������������������
var����������� ������������������ gen����������� ������������������ =����������� ������������������ generator(10);����������� ������������������
console.log(gen.next().value);����������� ������������������ //����������� ������������������ 10����������� ������������������ console.log(gen.next().value);����������� ������������������ //����������� ������������������ 11
yield & generator
arrows
let
classes
modules
modules����������� ������������������ loader
Promises
yield����������� ������������������ &����������� ������������������ generator
scope����������� ������������������ 가����������� ������������������ 헷갈리긴����������� ������������������ 했지,����������� ������������������ 하지만����������� ������������������ 적응했는걸.
웬����������� ������������������ 화살표냐!
function����������� ������������������ constructor����������� ������������������ &����������� ������������������ prototype.����������� ������������������ 아니면����������� ������������������ typescript����������� ������������������ 정도.
requireJS����������� ������������������ &����������� ������������������ browserify(webpack)
브라우저����������� ������������������ 위에서는����������� ������������������ 견딜����������� ������������������ 만한����������� ������������������ 중첩콜백.����������� ������������������ promise����������� ������������������ 라이브러리도����������� ������������������ 있긴하고.
system.js
오����������� ������������������ ?!
하나씩 판단해보자. 없던것이냐? 반드시 필요한 거냐?
하나씩����������� ������������������ 판단해보자.����������� ������������������ ����������� ������������������ 없던것이냐?����������� ������������������ 반드시����������� ������������������ 필요한����������� ������������������ 거냐?
ES6
웹의 혁신은 아니다.하지만 멋진 기능을 표준으로 담고 있다.ES6기반 코드는 지속가능한 코드이다.
ES6����������� ������������������ 도입����������� ������������������ 전략을����������� ������������������ 짜보면,����������� ������������������ ����������� ������������������
ES6도����������� ������������������ 필수가����������� ������������������ 아닌����������� ������������������ 선택이다.����������� ������������������
개선된����������� ������������������ JavaScript����������� ������������������ syntax와����������� ������������������ 기능들을����������� ������������������ 원한다면,����������� ������������������
다른����������� ������������������ framework보다는����������� ������������������ ES6(with����������� ������������������ babel����������� ������������������ or����������� ������������������ traceur)를����������� ������������������ 선택하자.����������� ������������������ 가볍게����������� ������������������ ES6를����������� ������������������ 지원하는����������� ������������������ 부분적인����������� ������������������ 라이브러리를����������� ������������������ 사용할����������� ������������������ 수도����������� ������������������ 있다.
4.����������� ������������������ 괜찮은����������� ������������������ 선택����������� ������������������ ReactJS
‘����������� ������������������ logic과����������� ������������������ view의����������� ������������������ ����������� ������������������ 결합,����������� ������������������ ����������� ������������������ ����������� ������������������ inline����������� ������������������ JavaScript’����������� ������������������ ?����������� ������������������
약간����������� ������������������ 낯설다...
����������� ������������������ ����������� ������������������ render:����������� ������������������ function()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ (����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="plus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ +</div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������ <span>{this.state.htOrder.nCount}����������� ������������������ </span></div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="minus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ -</div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ </div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ )����������� ������������������
����������� ������������������ ����������� ������������������ }
첫인상
상대적으로 거대하지 않은view 집중 framework
jQuery����������� ������������������ 또는����������� ������������������ MV*����������� ������������������ Framework의����������� ������������������ 경쟁상대로����������� ������������������ 보기����������� ������������������ 어려움.����������� ������������������
오히려����������� ������������������ WebComponent����������� ������������������ 와����������� ������������������ 유사.
web component
shadow DOM
HTML Template
HTML document
장점.����������� ������������������
모듈화와����������� ������������������ view����������� ������������������ 재사용성.����������� ������������������
고민거리.����������� ������������������
shadow����������� ������������������ DOM의����������� ������������������ polyfill의����������� ������������������ 어려움����������� ������������������ 다른����������� ������������������ 스펙과의����������� ������������������ 충돌(es6-module����������� ������������������ loader)����������� ������������������ react����������� ������������������ 와의����������� ������������������ 중복����������� ������������������ 및����������� ������������������ 결합에����������� ������������������ 대한����������� ������������������ 고민
<custom DOM element >
WEB����������� ������������������ Component는����������� ������������������ 아직����������� ������������������ 쓸만한����������� ������������������ 단계가����������� ������������������ 아님.
재사용이라는 큰 장점.
WebComponent 와 React는 view 에 집중하며,component 단위의 재사용성을 높일 수 있음.
재사용성����������� ������������������ -����������� ������������������ 같은����������� ������������������ 서비스����������� ������������������ 내에서의����������� ������������������ UI덩어리����������� ������������������ 재사용성.
UI 재사용
extends
ProfileMain ThemeMain
CommonMain
상속을����������� ������������������ 통한����������� ������������������ 재사용.����������� ������������������ extends,����������� ������������������ mixin����������� ������������������ 지원
코드수준의 재사용
FE개발����������� ������������������ 입장에서����������� ������������������ 가장����������� ������������������ 중요하고����������� ������������������ 난해한,����������� ������������������
Template,����������� ������������������ DOM����������� ������������������ 조작을����������� ������������������ 개선하는데����������� ������������������ 집중.����������� ������������������
개발자는����������� ������������������ ����������� ������������������
로직과����������� ������������������ 구현패턴에����������� ������������������ 더많은����������� ������������������ 관심을����������� ������������������ 가질����������� ������������������ 수����������� ������������������ 있게����������� ������������������ 됐음
FE개발 관점을 변화시켰음
http://www.slideshare.net/stfalconcom/react-45228077
변경되는����������� ������������������ node만����������� ������������������ 빨리����������� ������������������ 찾아����������� ������������������ 수정.����������� ������������������
Event����������� ������������������ delegation방식지원으로����������� ������������������ 효율적인����������� ������������������ Event처리.����������� ������������������
virtual����������� ������������������ DOM을����������� ������������������ 통한����������� ������������������ 효율적인����������� ������������������ DOM����������� ������������������ 렌더링
다양하게 구현한 코드와 잘 결합
function����������� ������������������ -����������� ������������������ prototype����������� ������������������ ����������� ������������������ 기반의����������� ������������������ 모듈
object����������� ������������������ literal����������� ������������������ ����������� ������������������ 기반의����������� ������������������ 모듈
����������� ������������������ ES6����������� ������������������ syntax����������� ������������������ ����������� ������������������ ����������� ������������������ 기반의����������� ������������������ 모듈
react����������� ������������������ view����������� ������������������
OOO����������� ������������������ 모듈
자기들이 직접 사용하면서 개선한다.
SPA의 단점인 loading 속도에 대한 해결책이 존재.Server Side rendering
app.get("/order",����������� ������������������ function(req,����������� ������������������ res)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ jspm.import('app/js/pages/orderServer')����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ .then(function(sRenderedHTML)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ _htData����������� ������������������ =����������� ������������������ {'mycontent'����������� ������������������ :����������� ������������������ sRenderedHTML.default}����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ sResultHTML����������� ������������������ =����������� ������������������ _ld.template(sTemplateOrderHTML)(_htData);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ res.end(sResultHTML);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������ function(err)����������� ������������������ {console.log("SeverRendering����������� ������������������ Error����������� ������������������ :",����������� ������������������ err)}����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ );����������� ������������������
});����������� ������������������
학습����������� ������������������ 비용은����������� ������������������ 다를바����������� ������������������ 없다.����������� ������������������
정작����������� ������������������ 쓸려면����������� ������������������ 주변을����������� ������������������ 설득하고����������� ������������������ 결과에����������� ������������������ 대한����������� ������������������ 책임을����������� ������������������ 질����������� ������������������ 수도����������� ������������������ 있음.����������� ������������������
HTML����������� ������������������ 코드와����������� ������������������ 통합하는����������� ������������������ 일이����������� ������������������ 생김.����������� ������������������
로딩할게����������� ������������������ 많아����������� ������������������ 처음����������� ������������������ 속도가����������� ������������������ 느리다.����������� ������������������
react도����������� ������������������ 어쨋든����������� ������������������ 오픈소스다.����������� ������������������ 내가����������� ������������������ 쥐락펴락하기����������� ������������������ 어렵다.
단점? 당연히 많다.
ReactJS 도입 전략을 짜보면,
ReactJS가����������� ������������������ 생산성을����������� ������������������ 반드시����������� ������������������ 높여주진����������� ������������������ 않는다.����������� ������������������
DOM과����������� ������������������ view����������� ������������������ 작업이����������� ������������������ 많다면����������� ������������������ 도입을����������� ������������������ 고려.����������� ������������������
모바일웹이라면����������� ������������������ PC보단����������� ������������������ 적극적으로����������� ������������������ 도입을����������� ������������������ 고려.����������� ������������������
혹시라도����������� ������������������ angular����������� ������������������ 와����������� ������������������ 같은����������� ������������������ 다른����������� ������������������ framework와의����������� ������������������ 통합은����������� ������������������ 자제.����������� ������������������
최대한����������� ������������������ 가볍게����������� ������������������ 사용.����������� ������������������ Flux,Redux등이����������� ������������������ 필수는����������� ������������������ 아님.����������� ������������������
JSPM,����������� ������������������ Webpack,����������� ������������������ gulp등의����������� ������������������ 도움을����������� ������������������ 받아����������� ������������������ 개발.����������� ������������������
ES6����������� ������������������ 와의����������� ������������������ 궁합은����������� ������������������ 괜찮음.
부록.����������� ������������������ ES6����������� ������������������ &����������� ������������������ React를����������� ������������������ 더����������� ������������������ 잘����������� ������������������ 쓰기����������� ������������������
오픈소스 프로젝트를 위한 ES6 와 React 기반 Workflow.
ES6����������� ������������������ &����������� ������������������ React����������� ������������������ 기반개발에����������� ������������������ 필요한����������� ������������������ 일들����������� ������������������
각종����������� ������������������ 모듈을����������� ������������������ 불러오고,����������� ������������������ ES6를����������� ������������������ ES5로����������� ������������������ 변환하고,����������� ������������������
jsx����������� ������������������ compile����������� ������������������ 하고,����������� ������������������ 배포를����������� ������������������ 위해����������� ������������������ bundle����������� ������������������ 로����������� ������������������ 최적화하기.
오픈소스 프로젝트를 위한 ES6 와 React 기반 Workflow.
ES6����������� ������������������ &����������� ������������������ React����������� ������������������ 기반개발에����������� ������������������ 필요한����������� ������������������ 일들����������� ������������������
각종����������� ������������������ 모듈을����������� ������������������ 불러오고,����������� ������������������ ES6를����������� ������������������ ES5로����������� ������������������ 변환하고,����������� ������������������
jsx����������� ������������������ compile����������� ������������������ 하고,����������� ������������������ 배포를����������� ������������������ 위해����������� ������������������ bundle����������� ������������������ 로����������� ������������������ 최적화하기.
JSPM, WebPack
babel����������� ������������������ swipe.js����������� ������������������ -o����������� ������������������ dist/swipe.js����������� ������������������
npm����������� ������������������ init����������� ������������������
npm����������� ������������������ publish����������� ������������������
sudo����������� ������������������ npm����������� ������������������ install����������� ������������������ jspm����������� ������������������ --save-dev����������� ������������������
jspm����������� ������������������ init����������� ������������������
jspm����������� ������������������ install����������� ������������������ npm:swipe����������� ������������������
vi����������� ������������������ js/main.js����������� ������������������ //swipe.js를����������� ������������������ 활용한����������� ������������������ 개발.����������� ������������������
jspm����������� ������������������ bundle-sfx����������� ������������������ js/main.js����������� ������������������ js/build.js����������� ������������������
live-server����������� ������������������
jspm����������� ������������������ install����������� ������������������ react����������� ������������������ react-dom����������� ������������������
vi����������� ������������������ js/main.js����������� ������������������ ����������� ������������������ //����������� ������������������ react����������� ������������������ 기반����������� ������������������ 개발..����������� ������������������
jspm����������� ������������������ bundle-sfx����������� ������������������ js/main.js����������� ������������������ js/build.js����������� ������������������
…⋯…⋯
workflow����������� ������������������ ����������� ������������������ example
FE에서 data 를 다룰 일이 많다면,React 에 Flux 도입을 고려하자.
Flux,����������� ������������������ Reflux,����������� ������������������ Redux,����������� ������������������ Fluxxor…⋯
/***����������� ������������������ Action����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderActions����������� ������������������ =����������� ������������������ Reflux.createActions([����������� ������������������ ����������� ������������������ ����������� ������������������ 'setOrder',����������� ������������������ ����������� ������������������ ����������� ������������������ 'increaseOrderCount',����������� ������������������ ]);����������� ������������������
/***����������� ������������������ Store����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderStore����������� ������������������ =����������� ������������������ Reflux.createStore({����������� ������������������ ����������� ������������������ ����������� ������������������ listenables:����������� ������������������ [OrderActions],����������� ������������������
����������� ������������������ ����������� ������������������ _htStore����������� ������������������ :����������� ������������������ {nCount����������� ������������������ :����������� ������������������ 0},����������� ������������������
����������� ������������������ ����������� ������������������ onSetOrder����������� ������������������ :����������� ������������������ function(htOrder)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._htStore.nCount����������� ������������������ =����������� ������������������ htOrder.nCount;����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ onIncreaseOrderCount:����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._htStore.nCount++;����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._updateView();����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ _updateView����������� ������������������ :����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.trigger(this._htStore);����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ });����������� ������������������
Flux����������� ������������������ 컨셉����������� ������������������ :����������� ������������������ 한����������� ������������������ 방향으로����������� ������������������ 흘러����������� ������������������ 직관적.
/***����������� ������������������ View����������� ������������������ Component����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderView����������� ������������������ =����������� ������������������ React.createClass({����������� ������������������
����������� ������������������ ����������� ������������������ mixins:����������� ������������������ [Reflux.connect(OrderStore,����������� ������������������ 'htOrder')],����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ getInitialState()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ htOrder����������� ������������������ :����������� ������������������ {nCount����������� ������������������ :����������� ������������������ this.props.orders.count����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ };����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ changeOrder:����������� ������������������ function(evt)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (evt.target.className����������� ������������������ ===����������� ������������������ "plus")����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ OrderActions.increaseOrderCount();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ render:����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ (����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="plus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ +</div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������ <span>{this.state.htOrder.nCount}����������� ������������������ </span></div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="minus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ -</div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ </div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ )����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ });����������� ������������������
/***����������� ������������������ Action����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderActions����������� ������������������ =����������� ������������������ Reflux.createActions([����������� ������������������ ����������� ������������������ ����������� ������������������ 'setOrder',����������� ������������������ ����������� ������������������ ����������� ������������������ 'increaseOrderCount',����������� ������������������ ]);����������� ������������������
/***����������� ������������������ Store����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderStore����������� ������������������ =����������� ������������������ Reflux.createStore({����������� ������������������ ����������� ������������������ ����������� ������������������ listenables:����������� ������������������ [OrderActions],����������� ������������������
����������� ������������������ ����������� ������������������ _htStore����������� ������������������ :����������� ������������������ {nCount����������� ������������������ :����������� ������������������ 0},����������� ������������������
����������� ������������������ ����������� ������������������ onSetOrder����������� ������������������ :����������� ������������������ function(htOrder)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._htStore.nCount����������� ������������������ =����������� ������������������ htOrder.nCount;����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ onIncreaseOrderCount:����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._htStore.nCount++;����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this._updateView();����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ _updateView����������� ������������������ :����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.trigger(this._htStore);����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ });����������� ������������������
Flux����������� ������������������ 컨셉����������� ������������������ :����������� ������������������ 한����������� ������������������ 방향으로����������� ������������������ 흘러����������� ������������������ 직관적.
/***����������� ������������������ View����������� ������������������ Component����������� ������������������ ***/����������� ������������������ ����������� ������������������ var����������� ������������������ OrderView����������� ������������������ =����������� ������������������ React.createClass({����������� ������������������
����������� ������������������ ����������� ������������������ mixins:����������� ������������������ [Reflux.connect(OrderStore,����������� ������������������ 'htOrder')],����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ getInitialState()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ htOrder����������� ������������������ :����������� ������������������ {nCount����������� ������������������ :����������� ������������������ this.props.orders.count����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ };����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ changeOrder:����������� ������������������ function(evt)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (evt.target.className����������� ������������������ ===����������� ������������������ "plus")����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ OrderActions.increaseOrderCount();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ render:����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ (����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="plus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ +</div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div>����������� ������������������ <span>{this.state.htOrder.nCount}����������� ������������������ </span></div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ className="minus"����������� ������������������ onClick={this.changeOrder}>����������� ������������������ -</div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ </div>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ )����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ });����������� ������������������
다양한����������� ������������������ 도구가����������� ������������������ 넘쳐나는����������� ������������������ 상황에서����������� ������������������ 지속가능한����������� ������������������ 코드를����������� ������������������ 만드는����������� ������������������ 건����������� ������������������ 중요하다.����������� ������������������ ����������� ������������������
지속가능한����������� ������������������ 코드는����������� ������������������ 표준을����������� ������������������ 따르는����������� ������������������ 코드이며����������� ������������������ 의존성����������� ������������������ 적은����������� ������������������ 깨끗한����������� ������������������ 코드이다.����������� ������������������
그런점에서,����������� ������������������
ES6는����������� ������������������ 표준문법을����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있어����������� ������������������ 괜찮고,����������� ������������������
React는����������� ������������������ framework지만����������� ������������������ 상대적으로����������� ������������������ 가벼워서����������� ������������������ 좋다.����������� ������������������
더불어����������� ������������������ 이제는,����������� ������������������
vanillaJS기반����������� ������������������ 개발도����������� ������������������ 도전����������� ������������������ 할����������� ������������������ 때이다.
summary