Download - 자바스크립트의 또다른 발전, Backbone.js
NHN Technology Services컨버전스UI개발 / UIT 개발실
이진권
자바스크립트의 또다른 발전 Sesson 2.
13년 2월 26일 화
•클라이언트 사이드 웹 어플리케이션 개발에 MVC 패턴 적용을 가능하게 해주는 가볍고 심플한자바스크립트 Framework입니다.
• http://backbonejs.org
BACKBONE.JS가 뭔가요?
13년 2월 26일 화
• Angular.js
• JavascriptMVC
• Spine.js
•등등이 있습니다.
비슷한 애들로는,
13년 2월 26일 화
왜 쓰나요?
• Single-Page Web App을 만들거나 복잡한 interface 를 만들기 위해서입니다.
•서버 사이드의 CRUD 를 편리하게 구현
• Collection 과 View 연동되어 데이터에 변화가 생길때 화면 UI를 갱신
• Router 변경에 따른 View 의 자동 갱신
13년 2월 26일 화
SPA•A single-page application (SPA), also known as single-page interface (SPI)
•단 하나의 마크업 페이지, 사용자 인터렉션에 페이지 전환 없이 변화되는 컨텐츠
•트위터, 페이스북이 대표적인 예
13년 2월 26일 화
의 특징
13년 2월 26일 화
• MVC 패턴에 맞게 개발할 수 있습니다
M(model : 데이터)
V(View : UI) C (Controller : 로직, 데이터 처리)
(엄밀히 말하면 MVVM)
13년 2월 26일 화
•서버와 착!
달라 붙어있습니다(REST Communication)
13년 2월 26일 화
•매우 가볍습니다Backbone.js (6KB)Underscore.js (4KB)TOTAL : 10KB
13년 2월 26일 화
•Backbone.js 는
Underscore.js 에 의존적입니다
13년 2월 26일 화
•Backbone.js 는 공식적으로 jQuery/Zepto
사용을 지지합니다
13년 2월 26일 화
•그럼 이것들은 뭔가요?
MVVMUnderscore.js
13년 2월 26일 화
MVVM PATTERN
• Model-View-ViewModel
• MVC가 모델, 뷰, 컨트롤러로 이루어져있다면 MVVM은 모델, 뷰, 뷰모델로 이루어진 패턴입니다.
• MVVM도 MVC의 변종으로 볼 수 있고 다른 변종으로는 MVP(Model-View-Presenter)도 있습니다.
13년 2월 26일 화
MVVM PATTERN
13년 2월 26일 화
MVVM PATTERN 간단 장점
• 1. 디자이너와 개발자의 협업시 유연하게 진행 할 수 있다.
• 2. 반복되는 이벤트핸들러들과 비즈니스로직을 캡슐화 하여 관리 할 수 있고, 재사용 할 수 있다.
• 3. 객체의 상관관계에 제약 받지 않고 좀 더 편리하게 이벤트들을 실행 할 수 있다.
• 4. 유지보수가 편해진다. (기능만 구현해 놓는다면 쉽게 추가 할 수 있게 됩니다.)
13년 2월 26일 화
언더스코어는,
• JavaScript의 현재 버전에선, native로 제공되는 유틸들이 부실해서 뭐라도 쓰려고 하면 다 구현해야 됩니다.
•그래서 언더스코어가 도와줄 겁니다.
•작고 유용한 자바스크립트 라이브러리입니다.정말 작습니다. (고작 4KB)
13년 2월 26일 화
90보다 큰 수를 추출해보자
• var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],topScorers = [], scoreLimit = 90;
// 어떻게 작성하실 건가요?
13년 2월 26일 화
90보다 큰 수를 추출해보자• var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;
// 아마도 이런 모습이겠죠for (i=0; i<=scores.length; i++){ if (scores[i]>scoreLimit){ topScorers.push(scores[i]); }}console.log(topScorers);
13년 2월 26일 화
그런데 언더스코어를 이용하면?
• var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],topScorers = [], scoreLimit = 90;
// 6줄 짜리 for loop이 이렇게 간단해집니다topScorers = _.select(scores, function(score){ return score > scoreLimit; });
13년 2월 26일 화
언더 스코어의 기능
• underscore.js 는 60여개 정도의 함수를 지원합니다.
CollectionsArraysObjectsFunctionsUtilities
자세한건 http://underscorejs.org 를 참고하세요!!
13년 2월 26일 화
UNDERSCORE.(PHP|RUA|PERL)
• Underscore.php 도 있습니다. (동일한 메서드, 조금 다른 문법)
• uniq중복을 제거하여 unique한 값을 걸러낸다
js 의 uniq 예제_.uniq([1, 2, 1, 3, 1, 4]);
php의 uniq 예제__::uniq(array(1, 2, 1, 3, 1, 4));
13년 2월 26일 화
의 구조
13년 2월 26일 화
라이브러리 구조
• Models
• Collection
• Router
• History
• Sync
• View
13년 2월 26일 화
MODEL
•MVC에서의 model입니다. 개별 데이터를 나타냅니다.
13년 2월 26일 화
MODEL• var Person = Backbone.model.extend({ defaults : { nAge : 30, sName : 'noname' }, initialize : function(){ console.log('model이 생성되었습니다'); this.bind('change:sName', function(){ console.log('제 나이는 ' + this.get('nAge') + '로 변경되었습니다'); }); }, setAge : function(nAge){ this.set('nAge', nAge); }});var me = new Person;// Getter 와 Setterme.get('nAge'); // 30me.get('sName'); // nonameme.setAge(40);me.get('nAge'); // 40
13년 2월 26일 화
VIEW
• Model 을 어떻게 DISPLAY! 할지, View 와 관련된 Event 를 Listen & React 하는 역할.
•화면에 나타나는 UI를 담당하며 프론트엔드의 특성상 view가 controller 의 성격도 가지고 있습니다
13년 2월 26일 화
VIEW
• var BookStore = Backbone.view.extend({ initialize : function(){ console.log('북스토어가 초기화 되었습니다'); }, events : { "keydown input[type=input]" : "doSearch" }, doSearch : function(event){ console.log('책을 검색합니다'); }});
var bookStore = new BookStore();
<input type="input" placeholder="책 이름을 입력하세요">
13년 2월 26일 화
COLLECTION
• model의 집합. View와 연결되어, model에 변화가 생길 때 손쉽게 view(UI)를 갱신할 수 있습니다.
•모델들을 Collection에 넣어서 사용할 수 있습니다.모델 : 학생 , 콜렉션 : 클래스모델 : 동물 , 콜렉션 : 동물원
13년 2월 26일 화
COLLECTION
• var Book = Backbone.Model.extend({ defaults : { title : 'untitled', category : 'none' }});
var book1 = new Book({category : 'IT', title : '자바스크립트 일주일만 하면 진권만큼 한다'});var book2 = new Book({category : '자기개발서', title : '낚시, 일주일만 하면 상대방을 낚을 수 있다'});
var Books = Backbone.Collection.extend({model : Book});var books = new Book();
books.add([book1, book2]);
13년 2월 26일 화
ROUTES• MVC에서의 controller 입니다. location.hash의 변경에 따른 처리를 담당합니다.
• var Workspace = Backbone.Router.extend({ routes : { "help" : "help", // #help "search/:query" : "search", // #search/kiwis "search/:query/p:page" : "search" // #search/kiwis/p7 }, help : function() { }, search : function(query, page) { }});
13년 2월 26일 화
SYNC
• Ajax 데이터 전송을 담당합니다.Backbone.sync is sync(method, model, [options])
• CRUD method 지원 ("create", "read", "update", "delete")
create → POST /collectionread → GET /collection[/id]update → PUT /collection/iddelete → DELETE /collection/id
13년 2월 26일 화
• var Person = Backbone.Model.extend({ initialize: function() { this.on('all', function(e) { console.log(this.get('name') + " event: " + e); }); }, defaults: { name: 'undefined', age: 'undefined' },
urlRoot: "/backbone.php", url: function() { var base = this.urlRoot || (this.collection && this.collection.url) || "/"; if (this.isNew()) return base; return base + "?id=" + encodeURIComponent(this.id); }});
var person = new Person({id:1});
person.fetch(); // fetch model from DB with id = 1
person = new Person({name:"Joe Zim", age:23});
person.save(); // 신규 모델 추가
person = new Person({id:1, name:"Joe Zim", age:23});
person.save(); // 모델 업데이트person.destroy(): // 모델 삭제
13년 2월 26일 화
•그래서 Backbone.js 는 어렵지 않아요.
쉽습니다단지 또 배워야 한다는 문제.. OTL
13년 2월 26일 화
•Node.js Q&A Backbone.js 강좌http://nodeqa.com/nodejs_ref/46
•동영상으로 제작된 backbone.js 강의http://www.joezimjs.com/javascript/introduction-to-backbone-js-part-1-models-video-tutorial/
13년 2월 26일 화
THANKS!
13년 2월 26일 화