Front-End 개발에 수많은 라이브러리에서 어떤 전략으로 개발해야 할지, ES6, React는 과연 의미가 있는 프레임웍인지?

1. FE

2. 개발의

3. 괜찮은

4. 선택

5.
ES6

7. React

8.
SKPlanet.윤지수

9.
2015.12.15

10. 1. 지금까지

11. FE

12. 개발의

13. 어려움

14.
2. 개선된

15. 이후의

16. 아름다운

17. 모습

18.
3. ES6와

19. React

20. 의미

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

22. ES6와 React,이 둘은 무슨 관계인가 ?
= ES6 기반으로 React 코드를 작성할 수 있음

26. 1.

27. 지금까지

28. FE개발의

29. 어려움

30. 너무 많은 FE관련 도구

31. Joose

32.
jsPHP

33.
Microsoft's

34. Ajax

35. library

36.
MochiKit

37.
PDF.js

38.
Rico

39.
Socket.IO

40.
Spry

41. framework

42.
Underscore.js

43.
Cascade

44. Framework

45.
Handlebars

46.
jQuery

47. Mobile

48.
Mustache

49.
Unit

50. testing[edit]

51.
Jasmine

52.
Mocha

53.
QUnit

54.
Unit.js

55.
AngularJS

56.
Backbone.js

57.
Cappuccino

58.
Chaplin.js

59.
Echo

60.
Ember.js

61.
Enyo

62.
Ext

63. JS

64.
Google

65. Web

66. Toolkit

67.
올바르게 선택할

68. 수

69. 있을까?

70. 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,

71. TypeScript,

72. Dart)

73. javascript

74. 말고도

75. 새로운

76. 걸

77. 이해해야

78. 하는

79. 불편함.
구조적인 언어를 품은 FE개발
(CoffeScript,

80. TypeScript,

81. Dart)

82. 거대한 Framework의 등장 !
“GWT, AngularJS, BackboneJS,
EmberJS.. ”

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

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

85. 거대한 Framework는
끼리끼리
결합을 하기도 함

86. 결합은 끊기 어려움
Angular2.0

88. TypeScript.

89.
Ionic

90. with

91. Angular.

92.
React

93. in

94. WebCompoent.

96. SPA는 왜 등장했을까?

97. SPA는 왜 등장했을까?
SPARefresh Ajax

98. SPA는 왜 등장했을까?
맞아! 더 나은 UX를 위해.
SPARefresh Ajax

99. SPA개발을

100. 지원하는

101. framework를

102. 사용.

103.
점점

104. 복잡하고

105. 무거운

106. 코드.

107.
느린

108. 웹

109. 사이트.

110.
다시..

112.
각종

113. 최적화작업,

114.
구조변경,

116.
라이브러리

117. 변경(제거)...
그런데, 거대한 framework가
SPA에 무슨 짓을 한거지?

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

119. worker,

121.
web

122. socket,

123.
storage,

124.
webgl,

125.
html5

126. libraries

127.
…⋯

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

130. jQuery

131. +

132. SASS

133. +

134. HTML5로

135. 모던

136. 웹

137. 개발배우기”

138.
“AngularJS

139. 로

140. 웹앱

141. 만들기”

146. 2.

147. 개선된

148. 이후의

149. 아름다운

150. 모습

151. “If

152. you

153. can’t

154. do

155. without

156. tools

158.
you’re

159. not

160. a

161. web

162. developer.”

163.
Peter Paul Koch

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

165. transpiler나 compiler보다는,
JavaScript 언어 그대로를 사용함으로써,
지속성있는 코드를 유지.

166. 제거하기 쉬운 라이브러리 사용.
jQuery를 사용하기 보다는
작은 조각같은 utility나 polyfill을 선택.

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

168. 의식의

169. 전환.

170.
“언젠가

171. 특정

172. Framework로

173. 통일되겠지?”

174.
꿈 깨 자,
FrontEnd

175. 개발은

176. 실행

177. 환경이

178. 다양해지고

179. 있고

180.
서비스

181. 개발도

182. 다양하게

183. 진화중이라

184.
단일

185. Framework로

186. 통일되기는

187. 어려움.

188. HTML,CSS,JavaScript로 구성한
순수한 코드
image : http://edesign.tistory.com/7
vanillaJS

189. 3.

190. 괜찮은

191. 선택

192. ES6

193. ES6

194. (EcmaScript

195. 2015) ?
알고보면 새로운 기능과 문법일뿐.

196. arrows
classes
enhanced object literals
template strings
destructuring
default + rest + spread
let + const
iterators + for..of
generators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls
각종 framework에서나
가능한 것들이
이젠 표준이다

197. var

198. pairs

199. =

200. evens.map(v

201. =

202. ({even:

203. v,

204. odd:

205. v

206. +

207. 1}));
arrows

208. let

209. num

210. =

211. 11;

214. if

215. (true)

216. {

221. let

222. num

223. =

224. 22;

229. console.log(num);

231. //

232. 22

235. }

238. console.log(num);

240. //

241. 11
let

242. class

243. SkinnedMesh

244. extends

245. THREE.Mesh

246. {

249. constructor(geometry,

250. materials)

251. {

256. super(geometry,

257. materials);

262. this.idMatrix

263. =

264. SkinnedMesh.defaultMatrix();

269. this.bones

270. =

271. [];

276. this.boneMatrices

277. =

278. [];

283. //...

286. }

289. get

290. boneCount()

291. {

296. return

297. this.bones.length;

300. }

301.
}
classes

302. // lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from lib/math;
alert(2π = + math.sum(math.pi, math.pi));
modules

303. //

304. Dynamic

305. loading

306. ­–

307. ‘System’

308. is

309. default

310.
loader

311.
System.import('lib/
math').then(function(m)

312. {

315. alert(2π

316. =

318. +

319. m.sum(m.pi,

320. m.pi));

321.
});
modules loader

322. function

323. timeout(duration

324. =

325. 0)

326. {

331. return

332. new

333. Promise((resolve,

334. reject)

335. =

336. {

345. setTimeout(resolve,

346. duration);

351. })

352.
}

353.
var

354. p

355. =

356. timeout(1000).then(()

357. =

358. {

363. return

364. timeout(2000);

365.
}).then(()

366. =

367. {

372. throw

373. new

374. Error(hmm);

375.
}).catch(err

376. =

377. {

382. return

383. Promise.all([timeout(100),

384. timeout(200)]);

385.
})
Promises

386. function*

387. anotherGenerator(i)

388. {

391. yield

392. i

393. +

394. 1;

397. yield

398. i

399. +

400. 2;

403. yield

404. i

405. +

406. 3;

407.
}

408.
function*

409. generator(i){

412. yield

413. i;

416. yield*

417. anotherGenerator(i);

420. yield

421. i

422. +

423. 10;

424.
}

425.
var

426. gen

427. =

428. generator(10);

429.
console.log(gen.next().value);

430. //

431. 10

432.
console.log(gen.next().value);

433. //

434. 11
yield generator

435. arrows
let
classes
modules
modules

436. loader
Promises
yield

438. generator
scope

439. 가

440. 헷갈리긴

441. 했지,

442. 하지만

443. 적응했는걸.
웬

444. 화살표냐!
function

445. constructor

447. prototype.

448.
아니면

449. typescript

450. 정도.
requireJS

452. browserify(webpack)
브라우저

453. 위에서는

454. 견딜

455. 만한

456. 중첩콜백.

457.
promise

458. 라이브러리도

459. 있긴하고.
system.js
오

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

461. 판단해보자.

463.
없던것이냐?

464. 반드시

465. 필요한

466. 거냐?

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

468. ES6

469. 도입

470. 전략을

471. 짜보면,

473.
ES6도

474. 필수가

475. 아닌

476. 선택이다.

477.
개선된

478. JavaScript

479. syntax와

480. 기능들을

481. 원한다면,

482.
다른

483. framework보다는

484. ES6(with

485. babel

486. or

487. traceur)를

488. 선택하자.

489.
가볍게

490. ES6를

491. 지원하는

492. 부분적인

493. 라이브러리를

494. 사용할

495. 수도

496. 있다.

497. 4.

498. 괜찮은

499. 선택

500. ReactJS

501. ‘

502. logic과

503. view의

505. 결합,

508. inline

509. JavaScript’

510. ?

511.
약간

512. 낯설다...

514. render:

515. function()

516. {

521. return

522. (

529. div

540. div

541. className=plus

542. onClick={this.changeOrder}

543. #43;/div

554. div

555. span{this.state.htOrder.nCount}

556. /span/div

567. div

568. className=minus

569. onClick={this.changeOrder}

570. #45;/div

577. /div

582. )

585. }
첫인상

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

587. jQuery

588. 또는

589. MV*

590. Framework의

591. 경쟁상대로

592. 보기

593. 어려움.

594.
오히려

595. WebComponent

596. 와

597. 유사.

598. web component
shadow DOM
HTML Template
HTML document
장점.

599.
모듈화와

600. view

601. 재사용성.

602.
고민거리.

603.
shadow

604. DOM의

605. polyfill의

606. 어려움

607.
다른

608. 스펙과의

609. 충돌(es6-module

610. loader)

611.
react

612. 와의

613. 중복

614. 및

615. 결합에

616. 대한

617. 고민
custom DOM element
WEB

618. Component는

619. 아직

620. 쓸만한

621. 단계가

622. 아님.

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

624. 재사용성

625. -

626. 같은

627. 서비스

628. 내에서의

629. UI덩어리

630. 재사용성.
UI 재사용

631. extends
ProfileMain ThemeMain
CommonMain
상속을

632. 통한

633. 재사용.

634.
extends,

635. mixin

636. 지원
코드수준의 재사용

637. FE개발

638. 입장에서

639. 가장

640. 중요하고

641. 난해한,

642.
Template,

643. DOM

644. 조작을

645. 개선하는데

646. 집중.

647.
개발자는

649.
로직과

650. 구현패턴에

651. 더많은

652. 관심을

653. 가질

654. 수

655. 있게

656. 됐음
FE개발 관점을 변화시켰음

657. http://www.slideshare.net/stfalconcom/react-45228077
변경되는

658. node만

659. 빨리

660. 찾아

661. 수정.

662.
Event

663. delegation방식지원으로

664. 효율적인

665. Event처리.

666.
virtual

667. DOM을

668. 통한

669. 효율적인

670. DOM

671. 렌더링

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

673. -

674.
prototype

676.
기반의

677. 모듈
object

678. literal

680.
기반의

681. 모듈

682. ES6

683. syntax

686. 기반의

687. 모듈
react

688. view

689.
OOO

690. 모듈

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

692. SPA의 단점인 loading 속도에 대한 해결책이 존재.
Server Side rendering
app.get(/order,

693. function(req,

694. res)

695. {

700. jspm.import('app/js/pages/orderServer')

709. .then(function(sRenderedHTML)

710. {

727. var

728. _htData

729. =

730. {'mycontent'

731. :

732. sRenderedHTML.default}

749. var

750. sResultHTML

751. =

752. _ld.template(sTemplateOrderHTML)(_htData);

769. res.end(sResultHTML);

782. },

783. function(err)

784. {console.log(SeverRendering

785. Error

786. :,

787. err)}

796. );

797.
});

799. 학습

800. 비용은

801. 다를바

802. 없다.

803.
정작

804. 쓸려면

805. 주변을

806. 설득하고

807. 결과에

808. 대한

809. 책임을

810. 질

811. 수도

812. 있음.

813.
HTML

814. 코드와

815. 통합하는

816. 일이

817. 생김.

818.
로딩할게

819. 많아

820. 처음

821. 속도가

822. 느리다.

823.
react도

824. 어쨋든

825. 오픈소스다.

826. 내가

827. 쥐락펴락하기

828. 어렵다.
단점? 당연히 많다.

829. ReactJS 도입 전략을 짜보면,
ReactJS가

830. 생산성을

831. 반드시

832. 높여주진

833. 않는다.

834.
DOM과

835. view

836. 작업이

837. 많다면

838. 도입을

839. 고려.

840.
모바일웹이라면

841. PC보단

842. 적극적으로

843. 도입을

844. 고려.

845.
혹시라도

846. angular

847. 와

848. 같은

849. 다른

850. framework와의

851. 통합은

852. 자제.

853.
최대한

854. 가볍게

855. 사용.

856. Flux,Redux등이

857. 필수는

858. 아님.

859.
JSPM,

860. Webpack,

861. gulp등의

862. 도움을

863. 받아

864. 개발.

865.
ES6

866. 와의

867. 궁합은

868. 괜찮음.

869. 부록.

870. ES6

872. React를

873. 더

874. 잘

875. 쓰기

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

879. React

880. 기반개발에

881. 필요한

882. 일들

883.
각종

884. 모듈을

885. 불러오고,

886.
ES6를

887. ES5로

888. 변환하고,

889.
jsx

890. compile

891. 하고,

892.
배포를

893. 위해

894. bundle

895. 로

896. 최적화하기.

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

899. React

900. 기반개발에

901. 필요한

902. 일들

903.
각종

904. 모듈을

905. 불러오고,

906.
ES6를

907. ES5로

908. 변환하고,

909.
jsx

910. compile

911. 하고,

912.
배포를

913. 위해

914. bundle

915. 로

916. 최적화하기.
JSPM, WebPack

917. babel

918. swipe.js

919. -o

920. dist/swipe.js

921.
npm

922. init

923.
npm

924. publish

925.
sudo

926. npm

927. install

928. jspm

929. --save-dev

930.
jspm

931. init

932.
jspm

933. install

934. npm:swipe

935.
vi

936. js/main.js

937. //swipe.js를

938. 활용한

939. 개발.

940.
jspm

941. bundle-sfx

942. js/main.js

943. js/build.js

944.
live-server

945.
jspm

946. install

947. react

948. react-dom

949.
vi

950. js/main.js

952. //

953. react

954. 기반

955. 개발..

956.
jspm

957. bundle-sfx

958. js/main.js

959. js/build.js

960.
…⋯…⋯
workflow

962. example

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

964. Reflux,

965. Redux,

966. Fluxxor…⋯

967. /***

968. Action

969. ***/

971.
var

972. OrderActions

973. =

974. Reflux.createActions([

977. 'setOrder',

980. 'increaseOrderCount',

981.
]);

982.
/***

983. Store

984. ***/

986.
var

987. OrderStore

988. =

989. Reflux.createStore({

992. listenables:

993. [OrderActions],

996. _htStore

997. :

998. {nCount

999. :

1000. 0},

1003. onSetOrder

1004. :

1005. function(htOrder)

1006. {

1011. this._htStore.nCount

1012. =

1013. htOrder.nCount;

1016. },

1019. onIncreaseOrderCount:

1020. function()

1021. {

1026. this._htStore.nCount++;

1031. this._updateView();

1034. },

1037. _updateView

1038. :

1039. function()

1040. {

1045. this.trigger(this._htStore);

1048. }

1049.
});

1050.
Flux

1051. 컨셉

1052. :

1053. 한

1054. 방향으로

1055. 흘러

1056. 직관적.
/***

1057. View

1058. Component

1059. ***/

1061.
var

1062. OrderView

1063. =

1064. React.createClass({

1067. mixins:

1068. [Reflux.connect(OrderStore,

1069. 'htOrder')],

1073. getInitialState()

1074. {

1079. return

1080. {

1087. htOrder

1088. :

1089. {nCount

1090. :

1091. this.props.orders.count

1092. }

1097. };

1100. },

1103. changeOrder:

1104. function(evt)

1105. {

1110. if

1111. (evt.target.className

1112. ===

1113. plus)

1114. {

1121. OrderActions.increaseOrderCount();

1126. }

1129. },

1132. render:

1133. function()

1134. {

1139. return

1140. (

1147. div

1158. div

1159. className=plus

1160. onClick={this.changeOrder}

1161. #43;/div

1172. div

1173. span{this.state.htOrder.nCount}

1174. /span/div

1185. div

1186. className=minus

1187. onClick={this.changeOrder}

1188. #45;/div

1195. /div

1200. )

1203. }

1204.
});

1206. /***

1207. Action

1208. ***/

1210.
var

1211. OrderActions

1212. =

1213. Reflux.createActions([

1216. 'setOrder',

1219. 'increaseOrderCount',

1220.
]);

1221.
/***

1222. Store

1223. ***/

1225.
var

1226. OrderStore

1227. =

1228. Reflux.createStore({

1231. listenables:

1232. [OrderActions],

1235. _htStore

1236. :

1237. {nCount

1238. :

1239. 0},

1242. onSetOrder

1243. :

1244. function(htOrder)

1245. {

1250. this._htStore.nCount

1251. =

1252. htOrder.nCount;

1255. },

1258. onIncreaseOrderCount:

1259. function()

1260. {

1265. this._htStore.nCount++;

1270. this._updateView();

1273. },

1276. _updateView

1277. :

1278. function()

1279. {

1284. this.trigger(this._htStore);

1287. }

1288.
});

1289.
Flux

1290. 컨셉

1291. :

1292. 한

1293. 방향으로

1294. 흘러

1295. 직관적.
/***

1296. View

1297. Component

1298. ***/

1300.
var

1301. OrderView

1302. =

1303. React.createClass({

1306. mixins:

1307. [Reflux.connect(OrderStore,

1308. 'htOrder')],

1312. getInitialState()

1313. {

1318. return

1319. {

1326. htOrder

1327. :

1328. {nCount

1329. :

1330. this.props.orders.count

1331. }

1336. };

1339. },

1342. changeOrder:

1343. function(evt)

1344. {