65
FE 개발의 괜찮은 선택 ES6 & React SKPlanet.윤지수 2015.12.15

Front-End 개발의 괜찮은 선택 ES6 & React

  • Upload
    -

  • View
    12.802

  • Download
    3

Embed Size (px)

Citation preview

Page 1: Front-End 개발의 괜찮은 선택  ES6 & React

FE����������� ������������������  개발의����������� ������������������  괜찮은����������� ������������������  선택����������� ������������������  

ES6����������� ������������������  &����������� ������������������  React����������� ������������������  

SKPlanet.윤지수����������� ������������������  2015.12.15

Page 2: Front-End 개발의 괜찮은 선택  ES6 & React

1. 지금까지����������� ������������������  FE����������� ������������������  개발의����������� ������������������  어려움����������� ������������������  

2. 개선된����������� ������������������  이후의����������� ������������������  아름다운����������� ������������������  모습����������� ������������������  

3. ES6와����������� ������������������  React����������� ������������������  의미

Page 3: Front-End 개발의 괜찮은 선택  ES6 & React

ES6와 React,이 둘은 무슨 관계인가 ?

Page 4: Front-End 개발의 괜찮은 선택  ES6 & React

ES6와 React,이 둘은 무슨 관계인가 ?

=> ES6 기반으로 React 코드를 작성할 수 있음

Page 5: Front-End 개발의 괜찮은 선택  ES6 & React

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  1.����������� ������������������  지금까지����������� ������������������  FE개발의����������� ������������������  어려움

Page 6: Front-End 개발의 괜찮은 선택  ES6 & React

너무 많은 FE관련 도구

Page 7: Front-End 개발의 괜찮은 선택  ES6 & React

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����������� ������������������  

올바르게 선택할����������� ������������������  수����������� ������������������  있을까?

Page 8: Front-End 개발의 괜찮은 선택  ES6 & React

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)

Page 9: Front-End 개발의 괜찮은 선택  ES6 & React

javascript����������� ������������������  말고도����������� ������������������  새로운����������� ������������������  걸����������� ������������������  이해해야����������� ������������������  하는����������� ������������������  불편함.

구조적인 언어를 품은 FE개발

(CoffeScript,����������� ������������������  TypeScript,����������� ������������������  Dart)

Page 10: Front-End 개발의 괜찮은 선택  ES6 & React

거대한 Framework의 등장 !

“GWT, AngularJS, BackboneJS, EmberJS.. ”

Page 11: Front-End 개발의 괜찮은 선택  ES6 & React

거대한 Framework도 당연히 없어질 수 있음.구글도 마찬가지.

Page 12: Front-End 개발의 괜찮은 선택  ES6 & React

거대한 Framework의 브라우저 호환성은 우리를 고려해주나?

Page 13: Front-End 개발의 괜찮은 선택  ES6 & React

거대한 Framework는 끼리끼리

결합을 하기도 함

Page 14: Front-End 개발의 괜찮은 선택  ES6 & React

결합은 끊기 어려움

Angular2.0����������� ������������������  &����������� ������������������  TypeScript.����������� ������������������  

Ionic����������� ������������������  with����������� ������������������  Angular.����������� ������������������  

React����������� ������������������  in����������� ������������������  WebCompoent.����������� ������������������  

Page 15: Front-End 개발의 괜찮은 선택  ES6 & React

SPA는 왜 등장했을까?

Page 16: Front-End 개발의 괜찮은 선택  ES6 & React

SPA는 왜 등장했을까?

SPARefresh Ajax

Page 17: Front-End 개발의 괜찮은 선택  ES6 & React

SPA는 왜 등장했을까?

맞아! 더 나은 UX를 위해.

SPARefresh Ajax

Page 18: Front-End 개발의 괜찮은 선택  ES6 & React

SPA개발을����������� ������������������  지원하는����������� ������������������  framework를����������� ������������������  사용.����������� ������������������  

점점����������� ������������������  복잡하고����������� ������������������  무거운����������� ������������������  코드.����������� ������������������  

느린����������� ������������������  웹����������� ������������������  사이트.����������� ������������������  

다시..����������� ������������������  ����������� ������������������  각종����������� ������������������  최적화작업,����������� ������������������  

구조변경,����������� ������������������  ����������� ������������������  라이브러리����������� ������������������  변경(제거)...

그런데, 거대한 framework가 SPA에 무슨 짓을 한거지?

Page 19: Front-End 개발의 괜찮은 선택  ES6 & React

HTML5세상을 맞아,앱과 같은 웹이 되기 위해 라이브러리 홍수현상.

service����������� ������������������  worker,����������� ������������������  ����������� ������������������  web����������� ������������������  socket,����������� ������������������  storage,����������� ������������������  webgl,����������� ������������������  

html5����������� ������������������  libraries����������� ������������������  …⋯����������� ������������������  

Page 20: Front-End 개발의 괜찮은 선택  ES6 & React

잘못된 학습 방법.트렌디한 프레임웍 사용법 학습에 집중하는 잘못

“����������� ������������������  jQuery����������� ������������������  +����������� ������������������  SASS����������� ������������������  +����������� ������������������  HTML5로����������� ������������������  모던����������� ������������������  웹����������� ������������������  개발배우기”����������� ������������������  

“AngularJS����������� ������������������  로����������� ������������������  웹앱����������� ������������������  만들기”����������� ������������������  

Page 21: Front-End 개발의 괜찮은 선택  ES6 & React

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  2.����������� ������������������  개선된����������� ������������������  이후의����������� ������������������  아름다운����������� ������������������  모습

Page 22: Front-End 개발의 괜찮은 선택  ES6 & React

“If����������� ������������������  you����������� ������������������  can’t����������� ������������������  do����������� ������������������  without����������� ������������������  tools����������� ������������������  ����������� ������������������  you’re����������� ������������������  not����������� ������������������  a����������� ������������������  web����������� ������������������  developer.”����������� ������������������  

Peter Paul Koch

Page 23: Front-End 개발의 괜찮은 선택  ES6 & React

가볍고, 단순하게 !웹개발은 결국 사용자를 위함

Page 24: Front-End 개발의 괜찮은 선택  ES6 & React

transpiler나 compiler보다는,JavaScript 언어 그대로를 사용함으로써,

지속성있는 코드를 유지.

Page 25: Front-End 개발의 괜찮은 선택  ES6 & React

제거하기 쉬운 라이브러리 사용.

jQuery를 사용하기 보다는 작은 조각같은 utility나 polyfill을 선택.

Page 26: Front-End 개발의 괜찮은 선택  ES6 & React

덜 의존하는 라이브러리 사용

Page 27: Front-End 개발의 괜찮은 선택  ES6 & React

의식의����������� ������������������  전환.����������� ������������������  “언젠가����������� ������������������  특정����������� ������������������  Framework로����������� ������������������  통일되겠지?”����������� ������������������  

꿈 깨 자,

FrontEnd����������� ������������������  개발은����������� ������������������  실행����������� ������������������  환경이����������� ������������������  다양해지고����������� ������������������  있고����������� ������������������  

서비스����������� ������������������  개발도����������� ������������������  다양하게����������� ������������������  진화중이라����������� ������������������  

단일����������� ������������������  Framework로����������� ������������������  통일되기는����������� ������������������  어려움.

Page 28: Front-End 개발의 괜찮은 선택  ES6 & React

HTML,CSS,JavaScript로 구성한 순수한 코드

image : http://edesign.tistory.com/7

vanillaJS

Page 29: Front-End 개발의 괜찮은 선택  ES6 & React

����������� ������������������  3.����������� ������������������  괜찮은����������� ������������������  선택����������� ������������������  ES6

Page 30: Front-End 개발의 괜찮은 선택  ES6 & React

ES6����������� ������������������  (EcmaScript����������� ������������������  2015) ?

알고보면 새로운 기능과 문법일뿐.

Page 31: Front-End 개발의 괜찮은 선택  ES6 & React

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에서나 가능한 것들이 이젠 표준이다

Page 32: Front-End 개발의 괜찮은 선택  ES6 & React

var����������� ������������������  pairs����������� ������������������  =����������� ������������������  evens.map(v����������� ������������������  =>����������� ������������������  ({even:����������� ������������������  v,����������� ������������������  odd:����������� ������������������  v����������� ������������������  +����������� ������������������  1}));

arrows

Page 33: Front-End 개발의 괜찮은 선택  ES6 & React

let����������� ������������������  num����������� ������������������  =����������� ������������������  11;����������� ������������������  ����������� ������������������  ����������� ������������������  if����������� ������������������  (true)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  let����������� ������������������  num����������� ������������������  =����������� ������������������  22;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  console.log(num);����������� ������������������  ����������� ������������������  //����������� ������������������  22����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  ����������� ������������������  ����������� ������������������  console.log(num);����������� ������������������  ����������� ������������������  //����������� ������������������  11

let

Page 34: Front-End 개발의 괜찮은 선택  ES6 & React

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

Page 35: Front-End 개발의 괜찮은 선택  ES6 & React

// 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

Page 36: Front-End 개발의 괜찮은 선택  ES6 & React

//����������� ������������������  Dynamic����������� ������������������  loading����������� ������������������  ­–����������� ������������������  ‘System’����������� ������������������  is����������� ������������������  default����������� ������������������  loader����������� ������������������  System.import('lib/math').then(function(m)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  alert("2π����������� ������������������  =����������� ������������������  "����������� ������������������  +����������� ������������������  m.sum(m.pi,����������� ������������������  m.pi));����������� ������������������  });

modules loader

Page 37: Front-End 개발의 괜찮은 선택  ES6 & React

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

Page 38: Front-End 개발의 괜찮은 선택  ES6 & React

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

Page 39: Front-End 개발의 괜찮은 선택  ES6 & React

arrows

let

classes

modules

modules����������� ������������������  loader

Promises

yield����������� ������������������  &����������� ������������������  generator

scope����������� ������������������  가����������� ������������������  헷갈리긴����������� ������������������  했지,����������� ������������������  하지만����������� ������������������  적응했는걸.

웬����������� ������������������  화살표냐!

function����������� ������������������  constructor����������� ������������������  &����������� ������������������  prototype.����������� ������������������  아니면����������� ������������������  typescript����������� ������������������  정도.

requireJS����������� ������������������  &����������� ������������������  browserify(webpack)

브라우저����������� ������������������  위에서는����������� ������������������  견딜����������� ������������������  만한����������� ������������������  중첩콜백.����������� ������������������  promise����������� ������������������  라이브러리도����������� ������������������  있긴하고.

system.js

오����������� ������������������  ?!

하나씩 판단해보자. 없던것이냐? 반드시 필요한 거냐?

하나씩����������� ������������������  판단해보자.����������� ������������������  ����������� ������������������  없던것이냐?����������� ������������������  반드시����������� ������������������  필요한����������� ������������������  거냐?

Page 40: Front-End 개발의 괜찮은 선택  ES6 & React

ES6

웹의 혁신은 아니다.하지만 멋진 기능을 표준으로 담고 있다.ES6기반 코드는 지속가능한 코드이다.

Page 41: Front-End 개발의 괜찮은 선택  ES6 & React

ES6����������� ������������������  도입����������� ������������������  전략을����������� ������������������  짜보면,����������� ������������������  ����������� ������������������  

ES6도����������� ������������������  필수가����������� ������������������  아닌����������� ������������������  선택이다.����������� ������������������  

개선된����������� ������������������  JavaScript����������� ������������������  syntax와����������� ������������������  기능들을����������� ������������������  원한다면,����������� ������������������  

다른����������� ������������������  framework보다는����������� ������������������  ES6(with����������� ������������������  babel����������� ������������������  or����������� ������������������  traceur)를����������� ������������������  선택하자.����������� ������������������  가볍게����������� ������������������  ES6를����������� ������������������  지원하는����������� ������������������  부분적인����������� ������������������  라이브러리를����������� ������������������  사용할����������� ������������������  수도����������� ������������������  있다.

Page 42: Front-End 개발의 괜찮은 선택  ES6 & React

4.����������� ������������������  괜찮은����������� ������������������  선택����������� ������������������  ReactJS

Page 43: Front-End 개발의 괜찮은 선택  ES6 & React

‘����������� ������������������  logic과����������� ������������������  view의����������� ������������������  ����������� ������������������  결합,����������� ������������������  ����������� ������������������  ����������� ������������������  inline����������� ������������������  JavaScript’����������� ������������������  ?����������� ������������������  

약간����������� ������������������  낯설다...

����������� ������������������  ����������� ������������������  render:����������� ������������������  function()����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  (����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div>����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  className="plus"����������� ������������������  onClick={this.changeOrder}>����������� ������������������  &#43;</div>����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div>����������� ������������������  <span>{this.state.htOrder.nCount}����������� ������������������  </span></div>����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  className="minus"����������� ������������������  onClick={this.changeOrder}>����������� ������������������  &#45;</div>����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  )����������� ������������������  

����������� ������������������  ����������� ������������������  }

첫인상

Page 44: Front-End 개발의 괜찮은 선택  ES6 & React

상대적으로 거대하지 않은view 집중 framework

Page 45: Front-End 개발의 괜찮은 선택  ES6 & React

jQuery����������� ������������������  또는����������� ������������������  MV*����������� ������������������  Framework의����������� ������������������  경쟁상대로����������� ������������������  보기����������� ������������������  어려움.����������� ������������������  

오히려����������� ������������������  WebComponent����������� ������������������  와����������� ������������������  유사.

Page 46: Front-End 개발의 괜찮은 선택  ES6 & React

web component

shadow DOM

HTML Template

HTML document

장점.����������� ������������������  

모듈화와����������� ������������������  view����������� ������������������  재사용성.����������� ������������������  

고민거리.����������� ������������������  

shadow����������� ������������������  DOM의����������� ������������������  polyfill의����������� ������������������  어려움����������� ������������������  다른����������� ������������������  스펙과의����������� ������������������  충돌(es6-module����������� ������������������  loader)����������� ������������������  react����������� ������������������  와의����������� ������������������  중복����������� ������������������  및����������� ������������������  결합에����������� ������������������  대한����������� ������������������  고민

<custom DOM element >

WEB����������� ������������������  Component는����������� ������������������  아직����������� ������������������  쓸만한����������� ������������������  단계가����������� ������������������  아님.

Page 47: Front-End 개발의 괜찮은 선택  ES6 & React

재사용이라는 큰 장점.

WebComponent 와 React는 view 에 집중하며,component 단위의 재사용성을 높일 수 있음.

Page 48: Front-End 개발의 괜찮은 선택  ES6 & React

재사용성����������� ������������������  -����������� ������������������  같은����������� ������������������  서비스����������� ������������������  내에서의����������� ������������������  UI덩어리����������� ������������������  재사용성.

UI 재사용

Page 49: Front-End 개발의 괜찮은 선택  ES6 & React

extends

ProfileMain ThemeMain

CommonMain

상속을����������� ������������������  통한����������� ������������������  재사용.����������� ������������������  extends,����������� ������������������  mixin����������� ������������������  지원

코드수준의 재사용

Page 50: Front-End 개발의 괜찮은 선택  ES6 & React

FE개발����������� ������������������  입장에서����������� ������������������  가장����������� ������������������  중요하고����������� ������������������  난해한,����������� ������������������  

Template,����������� ������������������  DOM����������� ������������������  조작을����������� ������������������  개선하는데����������� ������������������  집중.����������� ������������������  

개발자는����������� ������������������  ����������� ������������������  

로직과����������� ������������������  구현패턴에����������� ������������������  더많은����������� ������������������  관심을����������� ������������������  가질����������� ������������������  수����������� ������������������  있게����������� ������������������  됐음

FE개발 관점을 변화시켰음

Page 51: Front-End 개발의 괜찮은 선택  ES6 & React

http://www.slideshare.net/stfalconcom/react-45228077

변경되는����������� ������������������  node만����������� ������������������  빨리����������� ������������������  찾아����������� ������������������  수정.����������� ������������������  

Event����������� ������������������  delegation방식지원으로����������� ������������������  효율적인����������� ������������������  Event처리.����������� ������������������  

virtual����������� ������������������  DOM을����������� ������������������  통한����������� ������������������  효율적인����������� ������������������  DOM����������� ������������������  렌더링

Page 52: Front-End 개발의 괜찮은 선택  ES6 & React

다양하게 구현한 코드와 잘 결합

function����������� ������������������  -����������� ������������������  prototype����������� ������������������  ����������� ������������������  기반의����������� ������������������  모듈

object����������� ������������������  literal����������� ������������������  ����������� ������������������  기반의����������� ������������������  모듈

����������� ������������������  ES6����������� ������������������  syntax����������� ������������������  ����������� ������������������  ����������� ������������������  기반의����������� ������������������  모듈

react����������� ������������������  view����������� ������������������  

OOO����������� ������������������  모듈

Page 53: Front-End 개발의 괜찮은 선택  ES6 & React

자기들이 직접 사용하면서 개선한다.

Page 54: Front-End 개발의 괜찮은 선택  ES6 & React

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)}����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  );����������� ������������������  

});����������� ������������������  

Page 55: Front-End 개발의 괜찮은 선택  ES6 & React

학습����������� ������������������  비용은����������� ������������������  다를바����������� ������������������  없다.����������� ������������������  

정작����������� ������������������  쓸려면����������� ������������������  주변을����������� ������������������  설득하고����������� ������������������  결과에����������� ������������������  대한����������� ������������������  책임을����������� ������������������  질����������� ������������������  수도����������� ������������������  있음.����������� ������������������  

HTML����������� ������������������  코드와����������� ������������������  통합하는����������� ������������������  일이����������� ������������������  생김.����������� ������������������  

로딩할게����������� ������������������  많아����������� ������������������  처음����������� ������������������  속도가����������� ������������������  느리다.����������� ������������������  

react도����������� ������������������  어쨋든����������� ������������������  오픈소스다.����������� ������������������  내가����������� ������������������  쥐락펴락하기����������� ������������������  어렵다.

단점? 당연히 많다.

Page 56: Front-End 개발의 괜찮은 선택  ES6 & React

ReactJS 도입 전략을 짜보면,

ReactJS가����������� ������������������  생산성을����������� ������������������  반드시����������� ������������������  높여주진����������� ������������������  않는다.����������� ������������������  

DOM과����������� ������������������  view����������� ������������������  작업이����������� ������������������  많다면����������� ������������������  도입을����������� ������������������  고려.����������� ������������������  

모바일웹이라면����������� ������������������  PC보단����������� ������������������  적극적으로����������� ������������������  도입을����������� ������������������  고려.����������� ������������������  

혹시라도����������� ������������������  angular����������� ������������������  와����������� ������������������  같은����������� ������������������  다른����������� ������������������  framework와의����������� ������������������  통합은����������� ������������������  자제.����������� ������������������  

최대한����������� ������������������  가볍게����������� ������������������  사용.����������� ������������������  Flux,Redux등이����������� ������������������  필수는����������� ������������������  아님.����������� ������������������  

JSPM,����������� ������������������  Webpack,����������� ������������������  gulp등의����������� ������������������  도움을����������� ������������������  받아����������� ������������������  개발.����������� ������������������  

ES6����������� ������������������  와의����������� ������������������  궁합은����������� ������������������  괜찮음.

Page 57: Front-End 개발의 괜찮은 선택  ES6 & React

부록.����������� ������������������  ES6����������� ������������������  &����������� ������������������  React를����������� ������������������  더����������� ������������������  잘����������� ������������������  쓰기����������� ������������������  

Page 58: Front-End 개발의 괜찮은 선택  ES6 & React

오픈소스 프로젝트를 위한 ES6 와 React 기반 Workflow.

ES6����������� ������������������  &����������� ������������������  React����������� ������������������  기반개발에����������� ������������������  필요한����������� ������������������  일들����������� ������������������  

각종����������� ������������������  모듈을����������� ������������������  불러오고,����������� ������������������  ES6를����������� ������������������  ES5로����������� ������������������  변환하고,����������� ������������������  

jsx����������� ������������������  compile����������� ������������������  하고,����������� ������������������  배포를����������� ������������������  위해����������� ������������������  bundle����������� ������������������  로����������� ������������������  최적화하기.

Page 59: Front-End 개발의 괜찮은 선택  ES6 & React

오픈소스 프로젝트를 위한 ES6 와 React 기반 Workflow.

ES6����������� ������������������  &����������� ������������������  React����������� ������������������  기반개발에����������� ������������������  필요한����������� ������������������  일들����������� ������������������  

각종����������� ������������������  모듈을����������� ������������������  불러오고,����������� ������������������  ES6를����������� ������������������  ES5로����������� ������������������  변환하고,����������� ������������������  

jsx����������� ������������������  compile����������� ������������������  하고,����������� ������������������  배포를����������� ������������������  위해����������� ������������������  bundle����������� ������������������  로����������� ������������������  최적화하기.

JSPM, WebPack

Page 60: Front-End 개발의 괜찮은 선택  ES6 & React

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

Page 61: Front-End 개발의 괜찮은 선택  ES6 & React

FE에서 data 를 다룰 일이 많다면,React 에 Flux 도입을 고려하자.

Flux,����������� ������������������  Reflux,����������� ������������������  Redux,����������� ������������������  Fluxxor…⋯

Page 62: Front-End 개발의 괜찮은 선택  ES6 & React

/***����������� ������������������  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}>����������� ������������������  &#43;</div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div>����������� ������������������  <span>{this.state.htOrder.nCount}����������� ������������������  </span></div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  className="minus"����������� ������������������  onClick={this.changeOrder}>����������� ������������������  &#45;</div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  )����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  });����������� ������������������  

Page 63: Front-End 개발의 괜찮은 선택  ES6 & React

/***����������� ������������������  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}>����������� ������������������  &#43;</div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div>����������� ������������������  <span>{this.state.htOrder.nCount}����������� ������������������  </span></div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  className="minus"����������� ������������������  onClick={this.changeOrder}>����������� ������������������  &#45;</div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  )����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  });����������� ������������������  

Page 64: Front-End 개발의 괜찮은 선택  ES6 & React

다양한����������� ������������������  도구가����������� ������������������  넘쳐나는����������� ������������������  상황에서����������� ������������������  지속가능한����������� ������������������  코드를����������� ������������������  만드는����������� ������������������  건����������� ������������������  중요하다.����������� ������������������  ����������� ������������������  

지속가능한����������� ������������������  코드는����������� ������������������  표준을����������� ������������������  따르는����������� ������������������  코드이며����������� ������������������  의존성����������� ������������������  적은����������� ������������������  깨끗한����������� ������������������  코드이다.����������� ������������������  

그런점에서,����������� ������������������  

ES6는����������� ������������������  표준문법을����������� ������������������  사용할����������� ������������������  수����������� ������������������  있어����������� ������������������  괜찮고,����������� ������������������  

React는����������� ������������������  framework지만����������� ������������������  상대적으로����������� ������������������  가벼워서����������� ������������������  좋다.����������� ������������������  

더불어����������� ������������������  이제는,����������� ������������������  

vanillaJS기반����������� ������������������  개발도����������� ������������������  도전����������� ������������������  할����������� ������������������  때이다.

summary

Page 65: Front-End 개발의 괜찮은 선택  ES6 & React

감사합니다 ;-)

윤지수����������� ������������������  

[email protected]