About backbone.js introduction

1. 자바스크립트의 또다른 발전 Sesson 2.
NHN Technology Services
컨버전스UI개발 / UIT 개발실
이진권
13년 2월 26일 화

2. BACKBONE.JS가 뭔가요?
• 클라이언트 사이드
웹 어플리케이션 개발에
MVC 패턴 적용을 가능하게 해주는
가볍고 심플한
자바스크립트 Framework입니다.
• http://backbonejs.org
13년 2월 26일 화

3. 비슷한 애들로는,
• Angular.js
• JavascriptMVC
• Spine.js
• 등등이 있습니다.
13년 2월 26일 화

4. 왜 쓰나요?
• Single-Page Web App
을 만들거나 복잡한 interface
를 만들기 위해서입니다.
• 서버 사이드의 CRUD
를 편리하게 구현
• Collection 과 View
연동되어 데이터에 변화가 생
길때 화면 UI를 갱신
• Router
변경에 따른 View 의
자동 갱신
13년 2월 26일 화

5. SPA
•A single-page application (SPA),
also known as single-page interface (SPI)
•단 하나의 마크업 페이지,
사용자 인터렉션에
페이지 전환 없이 변화되는 컨텐츠
•트위터, 페이스북이 대표적인 예
13년 2월 26일 화

6. 의 특징
13년 2월 26일 화

7. • MVC 패턴에 맞게 개발할 수 있습니다
M(model : 데이터)
V(View : UI)
C (Controller : 로직, 데이터 처리)
(엄밀히 말하면 MVVM)
13년 2월 26일 화

8. •서버와 착!
달라 붙어있습니다
(REST Communication)
13년 2월 26일 화

9. •매우 가볍습니다
Backbone.js (6KB)
Underscore.js (4KB)
TOTAL : 10KB
13년 2월 26일 화

10. •Backbone.js 는
Underscore.js 에 의존적입니다
13년 2월 26일 화

11. •Backbone.js 는
공식적으로 jQuery/Zepto
사용을 지지합니다
13년 2월 26일 화

12. • 그럼 이것들은 뭔가요?
MVVM
Underscore.js
13년 2월 26일 화

13. MVVM PATTERN
• Model-View-ViewModel
• MVC가 모델, 뷰, 컨트롤러로 이루어져있다면
MVVM은 모델, 뷰, 뷰모델로 이루어진 패턴입니다.
• MVVM도 MVC의 변종으로 볼 수 있고
다른 변종으로는 MVP(Model-View-Presenter)도 있습니다.
13년 2월 26일 화

14. MVVM PATTERN
13년 2월 26일 화

15. MVVM PATTERN 간단 장점
• 1. 디자이너와 개발자의 협업시 유연하게 진행 할 수 있다.
• 2. 반복되는 이벤트핸들러들과 비즈니스로직을 캡슐화 하여 관
리 할 수 있고, 재사용 할 수 있다.
• 3. 객체의 상관관계에 제약 받지 않고 좀 더 편리하게 이벤트들
을 실행 할 수 있다.
• 4. 유지보수가 편해진다.
(기능만 구현해 놓는다면 쉽게 추가 할 수 있게 됩니다.)
13년 2월 26일 화

16. 언더스코어는,
• JavaScript의 현재 버전에선, native로 제공되는 유틸들이 부실
해서 뭐라도 쓰려고 하면 다 구현해야 됩니다.
• 그래서 언더스코어가 도와줄 겁니다.
• 작고 유용한 자바스크립트 라이브러리입니다.
정말 작습니다. (고작 4KB)
13년 2월 26일 화

17. 90보다 큰 수를 추출해보자
• var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;
// 어떻게 작성하실 건가요?
13년 2월 26일 화

18. 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일 화

19. 그런데 언더스코어를 이용하면?
• 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일 화

20. 언더 스코어의 기능
• underscore.js 는 60여개 정도의 함수를 지원합니다.
Collections
Arrays
Objects
Functions
Utilities
자세한건 http://underscorejs.org 를 참고하세요!!
13년 2월 26일 화

21. 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일 화

22. 의 구조
13년 2월 26일 화

23. 라이브러리 구조
• Models
• Collection
• Router
• History
• Sync
• View
13년 2월 26일 화

24. MODEL
•MVC에서의 model입니다.
개별 데이터를 나타냅니다.
13년 2월 26일 화

25. 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 와 Setter
me.get('nAge'); // 30
me.get('sName'); // noname
me.setAge(40);
me.get('nAge'); // 40
13년 2월 26일 화

26. VIEW
• Model 을 어떻게 DISPLAY! 할지, View 와 관련된 Event 를
Listen & React 하는 역할.
• 화면에 나타나는 UI를 담당하며 프론트엔드의 특성상 view가
controller 의 성격도 가지고 있습니다
13년 2월 26일 화

27. 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일 화

28. COLLECTION
• model의 집합. View와 연결되어, model에 변화가 생길 때 손쉽
게 view(UI)를 갱신할 수 있습니다.
• 모델들을 Collection에 넣어서 사용할 수 있습니다.
모델 : 학생 , 콜렉션 : 클래스
모델 : 동물 , 콜렉션 : 동물원
13년 2월 26일 화

29. 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일 화

30. 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일 화

31. SYNC
• Ajax 데이터 전송을 담당합니다.
Backbone.sync is sync(method, model, [options])
• CRUD method 지원 ("create", "read", "update", "delete")
create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
delete → DELETE /collection/id
13년 2월 26일 화

32. • 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일 화

33. • 그래서 Backbone.js 는 어렵지 않아요.
쉽습니다
단지 또 배워야 한다는 문제.. OTL
13년 2월 26일 화

34. •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일 화

35. THANKS!
13년 2월 26일 화