How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

42min
소개
이 가이드에서는 Marionette.js를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배웁니다.
이 튜토리얼에서는 데이터 작업을 효율적으로 관리하는 애플리케이션을 설정하는 방법을 보여줍니다. 먼저 Basic-CRUD-App-MarionetteJS,라는 Back4app 프로젝트를 설정하는 것으로 시작합니다. 이 프로젝트는 애플리케이션의 강력한 백엔드 역할을 합니다.
프로젝트를 구성한 후, 수집 및 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다. 이는 수동으로 하거나 Back4app AI 에이전트의 도움을 받을 수 있습니다. 이 접근 방식은 백엔드가 잘 정리되고 CRUD 작업을 신뢰성 있게 처리할 수 있도록 보장합니다.
다음으로, Back4app 관리 앱을 사용하여 수집을 손쉽게 관리할 수 있는 드래그 앤 드롭 인터페이스를 사용하여 생성, 읽기, 업데이트 및 삭제 작업을 쉽게 수행할 수 있습니다.
마지막으로, Marionette.js 프론트엔드를 Back4app과 REST/GraphQL(또는 해당되는 경우 Parse SDK)을 사용하여 통합하면서 백엔드가 고급 액세스 제어로 안전하게 유지되도록 합니다.
이 튜토리얼이 끝나면 CRUD 작업과 사용자 인증 및 안전한 데이터 관리를 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 됩니다.
주요 내용
강력한 백엔드를 사용하여 데이터를 효과적으로 관리하는 CRUD 애플리케이션을 구축합니다.
확장 가능한 백엔드를 생성하고 이를 Marionette.js 프론트엔드에 연결하는 방법에 대한 통찰력을 얻습니다.
데이터 작업을 간소화하기 위해 코드 없는 관리 인터페이스(Back4app Admin App)를 사용하는 방법을 배웁니다.
애플리케이션을 신속하게 배포하기 위한 Docker 컨테이너화 등 배포 기술을 이해합니다.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
새 프로젝트가 설정된 Back4app 계정입니다.
안내를 보려면 Back4app 시작하기를 참조하세요.
Marionette.js 개발 환경입니다.
Marionette.js용 보일러플레이트 또는 스타터 키트를 사용할 수 있습니다. Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Marionette.js 및 REST API에 대한 기본 이해입니다.
자세한 내용은 Marionette.js 문서를 참조하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
“새 앱” 버튼을 클릭하세요 대시보드에서.
프로젝트 이름을 지정하세요: Basic-CRUD-App-MarionetteJS 및 프롬프트를 완료하세요.
새 프로젝트 만들기
﻿
프로젝트를 생성한 후, 대시보드에 나타나며 백엔드 구성 및 관리의 기초를 제공합니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 만들기
이 CRUD 앱을 위해 여러 컬렉션을 정의할 것입니다. 데이터베이스를 지원할 필드와 데이터 유형을 포함하여 생성할 수 있는 컬렉션의 예는 다음과 같습니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간단한 요약.
생성일
날짜
항목이 생성된 시간의 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 프로필 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
사용자 인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성의 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
Back4app 대시보드에서 각 컬렉션에 대해 새 클래스를 생성하고 해당 필드를 정의하여 수동으로 이러한 컬렉션을 추가할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 이름을 제공하고, 기본값을 설정하며, 필요한 경우 필수로 표시하여 필드를 생성할 수 있습니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 설명 프롬프트에서 컬렉션과 필드를 생성하여 스키마 생성을 간소화합니다.
AI 에이전트 사용 방법:
AI 에이전트 시작하기:
Back4app 대시보드 메뉴 또는 프로젝트 설정을 통해 접근합니다.
데이터 모델 설명하기:
필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 붙여넣습니다.
검토 및 확인:
제안된 스키마를 검토하고 프로젝트에 적용합니다.
샘플 프롬프트
Text
Create these collections in 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 these collections in 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)
﻿
이 방법은 시간을 절약하고 데이터베이스 스키마의 일관성을 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 수행
관리자 앱 개요
Back4app 관리자 앱은 백엔드 데이터를 관리하기 위한 코드 없는 드래그 앤 드롭 인터페이스를 제공합니다. 레코드를 생성, 읽기, 업데이트 및 삭제하는 CRUD 작업을 간소화합니다.
관리자 앱 활성화하기
“더보기” 메뉴를 열어보세요 Back4app 대시보드에서.
“관리자 앱” 선택 그런 다음 클릭하세요 “관리자 앱 활성화.”
관리자 자격 증명 설정 관리자를 생성하여 기본 역할을 구성합니다. 예를 들어 B4aAdminUser.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 컬렉션을 관리하세요.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 사용
레코드 생성: “레코드 추가” 버튼을 사용하여 컬렉션에 새 항목을 삽입하세요.
레코드 읽기/업데이트: 레코드를 클릭하여 세부 정보를 보거나 수정하세요.
레코드 삭제: 삭제 옵션을 사용하여 오래된 레코드를 제거하세요.
이 직관적인 인터페이스는 데이터 관리를 단순화하여 사용자 상호작용을 개선합니다.
﻿
4단계 – Marionette.js와 Back4app 연결하기
백엔드가 Admin App을 통해 구성되고 관리되면, 다음 단계는 Marionette.js 프론트엔드를 Back4app과 통합하는 것입니다.
옵션 A: Parse SDK 사용하기 (해당되는 경우)
Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
Marionette.js 애플리케이션에서 Parse 초기화하기:
구성 파일을 생성하세요 (예: app/parseConfig.js):
JS
// app/parseConfig.js
import Parse from 'parse';
// 여기에 Back4app 자격 증명을 입력하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// app/parseConfig.js
import Parse from 'parse';
// 여기에 Back4app 자격 증명을 입력하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Marionette 뷰에서 Parse 통합하기:
예를 들어, 항목을 가져오고 렌더링하는 뷰를 생성하세요:
JS
// app/views/ItemsView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <h2>항목</h2>
    <ul>
      <% items.forEach(function(item) { %>
        <li><%= item.get("title") %> — <%= item.get("description") %></li>
      <% }); %>
    </ul>
  `),

  initialize() {
    this.items = [];
    this.fetchItems();
  },

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
      this.render();
    } catch (error) {
      console.error("항목 가져오기 오류:", error);
    }
  },

  serializeData() {
    return { items: this.items };
  }
});
// app/views/ItemsView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <h2>항목</h2>
    <ul>
      <% items.forEach(function(item) { %>
        <li><%= item.get("title") %> — <%= item.get("description") %></li>
      <% }); %>
    </ul>
  `),

  initialize() {
    this.items = [];
    this.fetchItems();
  },

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
      this.render();
    } catch (error) {
      console.error("항목 가져오기 오류:", error);
    }
  },

  serializeData() {
    return { items: this.items };
  }
});
﻿
옵션 B: REST 또는 GraphQL 사용하기
Parse SDK가 옵션이 아닌 경우, REST 또는 GraphQL 호출을 사용하여 Back4app과 상호작용할 수 있습니다. 예를 들어, REST를 통해 항목을 검색하려면:
JS
// Example REST call to retrieve items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Retrieved items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
// Example REST call to retrieve items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Retrieved items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
﻿
이 API 호출을 필요에 따라 Marionette.js 뷰 또는 컨트롤러에 통합하세요.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구성
객체에 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 소유자만 접근할 수 있는 항목을 생성하려면:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access solely to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Created private item:', savedItem);
  } catch (error) {
    console.error('Error saving private item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access solely to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Created private item:', savedItem);
  } catch (error) {
    console.error('Error saving private item:', error);
  }
}
﻿
클래스 수준 권한(CLPS) 설정
Back4app 대시보드에서 각 컬렉션에 대한 CLP를 구성하여 기본 액세스 규칙을 적용하고, 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다.
﻿
6단계 – 사용자 인증
사용자 계정 생성
Back4app은 인증 관리를 위해 Parse의 사용자 클래스를 사용합니다. Marionette.js 앱에서 사용자 등록 및 로그인을 아래와 같이 처리합니다:
JS
// app/views/AuthView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <form id="signup-form">
      <input type="text" id="username" placeholder="Username" required />
      <input type="password" id="password" placeholder="Password" required />
      <input type="email" id="email" placeholder="Email" required />
      <button type="submit">Sign Up</button>
    </form>
  `),

  events: {
    'submit #signup-form': 'handleSignUp'
  },

  async handleSignUp(e) {
    e.preventDefault();
    const username = this.$('#username').val();
    const password = this.$('#password').val();
    const email = this.$('#email').val();

    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Sign up error: ' + error.message);
    }
  }
});
// app/views/AuthView.js
import { View } from 'backbone.marionette';
import Parse from '../parseConfig';

export default View.extend({
  template: _.template(`
    <form id="signup-form">
      <input type="text" id="username" placeholder="Username" required />
      <input type="password" id="password" placeholder="Password" required />
      <input type="email" id="email" placeholder="Email" required />
      <button type="submit">Sign Up</button>
    </form>
  `),

  events: {
    'submit #signup-form': 'handleSignUp'
  },

  async handleSignUp(e) {
    e.preventDefault();
    const username = this.$('#username').val();
    const password = this.$('#password').val();
    const email = this.$('#email').val();

    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Sign up error: ' + error.message);
    }
  }
});
﻿
로그인 및 세션 처리에 대해서도 유사한 패턴을 따를 수 있습니다. 소셜 로그인이나 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 구성할 수 있습니다.
﻿
7단계 – Marionette.js 프론트엔드 웹 배포하기
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리를 연결하여 Marionette.js 프론트엔드를 원활하게 호스팅할 수 있습니다.
7.1 – 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리로 이동합니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 최적화된 정적 파일(HTML, JS, CSS, 이미지)을 포함하는 build 폴더를 생성합니다.
빌드 확인:
build 폴더에 필요한 자산과 함께 index.html 파일이 포함되어 있는지 확인합니다.
﻿
7.2 – 소스 코드 정리 및 업로드
리포지토리에는 Marionette.js 프론트엔드의 모든 소스 코드가 포함되어야 합니다. 예시 파일 구조는 다음과 같습니다:
Text
Basic-CRUD-App-MarionetteJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── app/
│   ├── app.js
│   ├── parseConfig.js
│   └── views/
│       ├── ItemsView.js
│       └── AuthView.js
├── package.json
└── README.md
Basic-CRUD-App-MarionetteJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── app/
│   ├── app.js
│   ├── parseConfig.js
│   └── views/
│       ├── ItemsView.js
│       └── AuthView.js
├── package.json
└── README.md
﻿
예시 구성 파일
app/parseConfig.js
JS
// app/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// app/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
예시 애플리케이션 파일
app/app.js
JS
import Marionette from 'backbone.marionette';
import ItemsView from './views/ItemsView';

// Initialize the Marionette Application
const App = new Marionette.Application({
  region: '#app'
});

App.on('start', function() {
  const itemsView = new ItemsView();
  App.showView(itemsView);
});

App.start();
import Marionette from 'backbone.marionette';
import ItemsView from './views/ItemsView';

// Initialize the Marionette Application
const App = new Marionette.Application({
  region: '#app'
});

App.on('start', function() {
  const itemsView = new ItemsView();
  App.showView(itemsView);
});

App.start();
﻿
GitHub에 커밋하기
Git 저장소 초기화하기 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Marionette.js 프론트엔드 초기 커밋"
git commit -m "Marionette.js 프론트엔드 초기 커밋"
﻿
GitHub에 저장소 만들기 (예: Basic-CRUD-App-MarionetteJS-Frontend).
코드 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-MarionetteJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-MarionetteJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 – 리포지토리를 웹 배포와 통합하기
웹 배포 접근하기:
Back4app 대시보드에서 프로젝트(기본-CRUD-앱-마리오네트JS)를 선택하고 웹 배포를 클릭하세요.
GitHub에 연결하기:
Back4app이 리포지토리에 접근할 수 있도록 GitHub 계정을 연결하는 안내를 따르세요.
리포지토리 및 브랜치 선택하기:
코드가 포함된 리포지토리(예: 기본-CRUD-앱-마리오네트JS-프론트엔드)와 브랜치(예: main)를 선택하세요.
﻿
7.4 – 배포 구성하기
추가 설정을 지정하십시오:
빌드 명령어:
사전 빌드된 build 폴더가 없으면 빌드 명령어를 설정하십시오 (예: npm run build). Back4app은 배포 중에 이를 실행합니다.
출력 디렉토리:
정적 파일이 포함된 폴더로 build를 지정하십시오.
환경 변수:
배포 설정에 필요한 환경 변수(예: API 키)를 제공하십시오.
﻿
7.5 – 당신의 Marionette.js 애플리케이션을 도커화하기
배포를 위해 Docker를 선호하는 경우, 리포지토리에 Dockerfile을 포함하여 애플리케이션을 컨테이너화하십시오:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the application
RUN npm run build

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

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

# Set working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the application
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
원하는 경우 Docker 옵션을 사용하도록 웹 배포를 구성하십시오.
﻿
7.6 – 애플리케이션 배포하기
배포 버튼 클릭:
배포 설정을 완료하고 배포를 클릭하세요.
빌드 모니터링:
Back4app이 GitHub 코드를 가져오고, 빌드 명령을 실행하며, 컨테이너를 배포합니다.
URL 가져오기:
배포가 완료되면 Back4app이 Marionette.js 애플리케이션이 호스팅되는 URL을 제공합니다.
﻿
7.7 – 배포 확인하기
제공된 URL 방문:
브라우저에서 배포 URL을 엽니다.
애플리케이션 테스트:
애플리케이션이 올바르게 로드되고 모든 기능(경로, 자산)이 작동하는지 확인합니다.
필요시 문제 해결:
문제가 발생하면 브라우저 개발자 도구를 사용하고 Back4app의 배포 로그를 확인하세요.
﻿
8단계 – 결론 및 다음 단계
잘 하셨습니다! Marionette.js와 Back4app을 사용하여 CRUD 애플리케이션을 성공적으로 구축했습니다.
"Basic-CRUD-App-MarionetteJS"라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 데이터베이스 컬렉션을 생성했으며, 관리 앱을 통해 데이터를 관리했습니다.
또한 Marionette.js 프론트엔드를 백엔드에 연결하고 강력한 보안 조치를 구현했습니다.
미래의 개선 사항:
프론트엔드 개선:
상세 보기, 검색 기능 및 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 기능 확장:
클라우드 기능, 서드파티 API 또는 고급 역할 기반 액세스 제어 통합을 고려하세요.
추가 학습:
더 많은 고급 최적화 및 통합을 위해 Back4app 문서를 탐색하세요.
이 튜토리얼을 따라 하면서 이제 Marionette.js와 Back4app을 사용하여 강력하고 확장 가능한 CRUD 애플리케이션을 구축할 수 있는 지식을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간단한 요약.
생성일	날짜	항목이 생성된 시간의 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	사용자 인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성의 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Backend for Blazor?
Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide