Backbone.js Getting Started (번역)

May 12, 2016

Models and Views

Backbone.js에서 가장 중요한 것은 유저 인터페이스로부터 비즈니스 로직을 분리시켜 코드를 작성할 수 있다는 점이다. 유저 인터페이스와 비즈니스 로직이 서로 얽혀있다면 유지보수가 매우 힘들다. 비즈니스 로직이 유저 인터페이스로부터 독립적일 때 작업하기가 수월해진다.

Models

  • 데이터와 비즈니스 로직을 다룬다.
  • 데이터를 서버로부터 로드하고 서버에 저장한다.
  • 데이터가 변경되었을 때 이벤트를 발생시킨다.

Views

  • 데이터의 변경을 감지하고 UI를 렌더링 한다.
  • 사용자의 인풋을 다루고 상호작용 한다.
  • 캡쳐한 인풋을 모델로 보낸다.

모델은 데이터의 내부 테이블을 관리한다. 그리고 데이터가 변경되었을 때 change 이벤트를 발생시킨다. 모델은 데이터베이스와 연결된 REST API를 통해 서버의 데이터와 일치하도록 만드는 역할을 한다. 데이터의 조각들을 다루는데에 유용한 함수들이 들어있는 작고 재사용 가능한 객체로 모델을 디자인 하라. 모델은 앱의 어느 부분에라도 전달될 수 있어야 한다. 그리고 데이터가 필요한 곳 어디라도 사용될 수 있어야 한다.

뷰는 유저 인터페이스의 작은 조각이다. 뷰는 특정 모델 혹은 많은 모델들에 있는 데이터를 렌더링 하는데 사용한다. 물론 뷰는 그 자체로 데이터가 필요없는 유저 인터페이스의 조각이기도 하다. 모델은 뷰를 의식하지 말아야 한다. 대신에 뷰는 모델의 change 이벤트를 수신해야 하고 상황에 맞게 반응하거나 다시 렌더링을 해야한다.

Collections

컬렉션은 서로 연관이 있는 다수의 모델 그룹을 다룰 수 있게 해준다. 새로운 모델을 서버로부터 로딩하고 저장도 할 수 있으며 모델의 리스트에 대한 집합과 계산처리를 돕는 헬퍼 함수를 제공한다. 이외에도 컬렉션은 자신의 내부에 있는 모델에서 발생한 이벤트를 중계하여 모델의 변경에 대한 대처를 한 곳에서 처리할 수 있도록 해준다.

API Integration

Backbone은 RESTful API와 함께 동작하도록 Sync 기능이 미리 정의되어 있다. 다음은 리소스의 엔드포인트에 url을 추가하여 새로운 컬렉션을 만드는 간단한 방법이다.

var Books = Backbone.Collection.extend({
	url: '/books'
});

컬렉션과 모델 컴포넌트는 다음 메쏘드를 이용하여 REST API와 직접 매핑된다.

GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET  /books/1 ... model.fetch();
PUT  /books/1 ... model.save();
DEL  /books/1 ... model.destroy();

API로부터 JSON 데이터를 fetch할 때 컬렉션은 데이터를 배열로 다루고, 모델은 객체로 다루게 된다.

[{"id": 1}] ..... populates a Collection with one model.
{"id": 1} ....... populates a Model with one attribute.

하지만 백본이 기대하는 포맷과 다른 데이터를 API에서 리턴하는 경우는 매우 일반적이다. 예를 들어 컬렉션에서 fetch한 API가 메타데이터로 감싸져 있는 실제 데이터 배열을 리턴하는 경우가 있을 수 있다.

{
  "page": 1,
  "limit": 10,
  "total": 2,
  "books": [
    {"id": 1, "title": "Pride and Prejudice"},
    {"id": 4, "title": "The Great Gatsby"}
  ]
}

이런 경우 컬렉션은 루트 객체의 스트럭처를 담는 대신 “books” 배열을 담아야 한다. 이것은 API 데이터를 원하는 모양으로 변경하거나, 원하는 부분만 리턴할 수 있게 해주는 parse 메서드를 이용하여 쉽게 다룰 수 있다.

var Books = Backbone.Collection.exted({
	url: '/books',
	parse: function (data) {
		return data.books;
	} 
});

View Rendering

각각의 뷰는 랜더링과 자신의 DOM 요소 내에서 발생하는 유저 인터렉션을 관리한다. 만약 뷰가 핸들링하는 영역이 자신의 영역을 벗어나지 않도록 디자인 한다면 인터페이스를 유연하게 유지하는데에 도움이 된다. 뷰가 필요한 어떤 곳에서라도 독자적으로 렌더링 될 수 있도록 만들면 된다.

백본은 뷰와 서브뷰가 렌더링되는 것 대해서 어떠한 프로세스도 고집하지 않는다. 모델을 HTML (혹은 SVG, Canvas 등등) 안에 어떻게 집어 넣을 지는 당신이 정하면 된다. 간단하게 언더스코어 템플릿을 사용할 수도 있고, 팬시하게 리액트 버츄얼 돔을 사용할 수도 있다. 렌더링에 대한 기본적인 접근방법은 백본 프라이머(Backbone primer)에서 찾을 수 있다.

Routing with URLs

우리는 리치 웹 애플리케이션에도 여전히 앱의 의미있는 부분을 링크, 북마크, 공유할 수 있기를 원한다. 사용자가 북마크 하거나 공유를 원할지도 모르는 앱의 새로운 지점에 도달할 때마다 브라우저의 URL을 업데이트 하는 방법으로 Router를 사용하라. 뒤로가기 버튼을 누르는 경우에도 Router는 URL의 변경을 감지하고 사용자가 정확히 어디 있어야 하는지 애플리케이션에게 전달한다.

Comments

comments powered by Disqus