Colin's Blog
[javascript] Backbone.js에서 데이터 동기화(Sync) 방법

Backbone.js는 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크로, 모델(Model), 뷰(View), 컬렉션(Collection) 등을 제공하여 구조적이고 유지보수가 쉬운 코드 작성을 도와줍니다. 이번 포스트에서는 Backbone.js에서 데이터 동기화(Sync) 방법에 대해 알아보겠습니다.

데이터 동기화(Sync)

Backbone.js에서 모델(Model)과 서버 간의 데이터를 동기화하기 위해 sync 메서드를 사용합니다. sync 메서드는 내부적으로 Ajax 요청을 처리하고 서버와의 데이터 통신을 담당합니다.

var MyModel = Backbone.Model.extend({
  urlRoot: '/api/mymodel',
});

var myModel = new MyModel();

myModel.fetch();

위의 예제 코드에서는 MyModel이라는 모델을 정의하고, urlRoot 속성을 설정하여 서버 API의 기본 경로를 지정합니다. 그리고 myModel.fetch() 메서드를 호출하여 서버로부터 데이터를 가져오는 동기화 작업을 수행합니다.

서버와의 상호작용

Backbone.js는 내부적으로 RESTful API를 따르는 방식으로 데이터를 서버와 송수신합니다. fetch, save, destroy 등의 메서드를 사용하여 데이터를 서버로 전송하고, 서버로부터 응답을 받아 모델의 속성을 업데이트합니다.

var myModel = new MyModel({ id: 1 });

myModel.fetch({
  success: function(model, response) {
    console.log('Fetch success!', response);
  },
  error: function(model, response) {
    console.error('Fetch error!', response);
  }
});

myModel.set('name', 'John Doe');

myModel.save(null, {
  success: function(model, response) {
    console.log('Save success!', response);
  },
  error: function(model, response) {
    console.error('Save error!', response);
  }
});

myModel.destroy({
  success: function(model, response) {
    console.log('Destroy success!', response);
  },
  error: function(model, response) {
    console.error('Destroy error!', response);
  }
});

위의 예제 코드에서는 myModel.fetch() 메서드를 호출하여 서버로부터 데이터를 가져옵니다. 그리고 myModel.set() 메서드를 사용하여 모델의 속성을 변경한 뒤, myModel.save() 메서드를 호출하여 변경된 데이터를 서버에 저장합니다. 마지막으로 myModel.destroy() 메서드를 사용하여 모델을 삭제합니다.

커스텀 동기화

Backbone.js에서는 sync 메서드를 오버라이드하여 커스텀 동기화 작업을 수행할 수도 있습니다. 이를 통해 서버와의 데이터 통신 방식을 자유롭게 변경하거나 기타 추가적인 작업을 처리할 수 있습니다.

var MyModel = Backbone.Model.extend({
  urlRoot: '/api/mymodel',
  
  sync: function(method, model, options) {
    if (method === 'create' || method === 'update') {
      options.url = this.urlRoot + '/' + model.id;
    }
    
    return Backbone.sync(method, model, options);
  }
});

위의 예제 코드에서는 sync 메서드를 오버라이드하여 서버 요청을 커스터마이징하고 있습니다. create 또는 update 메서드 호출 시 urlRoot와 모델의 id 속성을 조합하여 경로를 생성하고, Backbone.sync를 호출하여 실제 요청을 수행합니다.

결론

Backbone.js에서 제공하는 sync 메서드를 통해 서버와의 데이터 동기화 작업을 쉽게 처리할 수 있습니다. 필요에 따라 커스텀 동기화 작업을 수행할 수도 있으며, 이를 통해 더욱 강력하고 유연한 웹 애플리케이션 개발을 할 수 있습니다.

참고 문서:

© 2018 Colin. All rights reserved.