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