웹 애플리케이션을 개발할 때, 클라이언트 측에서 사용자 인터페이스와 데이터 처리를 분리하여 관리할 필요가 있습니다. 이를 위해 Backbone.js는 유용한 프론트엔드 프레임워크입니다.

Backbone.js란?

Backbone.js는 MVC (Model-View-Controller) 아키텍처를 따르는 자바스크립트 프레임워크입니다. MVC 아키텍처는 애플리케이션의 데이터, 사용자 인터페이스, 그리고 비즈니스 로직을 각각 모델, 뷰, 컨트롤러로 분리하여 개발하는 방식입니다.

시작하기

먼저, Backbone.js를 다운로드하고 HTML 파일에 포함해야 합니다. 다음과 같은 방법으로 사용할 수 있습니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>

모델(Model) 만들기

웹 애플리케이션의 데이터를 관리하기 위해 모델을 만들어야 합니다. 예를 들어, Todo 애플리케이션을 위한 Todo 모델을 생성해보겠습니다:

var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});

위 코드에서는 defaults를 사용해 모델의 기본 속성을 정의합니다.

뷰(View) 만들기

사용자에게 모델의 데이터를 보여주고, 사용자와 상호작용하는 인터페이스를 만들기 위해서는 뷰를 만들어야 합니다. 다음은 Todo 모델에 대한 뷰를 만드는 예입니다:

var TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#todo-template').html()),
  events: {
    'click .toggle': 'toggleCompleted',
    'click .delete': 'deleteTodo'
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  toggleCompleted: function() {
    this.model.set('completed', !this.model.get('completed'));
  },
  deleteTodo: function() {
    this.model.destroy();
    this.remove();
  }
});

위 코드에서는 뷰의 tagName을 li로 설정하고, 해당 뷰의 HTML 템플릿을 template 변수에 할당합니다. 또한, 사용자 이벤트에 대한 핸들러를 정의하고 뷰를 렌더링할 때 호출되는 render 메서드도 구현합니다.

컨트롤러(Controller) 만들기

컨트롤러는 모델과 뷰를 연결하고, 애플리케이션의 상태와 이벤트를 관리합니다. 다음은 Todo 애플리케이션의 컨트롤러를 만드는 예입니다:

var TodosController = Backbone.Router.extend({
  routes: {
    '': 'index',
    'new': 'create'
  },
  initialize: function() {
    this.todos = new TodoCollection();
    this.todosView = new TodosView({ collection: this.todos });
  },
  index: function() {
    this.todos.fetch();
  },
  create: function() {
    var todo = new Todo();
    this.todos.add(todo);
    this.todosView.render();
  }
});

위 코드에서는 컨트롤러의 라우터를 정의하고, initialize 메서드에서 모델과 뷰를 초기화합니다. index 메서드에서는 모델의 데이터를 서버에서 가져오고, create 메서드에서는 새로운 모델을 생성하여 모델 컬렉션에 추가하고 뷰를 렌더링합니다.

결론

Backbone.js를 사용하여 웹 애플리케이션을 개발하는 방법을 살펴보았습니다. Backbone.js는 간단하고 직관적인 API를 제공하며, MVC 아키텍처를 통해 프론트엔드의 데이터와 뷰를 효과적으로 관리할 수 있습니다.

더 자세한 내용은 Backbone.js 공식 홈페이지를 참조해주세요.

#BackboneJS #웹개발