1. AJAX를 통한 통신

Marionette.js에서 가장 일반적으로 사용되는 클라이언트-서버 통신 방법은 AJAX입니다. AJAX는 비동기적으로 서버와 통신할 수 있는 기능을 제공합니다. Marionette.js에서는 jQuery.ajax() 메서드를 사용하여 AJAX 요청을 보내고, 서버로부터 받은 데이터를 처리할 수 있습니다. 아래는 Marionette.js에서 AJAX를 사용한 예시 코드입니다.

const MyModel = Backbone.Model.extend({
  url: '/api/myModel',
});

const MyView = Marionette.View.extend({
  initialize() {
    this.model = new MyModel();
    this.model.fetch();
  },
});

2. RESTful API를 활용한 통신

Marionette.js는 RESTful API를 활용하여 클라이언트와 서버 간의 통신을 처리하는 것을 적극 권장합니다. RESTful API를 사용하면 클라이언트와 서버 간의 자원을 표현하고 관리할 수 있으며, 간편하고 일관된 통신 방식을 제공합니다. Marionette.js에서는 Backbone.js의 모델과 컬렉션을 사용하여 RESTful API와 통신할 수 있습니다. 아래는 Marionette.js에서 RESTful API를 활용한 예시 코드입니다.

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

const MyCollection = Marionette.CollectionView.extend({
  initialize() {
    this.collection = new MyModel.Collection();
    this.collection.fetch();
  },
});

3. WebSocket을 이용한 실시간 통신

Marionette.js는 WebSocket을 활용하여 클라이언트와 서버 간의 실시간 통신을 지원합니다. 웹 소켓은 서버와 클라이언트 간의 양방향 통신을 제공하며, 실시간 데이터 업데이트에 효과적입니다. Marionette.js에서는 Backbone.Radio.channel을 통해 WebSocket을 관리하고, 이를 사용하여 실시간 데이터를 주고받을 수 있습니다. 아래는 Marionette.js에서 WebSocket을 이용한 예시 코드입니다.

const MyModel = Backbone.Model.extend({
  initialize() {
    this.channel = Backbone.Radio.channel('myModel');
    this.listenTo(this.channel, 'update', this.handleUpdate);
  },
  
  handleUpdate(data) {
    // 실시간 업데이트 처리
  },
});

const MyView = Marionette.View.extend({
  initialize() {
    this.model = new MyModel();
    this.model.channel.trigger('update', { message: 'Hello, World!' });
  },
});

Marionette.js에서는 위와 같은 클라이언트-서버 통신 방법을 조합하여 복잡한 애플리케이션을 개발할 수 있습니다. Marionette.js의 강력한 기능을 활용하여 웹 애플리케이션을 구축하는 과정에서 적절한 통신 방법을 선택하여 사용하면 됩니다.