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

40min
개요
이 가이드에서는 Meteor를 사용하여 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 개발하는 방법을 배웁니다.
Meteor 앱을 백엔드 서비스로 Back4app과 통합하여 데이터 관리가 견고하고 확장 가능하도록 합니다.
튜토리얼 전반에 걸쳐 Basic-CRUD-App-Meteor라는 이름의 프로젝트를 설정하고, 데이터베이스 스키마를 정의하며, 컬렉션을 구성합니다. 이 모든 과정에서 Back4app의 강력한 기능을 활용합니다.
또한 Back4app의 관리 앱을 사용하여 효율적인 데이터 관리를 수행하고, 고급 접근 제어 조치를 통해 백엔드를 안전하게 보호하는 방법을 배웁니다.
마지막에는 CRUD 작업과 사용자 인증을 지원하는 프로덕션 준비가 완료된 Meteor 애플리케이션을 갖게 됩니다.
주요 내용
Back4app을 사용하여 데이터 작업을 효율적으로 처리하는 CRUD 기능을 개발합니다.
Meteor 프론트엔드와 쌍을 이루는 확장 가능한 백엔드를 설계하고 구현합니다.
Back4app의 드래그 앤 드롭 관리 앱을 활용하여 데이터 작업을 간소화합니다.
Meteor 애플리케이션을 위한 배포 전략, 포함하여 Docker 컨테이너화에 대해 배웁니다.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
새 프로젝트가 있는 Back4app 계정.
설정 지침은 Back4app 시작하기를 확인하세요.
Meteor 개발 환경.
 Meteor 공식 웹사이트에서 Meteor를 설치하고 Node.js (v14 이상)가 사용 가능하도록 하세요.
JavaScript, Meteor 및 REST API에 대한 기본 지식.
필요한 경우 Meteor 문서를 참조하여 더 많은 정보를 얻으세요.
﻿
1단계 – 프로젝트 초기화
Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 옵션을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-Meteor 및 프롬프트에 따라 프로젝트를 생성하세요.
새 프로젝트 만들기
﻿
생성 후, 귀하의 프로젝트는 Back4app 대시보드에 나열되어 백엔드 설정을 위한 견고한 기초를 마련합니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 만들기
기본 CRUD 애플리케이션을 위해 여러 컬렉션이 필요합니다. 아래는 데이터 작업을 효과적으로 관리하는 데 필요한 컬렉션과 필드를 자세히 설명하는 예입니다.
1. 컬렉션: 항목
이 컬렉션은 모든 항목에 대한 세부 정보를 포함하고 있습니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 수집: 사용자
이 수집은 사용자 정보 및 인증 세부 정보를 관리합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
안전하게 해시된 비밀번호.
생성일
날짜
계정 생성의 타임스탬프.
업데이트됨
날짜
최신 계정 업데이트의 타임스탬프.
Back4app 대시보드에서 각 컬렉션에 대해 새 클래스를 생성하고 해당 필드를 정의하여 수동으로 추가하십시오.
새 클래스 만들기
﻿
각 필드를 생성하려면 유형을 선택하고, 이름을 지정하고, 필요한 경우 기본값을 추가하고, 필수인지 여부를 표시합니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 대시보드에서 직접 스키마 생성을 간소화합니다. 원하는 컬렉션과 필드를 설명하는 프롬프트를 제공하면 AI 에이전트가 자동으로 데이터베이스 스키마를 생성할 수 있습니다.
AI 에이전트 사용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드의 AI 에이전트 섹션으로 이동합니다.
스키마 설명하기:
필요한 컬렉션과 필드를 지정하는 자세한 프롬프트를 입력합니다.
검토 및 적용하기:
제안된 스키마를 평가하고 프로젝트에 변경 사항을 적용합니다.
샘플 프롬프트
Text
Create the following 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 the following 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의 관리 앱은 드래그 앤 드롭 작업을 통해 백엔드 데이터를 손쉽게 관리할 수 있도록 해주는 직관적인 노코드 도구입니다. 레코드를 생성, 읽기, 업데이트 및 삭제하는 과정을 간소화합니다.
관리자 앱 활성화
“더보기” 메뉴로 이동 당신의 Back4app 대시보드에서.
“관리자 앱” 선택을 클릭하고 “관리자 앱 활성화.”
관리자 자격 증명 설정:
초기 관리자 사용자를 생성하고, B4aAdminUser와 같은 기본 역할을 시스템 컬렉션과 함께 구성합니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 데이터를 관리하기 시작하세요.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 활용
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 추가: 항목과 같은 컬렉션에서 “레코드 추가”를 클릭하여 새 항목을 생성합니다.
레코드 보기/수정: 레코드를 선택하여 세부 정보를 검사하거나 변경합니다.
레코드 제거: 더 이상 필요하지 않은 레코드를 삭제합니다.
이 인터페이스는 데이터 작업을 간단하게 만들어 사용자 경험을 크게 향상시킵니다.
﻿
4단계 – Meteor와 Back4app 통합
이제 백엔드가 관리자 앱을 통해 구성되고 관리되므로, Meteor 애플리케이션을 Back4app에 연결할 시간입니다.
Meteor에서 REST API 사용하기
REST API 호출을 통해 Back4app과 통합할 수 있습니다.
예시: REST를 통한 데이터 가져오기
다음은 Meteor 메서드에서 Back4app에서 항목을 가져오는 예제 코드 스니펫입니다:
JS
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to fetch items.');
    }
  }
});
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to fetch items.');
    }
  }
});
﻿
기록을 생성, 업데이트 및 삭제하기 위해 Meteor 구성 요소 또는 메서드 내에서 유사한 REST 호출을 통합하십시오.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
객체에 ACL을 할당하여 데이터를 보호하십시오. 예를 들어, 소유자에게만 보이는 항목을 생성하려면:
JS
async function createSecureItem(itemData, ownerUser) {
  const itemPayload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUser.id]: { read: true, write: true },
      '*': { read: false, write: false }
    }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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(itemPayload)
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerUser) {
  const itemPayload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUser.id]: { read: true, write: true },
      '*': { read: false, write: false }
    }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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(itemPayload)
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 설정하여 기본 액세스 규칙을 제어하십시오. 이 단계는 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 보장합니다.
﻿
6단계 – 사용자 인증 관리
Meteor 사용자 계정 설정
Back4app은 인증을 위해 Parse의 사용자 클래스를 활용하지만, Meteor에서는 표준 REST 호출을 사용하여 사용자 등록 및 로그인을 처리할 수 있습니다.
예제: REST를 통한 사용자 등록
JS
// /imports/api/auth.js
import { HTTP } from 'meteor/http';

export const signUpUser = async (username, password, email) => {
  try {
    const response = await HTTP.post('https://parseapi.back4app.com/users', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      data: {
        username,
        password,
        email
      }
    });
    return response.data;
  } catch (error) {
    throw new Meteor.Error('signup-failed', error.message);
  }
};
// /imports/api/auth.js
import { HTTP } from 'meteor/http';

export const signUpUser = async (username, password, email) => {
  try {
    const response = await HTTP.post('https://parseapi.back4app.com/users', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      data: {
        username,
        password,
        email
      }
    });
    return response.data;
  } catch (error) {
    throw new Meteor.Error('signup-failed', error.message);
  }
};
﻿
사용자 로그인 및 세션 관리를 위한 유사한 메서드를 구현하십시오. 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 관리할 수 있습니다.
﻿
7단계 – Meteor 프론트엔드 배포
Back4app의 웹 배포 기능은 GitHub 리포지토리에 연결하여 Meteor 애플리케이션을 호스팅하는 것을 용이하게 합니다. Meteor 앱을 배포하려면 다음 단계를 따르십시오.
7.1 프로덕션 빌드 생성
프로젝트 디렉토리에서 터미널을 엽니다.
Meteor 앱을 빌드합니다:
Bash
meteor build ../output --directory
meteor build ../output --directory
﻿
이 명령은 최적화된 정적 자산을 포함하는 빌드 디렉토리를 생성합니다.
빌드를 확인합니다:
빌드 출력에 index.html 및 필요한 자산 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 코드를 정리하고 업로드하기
GitHub 리포지토리에는 Meteor 애플리케이션의 전체 소스 코드가 있어야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Meteor/
├── .meteor/
├── client/
│   └── main.html
├── server/
│   └── main.js
├── imports/
│   ├── api/
│   │   ├── items.js
│   │   └── auth.js
│   └── startup/
│       └── index.js
├── package.json
└── README.md
Basic-CRUD-App-Meteor/
├── .meteor/
├── client/
│   └── main.html
├── server/
│   └── main.js
├── imports/
│   ├── api/
│   │   ├── items.js
│   │   └── auth.js
│   └── startup/
│       └── index.js
├── package.json
└── README.md
﻿
샘플 파일: /imports/api/items.js
JS
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to retrieve items.');
    }
  }
});
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to retrieve items.');
    }
  }
});
﻿
코드를 GitHub에 커밋하기
프로젝트 폴더에서 Git 초기화하기 (아직 하지 않았다면):
Bash
git init
git init
﻿
모든 소스 파일 추가하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "초기 Meteor CRUD 앱 커밋"
git commit -m "초기 Meteor CRUD 앱 커밋"
﻿
GitHub 리포지토리 생성하기 (예: Basic-CRUD-App-Meteor).
코드 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Meteor.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Meteor.git
git push -u origin main
﻿
﻿
7.3 GitHub와 Back4app 웹 배포 연결하기
웹 배포 접근하기:
Back4app에 로그인하고, Basic-CRUD-App-Meteor 프로젝트로 이동한 후 웹 배포 옵션을 클릭하세요.
GitHub 계정 연결하기:
화면의 지침에 따라 GitHub 계정을 통합하세요.
리포지토리 및 브랜치 선택하기:
리포지토리(예: Basic-CRUD-App-Meteor)와 코드가 포함된 브랜치(예: main)를 선택하세요.
﻿
7.4 배포 구성
다음 설정을 구성하십시오:
빌드 명령어:
저장소에 미리 빌드된 폴더가 없는 경우, 빌드 명령어를 지정하십시오 (예: meteor build ../output --directory).
출력 디렉토리:
정적 자산을 보유하는 디렉토리(예: 출력 폴더)를 지정하십시오.
환경 변수:
필요한 API 키나 구성을 추가하십시오.
﻿
7.5 메테오 앱 도커화 (선택 사항)
도커가 배포 선호 사항인 경우, 아래와 같은 Dockerfile을 포함하십시오:
Dockerfile
# Use the official Node image as a base
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the Meteor app
RUN meteor build ../output --directory

# Serve with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/output/bundle/programs/web.browser /usr/share/nginx/html

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

# Set the working directory
WORKDIR /app

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

# Copy the app source code
COPY . .

# Build the Meteor app
RUN meteor build ../output --directory

# Serve with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/output/bundle/programs/web.browser /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
컨테이너화를 선택하는 경우 Back4app에서 도커 배포 옵션을 선택하십시오.
﻿
7.6 배포 마무리하기
애플리케이션 배포:
모든 구성이 완료된 후 배포 버튼을 클릭하세요.
빌드 모니터링:
Back4app이 코드를 가져오고, 빌드 명령을 실행하며, 앱을 배포합니다.
URL 접근:
배포가 완료되면 Back4app이 Meteor 앱이 라이브인 URL을 제공합니다.
﻿
7.7 배포 확인하기
URL 방문:
제공된 URL을 브라우저에서 엽니다.
기능 테스트:
모든 경로, 스타일 및 스크립트가 올바르게 작동하는지 확인합니다.
필요에 따라 디버깅:
브라우저 개발자 도구와 Back4app 로그를 사용하여 문제를 해결합니다.
﻿
8단계 – 최종 생각 및 향후 개선 사항
축하합니다! Meteor를 사용하여 완전한 CRUD 애플리케이션을 성공적으로 구축하고 Back4app과 통합했습니다. 
"},{
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	안전하게 해시된 비밀번호.
생성일	날짜	계정 생성의 타임스탬프.
업데이트됨	날짜	최신 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to a Basic CRUD App with Alpine.js?
How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial