öqö ö ö ö ö?Ïz¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. ·...
TRANSCRIPT
![Page 1: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/1.jpg)
![Page 2: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/2.jpg)
![Page 3: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/3.jpg)
![Page 4: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/4.jpg)
Framework에서 제공하는 DOM 추상화 Layer
Jquery, YUI, Jindo …
Library
Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js …
MV* Framework
DOMHTML+CSS DOMHTML+CSS DOMHTML+CSS
Custom JavaScript App
![Page 5: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/5.jpg)
Virtual DOM
Real DOMComponents
JavaScript React Class
화면출처: https://facebook.github.io/react/
![Page 6: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/6.jpg)
![Page 7: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/7.jpg)
1. Input
2. query3. UpdateController ModelViewView
![Page 8: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/8.jpg)
ViewModel ModelViewView
1. command
data binding
2. dispatch
3. query
![Page 9: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/9.jpg)
ViewModel (Store) ModelViewView
data binding 3. query
1. command
2. dispatch
![Page 10: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/10.jpg)
![Page 11: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/11.jpg)
![Page 12: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/12.jpg)
![Page 13: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/13.jpg)
![Page 14: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/14.jpg)
![Page 15: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/15.jpg)
![Page 16: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/16.jpg)
화면출처: daum.net
![Page 17: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/17.jpg)
초기화
State가 변경될때
Unmount
![Page 18: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/18.jpg)
![Page 19: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/19.jpg)
MobileDesktop
화면출처: daum.net
![Page 20: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/20.jpg)
![Page 21: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/21.jpg)
<Ranking />
<RankingTab name=“뉴스”/>
<RankingTab name=“스포츠”/>
<RankingTab name=“연예”/>
<RankingTabHeader />
<RankingTabBody/>
<RankingTabItems /
<RankingTabFooter />
<RankingTabHeader />
<RankingTabHeader />
![Page 22: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/22.jpg)
![Page 23: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/23.jpg)
![Page 25: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/25.jpg)
![Page 26: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/26.jpg)
![Page 27: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac2618cdd1de71d4f96/html5/thumbnails/27.jpg)