[Backbone.js] 프론트앤드 프레임워크

백본js 기초

• Models – MVC에서의 model (개별 데이터)

• Collections – model의 집합. view와 연결되어, model에 변화가 생길 때 손쉽게 view(UI)를 갱신할 수 있음

• Routers – MVC에서의 controller. location.hash의 변경에 따른 처리를 담당

• Views – MVC에서의 view. 화면에 나타나는 UI를 담당하며 프론트엔드의 특성상 view가 controller 의 성격도 가지고 있음

• Backbone.js는 Single Page Application(SPA)의 개발을 용이하게 해줌

• Single Page Application은 하나의 html 파일로된 애플리케이션을 의미

• 기본적으로 html 파일하나가 하나의 view를 의미했었지만 location.hash(url에서 # 이후에 나오는 것)를 사용하면 하나의 html파일에서도 즐겨찾기가 가능하도록 url을 변경해가면서 다양한 view를 보여줄 수 있음. 또한, 다른 view를 보여줄 때 html파일이 바뀌지 않으므로 화면갱신(refresh)가 발생하지 않아 사용자 UX 에서의 장점이 있다

---

1. Backbone.Collection

• Backbone.Collection은 일종의 데이터 배열
• 서버로부터는 Array형태의 JSON 객체 집합을 받아서 구성하게 되며, 이 데이터들에 대해 루프를 돌며 각 데이터를 자신에게 지정된 Model 형태에 맞는 인스턴스로 만들어냄

• Model 입장에서는 일종의 부모 역할을 하는 셈. 그리고 이 역할에 맞게 Collection은 자신과 자신의 Model을 관리하는 여러 Method가 있고 또 Model의 상태 변화를 감지하는 Built-in 이벤트도 존재한다.

2. Backbone.Model

• Model은 Collection에 포함되는 개별 단위의 Data 객체가 되며, 어떻게 활용하느냐에 따라 Collection 없이 단독으로 불러와서 사용할 수도 있음

{
    name: "Cavin Jo",
    age: 32,
    job: "S/W engineer",
    color: "yellow",
    height: 175
}

3. Backbone.View

• View는 Backbone.js 애플리케이션의 시작이자 끝

• 애플리케이션을 시작할 때 new 생성자를 통해 Backbone.View 객체 인스턴스를 만들어내며, 데이터 변화에 대한 표현도 Backbone.View 객체를 통해 드러냄

• DOM Element를 Backbone.View 인스턴스로 감싸는 이점은 Backbone.Model과 연동을 통해 Model의 변화에 대해 View의 변화를 자동적으로 적용시킬 있다는 점

• Model을 연동시키지 않더라도 Backbone.View가 주는 편리한 Event, Method 관리 방식을 적용시킬 수 있음

• Backbone.View의 initialize() 함수는 View가 초기화 될때 자동으로 호출됨

  • initialize() 함수 내에서 랜더링

    var s = this; // 백본 전역의 정보를 s에 저장.
    ...
    s.render(); // 랜더링

4. Backbone.Collection

var Book = Backbone.Model.extend({  // 모델 정의  
    defaults: {
    sort: 'default',
    title: 'default Title'
    }
});
 
var book1 = new Book({sort: 'JavaScript', title: 'JavaScript Book 1'}), // Book모델 생성자
book2 = new Book({sort: 'JavaScript', title: 'JavaScript Book 2'}),
book3 = new Book({sort: 'JavaScript', title: 'JavaScript Book 3'});

var Books = Backbone.Collection.extend({ // Books 라는 collection 정의
    model: Book
});
 
var books = new Books(); // books 라는 Books collection의 인스턴스를 생성
 
books.add( [book1, book2, book3] ); // add 메서드를 사용해서 model들을 books 컬렉션에 추가 (배열형태로 삽입 [book1, book2, book3])

books.remove(book1);

Collection에서 이벤트 정의

var Books = Backbone.Collection.extend({ // Books 라는 collection 생성
    model: Book,
    initialize: function () {
        this.bind('add', function (book) { // add 이벤트는 model이 추가될 때 발생
        // 이벤트 리스너는 인자로 추가된 model을 받습니다.
        console.log('방금 ' + book.get('title') + '라는 제목을 가진 책이 추가되었습니다.');
        });
    }
});

• 백본 컬렉션이 생성될 때도 마찬가지로 initialize 함수가 먼저 실행되는데 여기에 이벤트 정의
• 'add' 이벤트는 Collection에 Model이 추가될 때 발생함

Backbone.Event

• add : Model이 새로 생성되었을 때 발생. Model 자신과 부모 Collection에 전달 됨
• remove : Model이 부모 Collection에서 제외되었을 때 발생
• reset : Collection의 전체데이터가 리셋되었을 때 발생
• change : Model의 속성 일부가 바뀌었을 때 발생
• change:attribute : 특정 속성이 바뀌었을 때 발생하는 이벤트.

model.on("change:title", callback) // 해당 Model의 title 속성이 바뀌었을 때만 callback이 실행됨

• destroy : Model이 destroy 되어 DELETE 되었을 때 발생
• all : Model 또는 Collection에 발생하는 모든 종류의 이벤트에 대응

model.on("customEvent", callback)

model.trigger("customEvent")

등등...

---

Backbone.js 참고

https://linuxism.ustd.ip.or.kr/1488

---

handlebars

TBD...