Quickstarters
Backbone.js로 CRUD 앱 만드는 방법? 단계별 튜토리얼

42min
소개
이 가이드를 통해 Backbone.js를 사용하여 기능적인 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배울 수 있습니다.
이 워크스루는 CRUD 시스템을 구성하여 데이터를 효과적으로 조작하고 관리하는 방법을 보여줌으로써 웹 애플리케이션의 핵심 작업을 이해하는 데 도움을 줄 것입니다.
먼저, 애플리케이션의 신뢰할 수 있는 백엔드 역할을 할 Basic-CRUD-App-Backbone이라는 제목의 Back4app 프로젝트를 설정합니다.
그 후, 특정 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다. 이는 수동으로 하거나 Back4app AI 에이전트의 도움을 받을 수 있습니다. 이 과정은 데이터 구조가 원활한 CRUD 상호작용을 위해 맞춤화되도록 보장합니다.
다음으로, 드래그 앤 드롭 인터페이스가 있는 직관적인 Back4app 관리 앱을 사용하여 데이터 컬렉션을 쉽게 처리합니다. 이 도구는 CRUD 작업을 단순화하여 백엔드 데이터 관리를 간단하게 만듭니다.
마지막으로, Backbone.js 프론트엔드를 REST API를 사용하여 Back4app에 연결하고, 가이드는 백엔드와 상호작용하기 위해 표준 API 호출에 의존합니다. 또한 강력한 접근 제어로 데이터를 보호하는 방법도 배울 것입니다.
이 튜토리얼이 끝나면 CRUD 기능을 지원하고 사용자 인증 및 고급 데이터 관리 기능이 포함된 프로덕션 준비가 완료된 웹 애플리케이션을 구축하게 될 것입니다.
주요 요점
신뢰할 수 있는 백엔드 서비스를 사용하여 데이터를 효과적으로 처리하는 CRUD 애플리케이션 구축 기술을 마스터하세요.
확장 가능한 데이터베이스 설계를 만들고 이를 Backbone.js 프론트엔드와 통합하는 전략을 발견하세요.
Back4app 관리 앱의 드래그 앤 드롭 기능을 사용하여 생성, 읽기, 업데이트 및 삭제 작업을 간소화하는 방법을 배우세요.
애플리케이션을 신속하게 배포하기 위한 Docker 컨테이너화 등 배포 방법에 익숙해지세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
Back4app 계정과 활성 프로젝트가 필요합니다.
안내가 필요하면 Back4app 시작하기를 참조하세요.
Backbone.js 개발 환경이 필요합니다.
npm과 같은 패키지 관리자를 통해 또는 CDN에서 직접 링크하여 Backbone.js를 포함할 수 있습니다.
JavaScript, Backbone.js 및 RESTful API에 대한 기본 이해가 필요합니다.
필요한 경우 Backbone.js 문서를 확인하세요.
﻿
1단계 – 프로젝트 초기화
Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요. 
프로젝트 이름을 지정하세요: Basic-CRUD-App-Backbone 및 설정을 완료하세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에서 확인할 수 있으며, 애플리케이션의 백엔드로 구성할 준비가 됩니다.
﻿
2단계 – 데이터베이스 스키마 작성
데이터 모델 정의하기
이 CRUD 애플리케이션을 위해 여러 컬렉션을 설정할 것입니다. 아래는 스키마를 설정하는 데 필요한 필드와 유형이 포함된 샘플 컬렉션입니다. 이를 통해 애플리케이션이 모든 CRUD 작업을 수행할 수 있도록 합니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 보관합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 개요.
생성일
날짜
항목이 추가된 시간을 나타내는 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 사용자 컬렉션
이 컬렉션은 사용자 세부정보 및 인증 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전하게 해시된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
사용자 데이터의 마지막 수정 타임스탬프.
이러한 컬렉션은 Back4app 대시보드를 통해 수동으로 생성할 수 있으며, 각 컬렉션에 대해 새 클래스를 추가하고 해당 필드를 구성하면 됩니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 설정하고, 필요한 경우 기본값을 제공하며, 필드를 필수로 표시하기만 하면 됩니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 데이터베이스 스키마 생성을 자동화하는 데 도움이 되는 대시보드 내의 유용한 도구입니다.
원하는 컬렉션과 필드에 대한 설명적인 프롬프트를 입력함으로써, AI 에이전트는 필요한 데이터베이스 구조를 신속하게 생성하여 시간을 절약하고 일관성을 보장할 수 있습니다.
AI 에이전트 사용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드에 로그인하고 탐색 또는 프로젝트 설정에서 AI 에이전트를 찾습니다.
데이터 모델 세부정보 입력하기:
필요한 컬렉션과 필드를 설명하는 프롬프트를 입력합니다.
검토 및 적용하기:
제안된 스키마를 평가하고 프로젝트에 변경 사항을 적용합니다.
샘플 프롬프트
Text
Create the following collections for my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections for my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
AI 에이전트를 활용하면 애플리케이션의 요구 사항에 맞게 스키마가 적절하게 구조화됩니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 관리
관리 앱 소개
Back4app 관리 앱은 백엔드 데이터를 효율적으로 관리할 수 있는 코드 없는 인터페이스입니다.
직관적인 드래그 앤 드롭 디자인 덕분에 레코드를 추가, 보기, 수정 및 삭제하는 CRUD 작업을 매우 간단하게 수행할 수 있습니다.
관리자 앱 활성화
“더보기” 메뉴 열기 Back4app 대시보드에서.
“관리자 앱” 선택하기 그리고 “관리자 앱 활성화.”
관리자 자격 증명 설정하기 초기 관리자 계정을 생성하여. 이 단계는 역할(예: B4aAdminUser) 및 시스템 컬렉션을 설정합니다.
관리자 앱 활성화
﻿
활성화 후, 데이터 처리를 원활하게 하기 위해 관리자 앱에 로그인하세요.
관리자 앱 대시보드
﻿
관리자 앱을 사용한 CRUD 작업 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 항목 추가: 모든 컬렉션(예: 항목)에서 “레코드 추가” 옵션을 사용하여 새 항목을 생성합니다.
레코드 보기/수정: 레코드를 클릭하여 세부 정보를 검사하거나 변경합니다.
레코드 제거: 삭제 기능을 사용하여 원하지 않는 데이터를 삭제합니다.
이 인터페이스는 모든 데이터 관리 작업을 간소화하여 사용자 경험을 향상시킵니다.
﻿
4단계 – Backbone.js와 Back4app 연결하기
이제 백엔드가 구성되었으므로 Backbone.js 프론트엔드를 Back4app과 통합할 시간입니다.
REST API 호출을 사용한 Backbone.js 사용
Parse SDK가 Backbone.js에 맞춰져 있지 않기 때문에, Backbone의 내장 모델, 컬렉션 및 뷰를 REST API 호출과 함께 사용하여 Back4app과 상호작용합니다.
Backbone 모델 및 컬렉션 설정하기
항목에 대한 모델과 해당 컬렉션을 정의하는 것으로 시작하십시오. 예를 들어:
JS
// models/Item.js
var Item = Backbone.Model.extend({
  urlRoot: 'https://parseapi.back4app.com/classes/Items',
  idAttribute: 'objectId',
  defaults: {
    title: '',
    description: ''
  }
});
export default Item;
// models/Item.js
var Item = Backbone.Model.extend({
  urlRoot: 'https://parseapi.back4app.com/classes/Items',
  idAttribute: 'objectId',
  defaults: {
    title: '',
    description: ''
  }
});
export default Item;
﻿
JS
// collections/ItemsCollection.js
import Item from '../models/Item';
var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  url: 'https://parseapi.back4app.com/classes/Items',
  parse: function(response) {
    return response.results;
  }
});
export default ItemsCollection;
// collections/ItemsCollection.js
import Item from '../models/Item';
var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  url: 'https://parseapi.back4app.com/classes/Items',
  parse: function(response) {
    return response.results;
  }
});
export default ItemsCollection;
﻿
CRUD 상호작용을 위한 Backbone View 구축
항목 목록을 렌더링하고 추가, 편집 및 삭제와 같은 사용자 작업을 처리하는 뷰를 만듭니다.
JS
// views/ItemsView.js
import Backbone from 'backbone';
import _ from 'underscore';
import ItemsCollection from '../collections/ItemsCollection';

var ItemsView = Backbone.View.extend({
  el: '#app',
  initialize: function() {
    this.collection = new ItemsCollection();
    this.listenTo(this.collection, 'sync update', this.render);
    this.collection.fetch({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
  },
  events: {
    'click #add-item': 'addItem',
    'click .delete-item': 'deleteItem',
    'click .edit-item': 'editItem',
    'click #save-edit': 'saveEdit'
  },
  render: function() {
    var template = _.template(`
      <h2>Items</h2>
      <div>
        <input id="new-title" type="text" placeholder="Title">
        <input id="new-description" type="text" placeholder="Description">
        <button id="add-item">Add Item</button>
      </div>
      <ul>
        <% collection.each(function(item) { %>
          <li data-id="<%= item.id %>">
            <strong><%= item.get('title') %></strong> - <%= item.get('description') %>
            <button class="edit-item">Edit</button>
            <button class="delete-item">Delete</button>
          </li>
        <% }); %>
      </ul>
      <div id="edit-section" style="display:none;">
        <input id="edit-title" type="text">
        <input id="edit-description" type="text">
        <button id="save-edit">Save</button>
      </div>
    `);
    this.$el.html(template({ collection: this.collection }));
    return this;
  },
  addItem: function() {
    var title = this.$('#new-title').val();
    var description = this.$('#new-description').val();
    var newItem = this.collection.create(
      { title: title, description: description },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        wait: true,
        success: function() {
          console.log('Item added successfully.');
        },
        error: function(error) {
          console.error('Failed to add item:', error);
        }
      }
    );
  },
  deleteItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    item.destroy({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function() {
        console.log('Item removed.');
      },
      error: function(error) {
        console.error('Error deleting item:', error);
      }
    });
  },
  editItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    this.$('#edit-section').show();
    this.$('#edit-title').val(item.get('title'));
    this.$('#edit-description').val(item.get('description'));
    this.currentEditId = itemId;
  },
  saveEdit: function() {
    var newTitle = this.$('#edit-title').val();
    var newDescription = this.$('#edit-description').val();
    var item = this.collection.get(this.currentEditId);
    item.save(
      { title: newTitle, description: newDescription },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        success: function() {
          console.log('Item updated.');
        },
        error: function(error) {
          console.error('Update failed:', error);
        }
      }
    );
    this.$('#edit-section').hide();
  }
});

export default ItemsView;
// views/ItemsView.js
import Backbone from 'backbone';
import _ from 'underscore';
import ItemsCollection from '../collections/ItemsCollection';

var ItemsView = Backbone.View.extend({
  el: '#app',
  initialize: function() {
    this.collection = new ItemsCollection();
    this.listenTo(this.collection, 'sync update', this.render);
    this.collection.fetch({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
  },
  events: {
    'click #add-item': 'addItem',
    'click .delete-item': 'deleteItem',
    'click .edit-item': 'editItem',
    'click #save-edit': 'saveEdit'
  },
  render: function() {
    var template = _.template(`
      <h2>Items</h2>
      <div>
        <input id="new-title" type="text" placeholder="Title">
        <input id="new-description" type="text" placeholder="Description">
        <button id="add-item">Add Item</button>
      </div>
      <ul>
        <% collection.each(function(item) { %>
          <li data-id="<%= item.id %>">
            <strong><%= item.get('title') %></strong> - <%= item.get('description') %>
            <button class="edit-item">Edit</button>
            <button class="delete-item">Delete</button>
          </li>
        <% }); %>
      </ul>
      <div id="edit-section" style="display:none;">
        <input id="edit-title" type="text">
        <input id="edit-description" type="text">
        <button id="save-edit">Save</button>
      </div>
    `);
    this.$el.html(template({ collection: this.collection }));
    return this;
  },
  addItem: function() {
    var title = this.$('#new-title').val();
    var description = this.$('#new-description').val();
    var newItem = this.collection.create(
      { title: title, description: description },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        wait: true,
        success: function() {
          console.log('Item added successfully.');
        },
        error: function(error) {
          console.error('Failed to add item:', error);
        }
      }
    );
  },
  deleteItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    item.destroy({
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function() {
        console.log('Item removed.');
      },
      error: function(error) {
        console.error('Error deleting item:', error);
      }
    });
  },
  editItem: function(e) {
    var itemId = $(e.currentTarget).closest('li').data('id');
    var item = this.collection.get(itemId);
    this.$('#edit-section').show();
    this.$('#edit-title').val(item.get('title'));
    this.$('#edit-description').val(item.get('description'));
    this.currentEditId = itemId;
  },
  saveEdit: function() {
    var newTitle = this.$('#edit-title').val();
    var newDescription = this.$('#edit-description').val();
    var item = this.collection.get(this.currentEditId);
    item.save(
      { title: newTitle, description: newDescription },
      {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        success: function() {
          console.log('Item updated.');
        },
        error: function(error) {
          console.error('Update failed:', error);
        }
      }
    );
    this.$('#edit-section').hide();
  }
});

export default ItemsView;
﻿
이 뷰는 REST API를 사용하여 Back4app에서 항목을 가져오고 레코드를 추가, 편집 및 삭제할 수 있게 해줍니다.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
객체에 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 항목의 접근을 생성자에게만 제한하려면:
JS
function createSecureItem(itemData, owner) {
  var Item = Backbone.Model.extend({ urlRoot: 'https://parseapi.back4app.com/classes/Items' });
  var item = new Item();
  item.set({ title: itemData.title, description: itemData.description });

  // Assume a custom API call or configuration that assigns ACLs based on the owner
  // Here you would include ACL headers or a similar mechanism as needed

  item.save(null, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    success: function(savedItem) {
      console.log('Secure item created:', savedItem);
    },
    error: function(err) {
      console.error('Error creating secure item:', err);
    }
  });
}
function createSecureItem(itemData, owner) {
  var Item = Backbone.Model.extend({ urlRoot: 'https://parseapi.back4app.com/classes/Items' });
  var item = new Item();
  item.set({ title: itemData.title, description: itemData.description });

  // Assume a custom API call or configuration that assigns ACLs based on the owner
  // Here you would include ACL headers or a similar mechanism as needed

  item.save(null, {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    success: function(savedItem) {
      console.log('Secure item created:', savedItem);
    },
    error: function(err) {
      console.error('Error creating secure item:', err);
    }
  });
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 설정하여 권한이 있는 사용자만 민감한 데이터에 접근하거나 수정할 수 있도록 하세요.
﻿
6단계 – 사용자 인증
Backbone.js에서 사용자 계정 설정하기
Back4app은 인증을 위해 Parse의 User 클래스와 유사한 사용자 관리 시스템을 활용합니다. Backbone.js 애플리케이션에서 AJAX 호출을 사용하여 Back4app REST API를 통해 사용자 등록 및 로그인을 처리할 수 있습니다.
예를 들어, 새 사용자를 등록하려면:
JS
function signUpUser(username, password, email) {
  $.ajax({
    url: 'https://parseapi.back4app.com/users',
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    data: JSON.stringify({
      username: username,
      password: password,
      email: email
    }),
    success: function(response) {
      alert('User registered successfully!');
    },
    error: function(error) {
      alert('Error during registration: ' + error.responseJSON.error);
    }
  });
}
function signUpUser(username, password, email) {
  $.ajax({
    url: 'https://parseapi.back4app.com/users',
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    data: JSON.stringify({
      username: username,
      password: password,
      email: email
    }),
    success: function(response) {
      alert('User registered successfully!');
    },
    error: function(error) {
      alert('Error during registration: ' + error.responseJSON.error);
    }
  });
}
﻿
유저 로그인 및 세션 관리를 위해 유사한 방법을 적용할 수 있습니다.
﻿
7단계 – Backbone.js 프론트엔드 배포하기
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리와 연결하여 Backbone.js 애플리케이션을 원활하게 호스팅할 수 있습니다.
7.1 프로덕션 빌드 생성하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 프로세스를 실행합니다:
작업 실행기나 번들러(예: Webpack 또는 Gulp)를 사용하는 경우, 명령어를 실행합니다(예: npm run build) 최적화된 정적 자산을 생성합니다.
빌드를 확인합니다:
빌드 출력 디렉토리에 주요 HTML 파일과 모든 필요한 자산 폴더가 포함되어 있는지 확인합니다.
﻿
7.2 소스 코드 정리 및 푸시하기
GitHub 리포지토리에는 Backbone.js 앱의 모든 소스 파일이 포함되어야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Backbone/
|-- bower_components/
|-- public/
|    └── index.html
|-- src/
|    ├── models/
|    │    └── Item.js
|    ├── collections/
|    │    └── ItemsCollection.js
|    ├── views/
|    │    └── ItemsView.js
|    └── app.js
|-- package.json
|-- README.md
Basic-CRUD-App-Backbone/
|-- bower_components/
|-- public/
|    └── index.html
|-- src/
|    ├── models/
|    │    └── Item.js
|    ├── collections/
|    │    └── ItemsCollection.js
|    ├── views/
|    │    └── ItemsView.js
|    └── app.js
|-- package.json
|-- README.md
﻿
샘플 구성 파일
src/app.js
JS
import Backbone from 'backbone';
import ItemsView from './views/ItemsView';

$(document).ready(function() {
  new ItemsView();
});
import Backbone from 'backbone';
import ItemsView from './views/ItemsView';

$(document).ready(function() {
  new ItemsView();
});
﻿
GitHub에 푸시하기
Git 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Backbone.js 프론트엔드 코드의 초기 커밋"
git commit -m "Backbone.js 프론트엔드 코드의 초기 커밋"
﻿
GitHub 리포지토리 생성하기 (예: Basic-CRUD-App-Backbone)입니다.
리포지토리 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Backbone.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Backbone.git
git push -u origin main
﻿
﻿
7.3 Back4app 웹 배포와 리포지토리 통합하기
웹 배포 섹션에 접근하기:
Back4app 대시보드에서 프로젝트로 이동하여 웹 배포 옵션을 클릭합니다.
GitHub 계정 연결하기:
Back4app이 리포지토리에 접근할 수 있도록 권한을 부여하는 안내를 따릅니다.
리포지토리와 브랜치 선택하기:
당신의 Basic-CRUD-App-Backbone 리포지토리와 메인 브랜치를 선택합니다.
﻿
7.4 배포 구성
추가 설정을 제공하십시오:
빌드 명령어:
사전 빌드된 자산이 없으면, 앱을 빌드하기 위한 명령어를 지정하십시오 (예: npm run build).
출력 디렉토리:
정적 파일이 포함된 폴더를 지정하십시오 (예: public 또는 dist).
환경 변수:
필요한 API 키나 구성을 추가하십시오.
﻿
7.5 Backbone.js 프로젝트 도커화
배포를 위해 Docker를 선택하면, 다음과 유사한 Dockerfile을 포함하십시오:
Dockerfile
# Use an official Node image to build the application
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire project and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/public /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image to build the application
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire project and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/public /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
원하는 경우 Docker 배포를 사용하도록 Back4app을 구성하십시오.
﻿
7.6 애플리케이션 시작하기
배포 버튼 클릭:
구성이 완료되면 배포 버튼을 클릭하십시오.
빌드 모니터링:
Back4app이 코드를 가져오고, 빌드 프로세스를 실행하며, 컨테이너화된 앱을 배포합니다.
실시간 URL 가져오기:
배포 후 Backbone.js 앱이 호스팅되는 URL이 제공됩니다.
﻿
7.7 배포 확인하기
제공된 URL 방문:
브라우저에서 URL을 열어 앱이 올바르게 로드되는지 확인하십시오.
기능 테스트:
탐색, 데이터 가져오기 및 CRUD 작업이 예상대로 작동하는지 확인하십시오.
문제 해결:
브라우저 도구와 Back4app 로그를 사용하여 문제를 해결하십시오.
﻿
8단계 – 결론 및 향후 방향
잘 하셨습니다! Backbone.js와 Back4app을 사용하여 CRUD 애플리케이션을 성공적으로 구축했습니다. 
"Basic-CRUD-App-Backbone"이라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 컬렉션을 정의하며, 관리 앱을 사용하여 백엔드를 관리했습니다. 
또한, REST API 호출을 통해 Backbone.js 프론트엔드를 통합하고 필수 보안 조치를 적용했습니다.
다음 단계:
프론트엔드 개선:
더 많은 세부 보기, 검색 기능 및 실시간 업데이트로 Backbone.js 앱을 확장하세요.
새 기능 추가:
더 고급 백엔드 로직, 서드파티 API 또는 세분화된 접근 제어를 통합하는 것을 고려하세요.
추가 학습:
성능 개선 및 사용자 정의 통합에 대한 더 많은 통찰력을 얻으려면 Back4app 문서를 방문하세요.
이 튜토리얼을 따라 하면서 이제 Back4app을 사용하여 Backbone.js 애플리케이션을 위한 강력하고 확장 가능한 CRUD 백엔드를 만들 수 있는 전문 지식을 갖추게 되었습니다. 코딩을 즐기고 새로운 기능을 탐색하세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 개요.
생성일	날짜	항목이 추가된 시간을 나타내는 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전하게 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	사용자 데이터의 마지막 수정 타임스탬프.
업데이트됨 24 Feb 2025
이 페이지가 도움이 되었습니까?
SwiftUI로 기본 CRUD 애플리케이션을 개발하는 방법?
네이티브스크립트를 사용하여 기본 CRUD 모바일 앱 개발하는 방법?