[javascript] Backbone.js에서 콜백(Callback) 구현 방법

22 Nov 2023

javascript

Backbone.js는 JavaScript 프레임워크로서, 애플리케이션의 로직을 구조화하고 효율적으로 관리할 수 있도록 도와줍니다. 콜백(Callback)은 비동기적인 작업을 다룰 때 주로 사용되며, Backbone.js에서도 다양한 방법으로 구현할 수 있습니다.

1. 이벤트 리스너를 이용한 콜백 구현

Backbone.js에서 가장 일반적으로 사용되는 콜백 구현 방법은 이벤트 리스너를 이용하는 것입니다. Backbone 모델이나 컬렉션에서 발생하는 이벤트에 대해 리스너를 등록하여, 해당 이벤트가 발생했을 때 원하는 작업을 수행할 수 있습니다.

var MyModel = Backbone.Model.extend({
  initialize: function() {
    this.on('change', this.onChange);
  },

  onChange: function() {
    console.log('Model changed!');
  }
});

var myModel = new MyModel();
myModel.set('name', 'John'); // onChange 이벤트 발생

위의 코드에서는 MyModel 모델의 change 이벤트에 대한 리스너를 등록하고, onChange 메소드를 실행하도록 설정하였습니다. set 메소드를 호출하여 모델을 변경하면 onChange 메소드가 실행되고, 콘솔에 Model changed!가 출력됩니다.

2. 콜백 함수로 전달하는 방법

또 다른 방법으로는 콜백 함수를 직접 전달하는 방법입니다. 이 경우에는 함수를 인자로 받아 해당 함수를 실행하는 방식으로 구현할 수 있습니다.

var MyModel = Backbone.Model.extend({
  initialize: function() {
    this.doSomething(this.onAction);
  },

  doSomething: function(callback) {
    // 비동기적인 작업 수행
    setTimeout(function(){
      callback();
    }, 1000);
  },

  onAction: function() {
    console.log('Action performed!');
  }
});

var myModel = new MyModel();

위의 코드에서는 doSomething 메소드에서 비동기적인 작업을 수행한 후, 전달받은 콜백 함수인 onAction을 실행하는 예제입니다. MyModel의 생성자에서 initialize 메소드가 호출되면, doSomething 메소드가 실행되고 1초 후 onAction 메소드가 실행되어 콘솔에 Action performed!이 출력됩니다.

3. 프로미스(Promise)를 이용한 방법

ES6부터 도입된 프로미스(Promise)는 비동기 작업을 처리하는 데 사용되는 객체입니다. Backbone.js에서도 프로미스를 지원하여, 비동기 작업의 완료 여부에 따라 콜백을 처리할 수 있습니다.

var MyModel = Backbone.Model.extend({
  initialize: function() {
    this.doSomething().then(this.onAction);
  },

  doSomething: function() {
    return new Promise(function(resolve, reject) {
      // 비동기적인 작업 수행
      setTimeout(function() {
        resolve();
      }, 1000);
    });
  },

  onAction: function() {
    console.log('Action performed!');
  }
});

var myModel = new MyModel();

위의 코드에서는 doSomething 메소드에서 비동기 작업을 프로미스로 감싸고, 작업이 완료되면 resolve 메소드를 호출하여 완료됨을 알립니다. 이후 then 메소드를 사용하여 onAction 메소드를 실행합니다. 마찬가지로 1초 후에 콘솔에 Action performed!이 출력됩니다.

결론

Backbone.js에서 콜백을 구현하는 다양한 방법을 살펴보았습니다. 이벤트 리스너, 콜백 함수 전달, 프로미스를 활용하는 방법 등을 사용하여 비동기적인 작업을 처리할 수 있습니다. 각각의 구현 방법은 특정 상황에 적합하므로, 프로젝트의 요구사항에 맞는 방법을 선택하여 사용해야 합니다.

1. 이벤트 리스너를 이용한 콜백 구현

2. 콜백 함수로 전달하는 방법

3. 프로미스(Promise)를 이용한 방법

결론

참고 자료