27

öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 2: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 3: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 4: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

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

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
Page 7: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

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

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

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
Page 11: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 12: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 13: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 14: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 15: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 16: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

화면출처: daum.net

Page 17: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

초기화

State가 변경될때

Unmount

Page 18: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 19: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

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
Page 21: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework

<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
Page 23: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 25: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 26: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework
Page 27: öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. · Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer, Vue.js … MV* Framework