How to Build a Basic CRUD App with Marko? A Step-by-Step Guide

39min
개요
이 가이드는 Marko와 Back4app을 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 과정을 안내합니다.
이 튜토리얼에서는 Back4app에서 Basic-CRUD-App-Marko라는 이름의 프로젝트를 설정하고, 강력한 데이터베이스 스키마를 설계하며, Marko 프론트엔드를 Back4app의 API와 통합합니다.
이 튜토리얼은 또한 백엔드를 보호하고 애플리케이션을 프로덕션 용도로 배포하는 방법을 설명합니다.
배울 내용
신뢰할 수 있는 백엔드를 사용하여 데이터를 효율적으로 관리하는 CRUD 애플리케이션을 구축하는 방법.
확장 가능한 스키마를 설계하고 이를 Marko 기반 프론트엔드에 연결하는 팁.
데이터를 손쉽게 관리하기 위한 Back4app의 사용자 친화적인 관리 인터페이스 활용.
웹 애플리케이션을 시작하기 위한 Docker를 통한 컨테이너화 등 배포 전략.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정과 새 프로젝트.
필요한 경우 Back4app 시작하기의 지침을 따르세요.
Marko 개발 환경이 설정되어 있습니다.
Marko CLI 또는 선호하는 설정 방법을 사용하세요. Node.js (v14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Marko 및 REST API에 대한 기본 지식.
자세한 내용은 Marko 문서를 방문하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱”을 선택하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-Marko 및 화면의 지침을 따르세요.
새 프로젝트 만들기
﻿
귀하의 새로운 프로젝트가 이제 Back4app 대시보드에 나타나며, 백엔드의 기초를 다집니다.
﻿
2단계 – 데이터베이스 스키마 만들기
데이터 모델 구축
이 CRUD 앱을 위해 몇 개의 컬렉션을 생성할 것입니다. 아래는 실용적인 데이터베이스 스키마 설계를 돕기 위한 제안된 필드가 포함된 컬렉션의 예입니다.
1. 컬렉션: 제품
이 컬렉션은 각 제품에 대한 세부 정보를 보관합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 기본 식별자.
이름
문자열
제품 이름.
세부사항
문자열
제품에 대한 간략한 설명.
생성일
날짜
제품 생성의 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 수집: 사용자
이 컬렉션은 사용자 및 인증 데이터를 보유하고 있습니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호
문자열
사용자의 비밀번호의 해시된 버전입니다.
생성일
날짜
레코드 생성 타임스탬프.
업데이트됨
날짜
마지막 수정 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 생성하고 적절한 열을 추가하여 수동으로 정의할 수 있습니다.
새 클래스 만들기
﻿
필드 유형을 선택하고, 열 이름을 지정하고, 기본값을 설정하며, 필요한 경우 필수로 표시하여 빠르게 추가할 수 있습니다.
열 생성
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 프롬프트에 따라 컬렉션 및 필드 정의를 생성하여 스키마 디자인을 간소화합니다. 이 기능은 시간을 절약하고 데이터베이스 설정의 일관성을 보장합니다.
AI 에이전트 사용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드로 이동하여 프로젝트 설정에서 AI 에이전트를 찾습니다.
스키마 설명하기:
필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 제공합니다.
검토 및 적용하기:
생성 후 제안된 스키마를 검토하고 변경 사항을 적용합니다.
예시 프롬프트
Text
Create the following collections for my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: 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: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections for my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: 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: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 접근 방식은 스키마 생성 프로세스를 간소화합니다.
﻿
3단계 – 관리자 인터페이스 및 CRUD 기능 활성화
관리자 인터페이스 소개
Back4app 관리자 앱은 데이터 관리를 쉽게 해주는 노코드 인터페이스입니다. 드래그 앤 드롭 기능을 통해 레코드를 쉽게 추가, 수정, 보기 또는 제거할 수 있습니다.
관리자 인터페이스 활성화하기
“더보기” 섹션으로 이동 당신의 Back4app 대시보드에서.
“관리자 앱” 선택 그런 다음 클릭하십시오 “관리자 앱 활성화.”
관리자 자격 증명 설정:
첫 번째 관리자 계정을 생성하여 B4aAdminUser와 같은 시스템 역할을 할당합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 백엔드를 관리하십시오.
관리자 앱 대시보드
﻿
관리자 인터페이스를 통한 CRUD 작업 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 항목 추가: 컬렉션에서 “레코드 추가” 옵션을 사용하십시오 (예: 제품).
레코드 보기/수정: 세부 정보를 검토하거나 업데이트하려면 항목을 클릭하십시오.
항목 제거: 삭제 기능을 사용하여 오래된 레코드를 제거하십시오.
이 간소화된 인터페이스는 데이터 관리 작업을 단순화하여 사용자 경험을 향상시킵니다.
﻿
4단계 – Marko와 Back4app 연결하기
이제 백엔드가 구성되었으므로 API를 사용하여 Marko 프론트엔드를 Back4app과 통합할 시간입니다.
옵션 A: API 사용하기
Marko 애플리케이션에서 CRUD 작업을 실행하기 위해 REST API 호출을 사용할 것입니다.
예시: REST를 통한 데이터 가져오기
JS
// In a Marko component script file (e.g., fetchProducts.marko)
import { onMount } from 'marko/src/runtime/client';

onMount(async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Products:', data.results);
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
});
// In a Marko component script file (e.g., fetchProducts.marko)
import { onMount } from 'marko/src/runtime/client';

onMount(async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Products:', data.results);
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
});
﻿
이 코드 스니펫은 REST API 호출을 사용하여 Back4app에서 제품 데이터를 가져오는 방법을 보여줍니다.
﻿
5단계 – 백엔드 보호하기
액세스 제어 구성
액세스 제어 목록(ACL)을 기록에 적용하여 보안을 강화하세요. 예를 들어, 개인 제품 항목을 생성하려면:
JS
async function createSecureProduct(productData, owner) {
  const product = {
    name: productData.name,
    details: productData.details
  };

  // Setup ACL: Only the owner has read/write privileges
  product.ACL = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(product)
    });
    const result = await response.json();
    console.log('Secure product created:', result);
  } catch (error) {
    console.error('Error creating product:', error);
  }
}
async function createSecureProduct(productData, owner) {
  const product = {
    name: productData.name,
    details: productData.details
  };

  // Setup ACL: Only the owner has read/write privileges
  product.ACL = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(product)
    });
    const result = await response.json();
    console.log('Secure product created:', result);
  } catch (error) {
    console.error('Error creating product:', error);
  }
}
﻿
기본 권한 설정
Back4app 대시보드를 사용하여 각 컬렉션에 대한 클래스 수준 권한(CLPS)을 구성하여 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 설정
사용자 계정 생성
Back4app은 인증을 위해 사용자 클래스를 사용합니다. Marko 앱에서 사용자 가입 및 로그인을 다음과 같이 구현하세요:
JS
// In a Marko component script (e.g., auth.marko)
import { onMount } from 'marko/src/runtime/client';

async function registerUser(username, email, password) {
  const userData = {
    username,
    email,
    password
  };

  try {
    const response = await fetch('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'
      },
      body: JSON.stringify(userData)
    });
    const result = await response.json();
    console.log('User registered:', result);
  } catch (error) {
    console.error('Registration error:', error);
  }
}
// In a Marko component script (e.g., auth.marko)
import { onMount } from 'marko/src/runtime/client';

async function registerUser(username, email, password) {
  const userData = {
    username,
    email,
    password
  };

  try {
    const response = await fetch('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'
      },
      body: JSON.stringify(userData)
    });
    const result = await response.json();
    console.log('User registered:', result);
  } catch (error) {
    console.error('Registration error:', error);
  }
}
﻿
이 코드 조각은 REST 호출을 사용하여 간단한 사용자 등록 흐름을 보여줍니다.
﻿
7단계 – 마르코 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 직접 마르코 프로젝트를 호스팅할 수 있습니다.
7.1 – 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 최적화된 정적 파일이 포함된 build 디렉토리를 생성합니다.
빌드 확인:
 build 폴더에 index.html 및 모든 자산 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 – 코드 정리 및 업로드
귀하의 저장소는 Marko 프로젝트의 전체 소스를 포함해야 합니다. 일반적인 디렉토리 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Marko-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── fetchProducts.marko
│   │   └── auth.marko
│   ├── app.marko
│   └── api.js
├── package.json
└── README.md
Basic-CRUD-App-Marko-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── fetchProducts.marko
│   │   └── auth.marko
│   ├── app.marko
│   └── api.js
├── package.json
└── README.md
﻿
예시: src/api.js
JS
// src/api.js
export const API_HEADERS = {
  'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
  'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
  'Content-Type': 'application/json'
};

export async function fetchProducts() {
  const response = await fetch('https://parseapi.back4app.com/classes/Products', {
    headers: API_HEADERS
  });
  const data = await response.json();
  return data.results;
}
// src/api.js
export const API_HEADERS = {
  'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
  'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
  'Content-Type': 'application/json'
};

export async function fetchProducts() {
  const response = await fetch('https://parseapi.back4app.com/classes/Products', {
    headers: API_HEADERS
  });
  const data = await response.json();
  return data.results;
}
﻿
GitHub에 커밋하기
Git 초기화 (필요한 경우):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Marko CRUD 프론트엔드 초기 커밋"
git commit -m "Marko CRUD 프론트엔드 초기 커밋"
﻿
GitHub 리포지토리 생성 및 푸시하기:
예를 들어, Basic-CRUD-App-Marko-Frontend라는 이름의 리포지토리를 사용하세요.
﻿
7.3 – GitHub와 웹 배포 연결하기
웹 배포 접근하기:
Back4app에 로그인하고, 프로젝트 (Basic-CRUD-App-Marko)로 가서 웹 배포 섹션을 엽니다.
GitHub 계정 연결하기:
프롬프트에 따라 GitHub 계정을 연결하세요.
리포지토리 및 브랜치 선택하기:
리포지토리 (예: Basic-CRUD-App-Marko-Frontend)와 브랜치 (예: main)를 선택하여 배포합니다.
﻿
7.4 – 배포 구성하기
추가 매개변수를 설정하세요:
빌드 명령어:
사전 빌드된 build 폴더가 존재하지 않으면, 빌드 명령어를 설정하세요 (예: npm run build).
출력 디렉토리:
build를 출력 폴더로 지정하세요.
환경 변수:
필요한 변수를 입력하세요 (예: API 키).
﻿
7.5 – Docker로 컨테이너화하기
Docker를 선호하는 경우, 프로젝트 리포지토리에 Dockerfile을 포함하세요:
Dockerfile
# Use a Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy all files and build the app
COPY . .
RUN npm run build

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

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

# Set working directory
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy all files and build the app
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
배포 설정에서 Docker 배포 옵션을 선택하세요.
﻿
7.6 – 애플리케이션 배포하기
배포 버튼을 누르세요:
Back4app이 귀하의 리포지토리를 가져오고, 빌드를 실행하며, 애플리케이션을 배포합니다.
프로세스 모니터링:
배포 로그에서 빌드 또는 런타임 문제를 확인하세요.
사이트에 접근하기:
배포가 완료되면 Back4app이 호스팅된 Marko 애플리케이션의 URL을 제공합니다.
﻿
7.7 – 배포 확인하기
제공된 URL 열기:
애플리케이션이 올바르게 로드되는지 확인하세요.
앱을 통해 실행하기:
모든 페이지가 로드되고 CRUD 기능이 예상대로 작동하는지 확인하세요.
필요시 문제 해결:
브라우저 개발 도구와 Back4app 로그를 사용하여 문제를 해결하세요.
﻿
8단계 – 최종 생각 및 향후 개선 사항
훌륭한 작업입니다! 이제 Marko와 Back4app을 사용하여 완전한 기능을 갖춘 CRUD 애플리케이션을 구축했습니다.
"Basic-CRUD-App-Marko"라는 프로젝트를 설정하고, 제품 및 사용자에 대한 상세한 컬렉션을 작성하고, 직관적인 관리 인터페이스를 통해 데이터를 관리하며, REST API를 사용하여 Marko 프론트엔드를 통합하고, 강력한 제어로 백엔드를 보호했습니다.
다음 단계:
UI 개선하기:
제품 상세 페이지, 검색 기능 및 실시간 알림과 같은 고급 기능을 추가하는 것을 고려해 보세요.
백엔드 기능 확장하기:
서버리스 기능이나 타사 API 통합을 통해 추가 기능을 살펴보세요.
지식 심화하기:
성능 조정 및 사용자 정의 통합에 대한 더 많은 통찰력을 얻기 위해 Back4app 문서 및 추가 튜토리얼을 참조하세요.
Marko와 Back4app으로 즐거운 코딩 되세요!
필드	유형	세부사항
_id	객체 ID	자동 생성된 기본 식별자.
이름	문자열	제품 이름.
세부사항	문자열	제품에 대한 간략한 설명.
생성일	날짜	제품 생성의 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호	문자열	사용자의 비밀번호의 해시된 버전입니다.
생성일	날짜	레코드 생성 타임스탬프.
업데이트됨	날짜	마지막 수정 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough