[javascript] Backbone.js에서 인터랙티브 UI 개발 방법

22 Nov 2023

javascript

Backbone.js는 웹 애플리케이션의 인터랙티브 UI 개발에 매우 유용한 자바스크립트 프레임워크입니다. 이번 포스트에서는 Backbone.js를 사용하여 인터랙티브한 UI를 개발하는 방법에 대해 살펴보겠습니다.

Backbone.js 소개

Backbone.js는 MVC (Model-View-Controller) 아키텍처를 기반으로 한 자바스크립트 프레임워크로, 데이터와 UI의 결합을 용이하게 해줍니다. Backbone.js를 사용하면 애플리케이션의 데이터 모델을 정의하고, 이를 기반으로 뷰를 업데이트할 수 있습니다.

모델(Model)과 컬렉션(Collection) 정의

인터랙티브 UI를 개발하기 위해 먼저 Backbone.js의 모델과 컬렉션을 정의해야 합니다. 모델은 애플리케이션의 데이터를 나타내는데 사용되며, 컬렉션은 모델의 그룹을 관리합니다.

// 모델 정의
var Book = Backbone.Model.extend({
  defaults: {
    title: '',
    author: '',
    year: ''
  }
});

// 컬렉션 정의
var Library = Backbone.Collection.extend({
  model: Book
});

뷰(View) 정의

다음으로는 뷰(View)를 정의하여 모델과 컬렉션을 기반으로 화면을 렌더링할 수 있습니다. 뷰는 템플릿과 이벤트 처리 등을 포함합니다.

// 뷰 정의
var BookView = Backbone.View.extend({
  tagName: 'li',
  
  template: _.template('<span><%= title %></span> by <%= author %>, <%= year %>'),
  
  events: {
    'click': 'onClick'
  },
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  
  onClick: function() {
    // 뷰 클릭 이벤트 처리
  }
});

애플리케이션 예시

이제 위에서 정의한 모델, 컬렉션, 뷰를 활용하여 실제로 인터랙티브 UI를 개발해 보겠습니다.

var books = new Library();

var book1 = new Book({ title: 'Book 1', author: 'Author 1', year: '2020' });
var book2 = new Book({ title: 'Book 2', author: 'Author 2', year: '2019' });

books.add([book1, book2]);

var bookListView = Backbone.View.extend({
  el: '#book-list',
  
  initialize: function() {
    this.listenTo(this.collection, 'add', this.addOne);
    this.render();
  },
  
  render: function() {
    this.collection.forEach(this.addOne, this);
  },
  
  addOne: function(book) {
    var view = new BookView({ model: book });
    this.$el.append(view.render().$el);
  }
});

var app = new bookListView({ collection: books });

위의 예시에서는 책 목록을 관리하기 위한 컬렉션과, 각 책의 상세 정보를 보여주는 뷰를 구현하였습니다. 뷰를 초기화하면 컬렉션에 있는 모든 책을 렌더링하게 됩니다.

이제 Backbone.js로 인터랙티브 UI를 개발하는 방법에 대해 알아보았습니다. Backbone.js의 강력한 기능을 활용하여 웹 애플리케이션을 더욱 유연하고 동적인 UI로 개발할 수 있습니다.

더 자세한 정보를 원하신다면 Backbone.js 공식 문서를 참고해보세요.

Happy coding!