자바스크립트 프레임워크 살펴보기
-
Upload
jeado-ko -
Category
Technology
-
view
3.793 -
download
12
description
Transcript of 자바스크립트 프레임워크 살펴보기
![Page 1: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/1.jpg)
HTML5JS Study Group JavaScript Framework.
고재도
![Page 2: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/2.jpg)
회사 : 대우정보시스템 Email : [email protected] Face book : http://www.facebook.com/jeado.ko 관심 IT 분야 : JavaScript Framework, Java Framework, Software Design, etc.
발표자 고재도
![Page 3: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/3.jpg)
오모리 찌개 이야기
![Page 4: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/4.jpg)
고객 김치찌개 주문
김치찌개!
![Page 5: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/5.jpg)
김치찌개를 만들려면 뭘 해야 하지?
![Page 6: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/6.jpg)
주문한 날 김장을 한다!
![Page 7: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/7.jpg)
주문 후 두째 날 돼지를 잡는다!
![Page 8: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/8.jpg)
재료 준비 끝?
주문 후 셋째 날 고민 중…
![Page 9: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/9.jpg)
고객을 위해서 더욱 더 첨가해~
주문 후 넷째 날 요리 시작!!
![Page 10: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/10.jpg)
5일이 걸려 만들어진 김치찌개
![Page 11: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/11.jpg)
고객의 반응[response; 反應]
![Page 12: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/12.jpg)
하지만 이 모든 것이 표준 웹 기반의 어플리케이션을 만드는
우리의 현실
![Page 13: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/13.jpg)
가령 Google의 Gmail을 만들어야 한다면 ?
![Page 14: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/14.jpg)
메시지창
![Page 15: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/15.jpg)
트리 메뉴
![Page 16: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/16.jpg)
버튼들
![Page 17: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/17.jpg)
테이블 or 그리드
![Page 18: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/18.jpg)
자동완성 기능
![Page 19: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/19.jpg)
캘린더
![Page 20: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/20.jpg)
하지만 고려할 점이 이게 다가 아니죠
![Page 21: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/21.jpg)
MVC
Modularity DOM Manipulation
MVVM
Data Bound Views
Production Packaging
MVP
Class System Routers & History
SASS & LESS
Cross Browsing
AMD
Event Handling
Ajax
![Page 22: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/22.jpg)
MVC
Modularity DOM Manipulation
MVVM
Data Bound Views
Production Packaging
MVP
Class System Routers & History
SASS & LESS
Cross Browsing
Event Handling
Ajax
AMD
![Page 23: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/23.jpg)
• Spaghetti Code • 심한 커플링 • 무분별한 코드 복사 • 재사용성 제로
![Page 24: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/24.jpg)
�
Hope
![Page 25: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/25.jpg)
JavaScript Framework
![Page 26: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/26.jpg)
김치찌개 만든다고 김장하고 돼지 잡지 마세요!
![Page 27: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/27.jpg)
하지만 Framework는 다양합니다. !���
![Page 28: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/28.jpg)
ExtJS 4.1
![Page 29: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/29.jpg)
All-in-One Framework
Mini Framework
![Page 30: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/30.jpg)
All-in-One Framework
ExtJS 4.1
![Page 31: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/31.jpg)
Mini Framework
![Page 32: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/32.jpg)
MVC
Modularity DOM Manipulation
MVVM
Data Bound Views
Production Packaging
MVP
Class System Routers & History
SASS & LESS
Cross Browsing
CSS Animation
Event Handling
Ajax
![Page 33: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/33.jpg)
MVC
DOM Manipulation
Data Bound Views
Class System
Cross Browsing
Event Handling
Ajax
Modularity
![Page 34: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/34.jpg)
MVC
DOM Manipulation
Class System
Event Handling
Ajax
Modularity
![Page 35: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/35.jpg)
6가지 Feature에의 지원 여부 및 방식으로 분석
MVC
DOM Manipulation
Modularity
Class System
Event Handling
Ajax
![Page 36: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/36.jpg)
![Page 37: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/37.jpg)
Class System Ext.define('My.sample.Person', { name: 'Unknown', constructor: function(name) { if (name) { this.name = name; } }, eat: function(foodType) { alert(this.name + " is eating: " + foodType); } }); var aaron = Ext.create('My.sample.Person', 'Aaron'); aaron.eat("Salad"); // alert("Aaron is eating: Salad");
![Page 38: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/38.jpg)
Class System Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); this.self.instanceCount ++; } }); var dellComputer = Computer.factory('Dell'); var appleComputer = Computer.factory('Mac'); alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac" alert(Computer.instanceCount); // Alerts "2"
![Page 39: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/39.jpg)
DOM Manipulation
![Page 40: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/40.jpg)
DOM Manipulation //by id var el = Ext.get("my-div"); // by DOM element reference var el = Ext.get(myDivElement); // css3 쿼리 셀렉터 스펙을 통한 처리 var el = Ext.query("div > .help");
![Page 41: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/41.jpg)
Event Handling el.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } }); el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut, scope: this });
![Page 42: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/42.jpg)
Modularity
MVC를 통한 Decoupling과 모듈화 Dynamic Loading을 통한 의존성 관리
![Page 43: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/43.jpg)
Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show(); }); Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' } });
![Page 44: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/44.jpg)
MVC Ext.application({ requires: ['Ext.container.Viewport'], name: 'AM', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } });
![Page 45: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/45.jpg)
MVC
![Page 46: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/46.jpg)
Ext.define('AM.view.user.List' ,{ extend: 'Ext.grid.Panel', alias: 'widget.userlist', title: 'All Users', initComponent: function() { this.store = { fields: ['name', 'email'], data : [ {name: 'Ed', email: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] }; this.columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } });
MVC - View
![Page 47: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/47.jpg)
MVC - View
![Page 48: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/48.jpg)
Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List' ], init: function() { this.control({ 'userlist': { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log('Double clicked on ' + record.get('name')); } });
MVC - Controller
![Page 49: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/49.jpg)
MVC - Controller
![Page 50: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/50.jpg)
MVC - Model
![Page 51: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/51.jpg)
MVC - Model Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email'] });
Ext.define('AM.store.Users', { extend: 'Ext.data.Store', model: 'AM.model.User', data: [ {name: 'Ed', email: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] });
Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', stores: ['Users'], models: ['User'], ... });
![Page 52: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/52.jpg)
Ajax
![Page 53: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/53.jpg)
Ext.define('AM.store.Users', { extend: 'Ext.data.Store', model: 'AM.model.User', autoLoad: true, proxy: { type: 'ajax', url: 'data/users.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });
Ajax
![Page 54: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/54.jpg)
{ "success": true, "users": [ {"id": 1, "name": 'Ed', "email": "[email protected]"}, {"id": 2, "name": 'Tommy', "email": "[email protected]"} ] }
Ajax
proxy: { type: 'ajax', api: { read: 'data/users.json', update: 'data/updateUsers.json' }, reader: { type: 'json', root: 'users', successProperty: 'success' } }
![Page 55: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/55.jpg)
Ext.Ajax.request({ url: 'page.php', params: { id: 1 }, success: function(response){ var text = response.responseText; // process server response here } }); Ext.Ajax.timeout = 120000; // 120 seconds Ext.Ajax.request({ url: 'page.aspx', timeout: 60000 });
Ajax
![Page 56: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/56.jpg)
UI Components
![Page 57: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/57.jpg)
http://www.sencha.com/products/extjs/examples/
그리드, 스케쥴러, 메뉴, 콤보박스, 차트, 각종 입력 필드, 윈도우, 텝 등… 엄청 많다!
![Page 58: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/58.jpg)
그 외 특징들
![Page 59: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/59.jpg)
훌륭한 매뉴얼과 예제
![Page 60: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/60.jpg)
하지만 모두 영어
![Page 61: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/61.jpg)
그래도 번역서도 출판되고 Sencha Touch로 인한 인지도 상승
![Page 62: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/62.jpg)
하지만 공짜가 아니다!
![Page 63: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/63.jpg)
![Page 64: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/64.jpg)
개발소스 다 공개(GPL)하면
공짜
![Page 65: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/65.jpg)
그래도 배워두면 Sencha Touch 2.x 개발 바로 들어갈 수 있다!
�
![Page 66: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/66.jpg)
Internet Explorer 8에서 성능 이슈 발생 (클라이언트 PC의 사양에 영향을 많이 받음)
![Page 67: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/67.jpg)
![Page 68: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/68.jpg)
Class System
없습니다.
![Page 69: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/69.jpg)
DOM Manipulation
없습니다. < jQuery or Zepto 필요 >
![Page 70: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/70.jpg)
Modularity
없습니다.
![Page 71: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/71.jpg)
MVC - Model
![Page 72: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/72.jpg)
MVC - Model
![Page 73: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/73.jpg)
MVC - Model
![Page 74: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/74.jpg)
HTML 템플릿을 이용
MVC - View
![Page 75: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/75.jpg)
<script type="text/template" id="stats-‐template"> <span id="todo-‐count"> <strong><%= remaining %></strong> <%= remaining == 1 ? 'item' : 'items' %> left </span> <ul id="filters"> <li> <a class="selected" href="#/">All</a> </li> <li> <a href="#/active">Active</a> </li> <li> <a href="#/completed">Completed</a> </li> </ul> <% if (completed) { %> <button id="clear-‐completed">Clear completed (<%= completed %>)</button> <% } %>
</script>
window.app.AppView = Backbone.View.extend({ ... statsTemplate: _.template($('#stats-‐template').html()), ... render: function() {
... if (window.app.Todos.length) {
... this.$footer.html(this.statsTemplate({ completed: completed, remaining: remaining })); ...
}, ...
});
![Page 76: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/76.jpg)
![Page 77: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/77.jpg)
![Page 78: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/78.jpg)
Ajax
API는 있으나 구현체는 없습니다. < jQuery or Zepto 필요 >
![Page 79: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/79.jpg)
Event Handling
![Page 80: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/80.jpg)
UI Components
단 하나도 없습니다.
![Page 81: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/81.jpg)
그 외 특징들
![Page 82: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/82.jpg)
All-in-One 과 전혀 다른 사상
![Page 83: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/83.jpg)
무한 확장성 하지만 그에 따른 책임도…
![Page 84: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/84.jpg)
디지이너, 퍼블리셔와 협업하기 좋다
![Page 85: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/85.jpg)
BackBone.js 기반의 개발방식은 국내 대규모 시스템 개발에서는 어려울 듯.
![Page 86: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/86.jpg)
아 놔! 요약 좀 해봐
![Page 87: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/87.jpg)
YUI 3.6, Dojo, ExtJS 4 BackBone, Ember, Angurlar
• 모두 다 있음 • 배우는데 큰 시간이 필요함 • 한글화 매뉴얼 필요함 • 구매비용 발생(ExtJS만) • 제약이 심함 • 디자이너와 협업이 어려움
• UI 컴포넌트 전혀 없음 • 배우기 매우 쉬움 • 한글화 매뉴얼 필요함 • 다 공짜 • 제약이 없음 • 다른 라이브러리 사용필요 • UI 아키텍쳐링이 필요함 • 디자이너와 협업이 쉬움
![Page 88: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/88.jpg)
https://github.com/addyosmani/todomvc
![Page 89: 자바스크립트 프레임워크 살펴보기](https://reader036.fdocument.pub/reader036/viewer/2022081421/5588f5d7d8b42a53138b471c/html5/thumbnails/89.jpg)
Q n A