[javascript] Marionette.js에서 사용되는 CRUD(Creation, Retrieval, Update, Deletion) 작업과 RESTful API는 어떻게 구현하는가?

29 Nov 2023

javascript

Marionette.js에서 CRUD 작업과 RESTful API 구현하기

Marionette.js는 Backbone.js를 기반으로 한 JavaScript 애플리케이션 개발 프레임워크로, 모델 및 컬렉션을 사용하여 데이터를 관리할 수 있습니다. 이번 포스트에서는 Marionette.js를 사용하여 CRUD 작업과 RESTful API를 구현하는 방법에 대해 알아보겠습니다.

1. 모델 및 컬렉션 설정하기

Marionette.js에서 CRUD 작업을 위해 우선 모델과 컬렉션을 설정해야 합니다. 모델은 데이터를 표현하는 단위이고, 컬렉션은 여러 모델을 그룹화하여 관리하는 역할을 합니다. 아래는 예시 모델과 컬렉션입니다.

var Book = Backbone.Model.extend({
  urlRoot: '/api/books' // RESTful API endpoint
});

var BookCollection = Backbone.Collection.extend({
  model: Book,
  url: '/api/books' // RESTful API endpoint
});

2. RESTful API와 연결하기

RESTful API와 연결하기 위해 모델과 컬렉션에서 API 엔드포인트를 설정해야 합니다. 위의 예시 코드에서는 /api/books 엔드포인트를 사용하고 있습니다. 실제 서버에서 제공하는 API 엔드포인트와 맞춰야 합니다.

3. 데이터 생성하기 (Create)

새로운 데이터를 생성하기 위해서는 컬렉션에 새로운 모델을 추가해야 합니다. 아래는 예시 코드입니다.

var bookCollection = new BookCollection();

bookCollection.create({
  title: 'The Art of Programming',
  author: 'John Doe'
}, {
  success: function(model, response) {
    console.log('New book created!', model);
  },
  error: function(model, response) {
    console.error('Failed to create new book!', response);
  }
});

4. 데이터 조회하기 (Retrieve)

데이터 조회는 컬렉션에서 모델을 가져오는 작업을 말합니다. 아래는 예시 코드입니다.

var bookCollection = new BookCollection();

bookCollection.fetch({
  success: function(collection, response) {
    console.log('Books retrieved!', collection);
  },
  error: function(collection, response) {
    console.error('Failed to retrieve books!', response);
  }
});

5. 데이터 업데이트하기 (Update)

데이터 업데이트는 특정 모델의 속성을 변경하는 작업을 말합니다. 아래는 예시 코드입니다.

var book = new Book({ id: 1 });

book.fetch({
  success: function(model, response) {
    model.set('title', 'Updated Title');
    model.save(null, {
      success: function(model, response) {
        console.log('Book updated!', model);
      },
      error: function(model, response) {
        console.error('Failed to update book!', response);
      }
    });
  },
  error: function(model, response) {
    console.error('Failed to fetch book!', response);
  }
});

6. 데이터 삭제하기 (Delete)

데이터 삭제는 특정 모델을 컬렉션에서 제거하는 작업을 말합니다. 아래는 예시 코드입니다.

var book = new Book({ id: 1 });

book.destroy({
  success: function(model, response) {
    console.log('Book deleted!', model);
  },
  error: function(model, response) {
    console.error('Failed to delete book!', response);
  }
});