Backbone.js는 웹 애플리케이션을 개발할 때 사용되는 JavaScript 프레임워크입니다. Backbone.js는 Model-View-Controller (MVC) 패턴을 기반으로 하며, 모델의 데이터를 저장하고 관리하는 방법에 대한 내용을 다루고 있습니다.
데이터를 저장하기 위해 Backbone.js에서는 다양한 방법을 제공합니다. 이 글에서는 로컬 스토리지 (Local Storage)와 서버와의 통신을 통한 데이터 저장 방법에 대해 알아보겠습니다.
1. 로컬 스토리지 (Local Storage)
로컬 스토리지는 웹 브라우저에 데이터를 저장할 수 있는 기능을 제공합니다. Backbone.js에서는 모델의 데이터를 로컬 스토리지에 저장하여 재사용할 수 있습니다.
var Book = Backbone.Model.extend({
localStorage: new Backbone.LocalStorage('books'), // 로컬 스토리지 객체 생성 및 식별자 설정
defaults: {
title: '',
author: ''
}
});
var myBook = new Book({ title: 'Backbone.js Guide', author: 'John Doe' });
myBook.save(); // 모델의 데이터를 로컬 스토리지에 저장
위의 예제에서는 Book 모델을 생성하고, localStorage 객체를 생성하여 식별자를 ‘books’로 설정합니다. myBook 인스턴스의 save() 메서드를 호출하면 모델의 데이터가 로컬 스토리지에 저장됩니다.
로컬 스토리지를 사용하려면 backbone.localStorage.js 파일을 추가로 로드해야 합니다. 이 파일은 localStorage 객체를 Backbone.js에서 사용할 수 있도록 기능을 제공합니다.
2. 서버와의 통신
데이터를 서버에 저장하고 관리할 경우, Backbone.js는 RESTful API를 통해 서버와 통신합니다. 이를 통해 모델의 데이터를 서버에 저장하거나 서버로부터 데이터를 가져올 수 있습니다.
var Book = Backbone.Model.extend({
urlRoot: '/api/books', // 서버의 API 엔드포인트 설정
defaults: {
title: '',
author: ''
}
});
var myBook = new Book({ title: 'Backbone.js Guide', author: 'John Doe' });
myBook.save(); // 모델의 데이터를 서버에 저장
위의 예제에서는 Book 모델을 생성하고, urlRoot 속성을 설정하여 서버의 API 엔드포인트를 지정합니다. myBook 인스턴스의 save() 메서드를 호출하면 모델의 데이터가 서버에 저장됩니다.
서버와의 통신을 위해서는 서버 측에서 해당 API 엔드포인트에 대한 처리 로직을 구현해야 합니다.