[javascript] Backbone.js의 역할과 기능

22 Nov 2023

javascript

Backbone.js는 자바스크립트 기반의 웹 애플리케이션을 개발할 때 사용되는 프론트엔드 웹 프레임워크입니다. Backbone.js를 사용하면 애플리케이션을 구조화하고 모듈화할 수 있으며, 데이터와 뷰 사이의 상호작용을 용이하게 만들어 줍니다.

1. Model

Model은 Backbone.js의 핵심 요소 중 하나로, 애플리케이션의 데이터를 나타냅니다. Model은 서버에서 가져온 데이터를 저장하고 관리하며, 필요한 경우 서버로부터 데이터를 업데이트하거나 전송할 수도 있습니다. Model은 데이터를 변경할 수 있는 메서드나 이벤트를 제공하므로, 애플리케이션에서 데이터의 상태 변화를 감지하고 처리할 수 있습니다.

var User = Backbone.Model.extend({
    defaults: {
        name: '',
        age: 0
    },
    initialize: function() {
        console.log('User model initialized');
    }
});

var user = new User({ name: 'John', age: 25 });
console.log(user.get('name')); // 'John'

2. View

View는 애플리케이션의 사용자 인터페이스를 담당하는 역할을 합니다. View는 HTML 템플릿과 JavaScript 로직을 조합하여 화면에 표시될 내용을 구성합니다. Backbone.js는 View로부터 이벤트를 수신하여 필요한 로직을 처리하거나 Model과의 상호작용을 담당합니다.

var UserView = Backbone.View.extend({
    el: '#user-container',
    template: _.template('<p>Name: <%= name %></p>'),
    events: {
        'click button': 'showAge'
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    },
    showAge: function() {
        console.log('Age: ' + this.model.get('age'));
    }
});

var userView = new UserView({ model: user });
userView.render();

3. Router

Router는 Backbone.js의 또 다른 주요한 기능으로, URL 경로와 애플리케이션의 상태를 매핑합니다. Router를 사용하면 URL의 변화에 따라 해당하는 적절한 View를 표시하거나 로직을 수행할 수 있습니다. 또한, Router는 브라우저의 뒤로 가기와 같은 기능을 구현할 수 있어 사용자 경험을 향상시킵니다.

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'user/:id': 'userDetails'
    },
    home: function() {
        console.log('Home page');
    },
    userDetails: function(id) {
        console.log('User details for: ' + id);
    }
});

var appRouter = new AppRouter();
Backbone.history.start();

결론

Backbone.js는 자바스크립트 기반의 웹 애플리케이션 개발을 위한 강력한 도구입니다. Model, View, Router 등의 구성요소를 통해 애플리케이션을 구조화하고 유지보수하기 쉽게 만들어 주며, 강력한 이벤트 시스템을 통해 사용자 인터페이스와 데이터의 상호작용을 용이하게 할 수 있습니다.

참고 자료: