+ All Categories
Home > Documents > öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. ·...

öqö ö ö ö ö?ÏZ¹êö?ÉÝö?»:ãÒÉ÷Êcö?öcö ö ö ö? · 2020. 1. 17. ·...

Date post: 25-Sep-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
27
Transcript
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

Recommended