How to Create a CRUD App with Gatsby?

34min
소개
이 안내서에서는 Gatsby를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 웹 애플리케이션을 구축하는 방법을 알아봅니다.
Back4app을 클라우드 백엔드로 사용하여 데이터를 손쉽게 관리할 것입니다. 이 가이드는 Back4app 프로젝트를 구성하고, 유연한 스키마를 정의하며, CRUD 작업을 수행하기 위해 REST 또는 GraphQL API 호출로 Gatsby 앱을 연결하는 방법을 안내합니다.
먼저, Basic-CRUD-App-Gatsby라는 이름의 Back4app 프로젝트를 설정합니다. 이 프로젝트는 강력한 비관계형 데이터베이스에 대한 액세스를 제공합니다. Back4app 대시보드에서 수동으로 클래스와 필드를 생성하거나 Back4app의 AI 에이전트를 활용하여 데이터 스키마를 설계할 것입니다.
다음으로, 데이터 관리 작업을 손쉽게 처리하기 위해 드래그 앤 드롭 인터페이스인 Back4app 관리 앱을 사용할 것입니다.
마지막으로, 안전한 CRUD 작업을 실행하기 위해 Gatsby 애플리케이션을 Back4app API(REST 또는 GraphQL을 통해)와 통합할 것입니다.
이 튜토리얼이 끝나면 기본 CRUD 작업을 수행하고 안전한 데이터 처리 및 사용자 인증을 갖춘 프로덕션 준비가 완료된 Gatsby 앱을 개발하게 될 것입니다.
주요 내용
저코드 백엔드로 지원되는 Gatsby CRUD 애플리케이션을 만드는 방법을 배우세요.
백엔드를 구조화하고 이를 현대적인 Gatsby 사이트와 연결하는 방법을 이해하세요.
Back4app의 직관적인 관리 앱을 활용하여 데이터 생성, 읽기, 업데이트 및 삭제를 관리하세요.
Gatsby 앱을 위한 컨테이너화 전략을 포함한 배포 옵션을 알아보세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 참조하세요.
Gatsby CLI가 설치된 Node.js 환경입니다.
 Node.js를 사용하고 npm install -g gatsby-cli를 통해 Gatsby를 설치하세요.
React, GraphQL 및 REST API에 대한 이해가 필요합니다.
필요한 경우 React 문서를 검토하세요.
﻿
1단계 – 프로젝트 설정하기
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
“새 앱” 클릭하기 대시보드에서.
프로젝트 이름: Basic-CRUD-App-Gatsby 입력하고 설정 단계를 완료하세요.
새 프로젝트 만들기
﻿
생성 후, 프로젝트가 대시보드에 나타나며 백엔드 구성을 준비합니다.
﻿
2단계 – 데이터 모델 정의하기
스키마 구성하기
이 CRUD 앱을 위해 Back4app에서 여러 클래스를 설정해야 합니다. 아래는 필수 클래스와 필드의 예입니다.
1. 아이템 클래스
이 클래스는 각 항목에 대한 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
항목이 마지막으로 업데이트된 타임스탬프.
2. 사용자 클래스
이 클래스는 사용자 자격 증명 및 인증을 처리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 ID.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호 해시
문자열
로그인을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
최신 계정 업데이트의 타임스탬프.
이러한 클래스와 필드를 Back4app 대시보드에서 직접 추가할 수 있습니다.
새 클래스 만들기
﻿
필드를 정의하려면 데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필수 필드를 표시할 수 있습니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 귀하의 사양에 따라 자동으로 스키마를 구축할 수 있습니다. 이는 설정 속도를 높이고 데이터 모델이 모든 CRUD 작업을 지원하도록 보장합니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드에 로그인하고 프로젝트 설정에서 AI 에이전트를 찾습니다.
요구 사항 입력:
필요한 클래스와 필드를 설명합니다.
검토 및 적용:
에이전트가 스키마를 제안합니다. 이를 검토하고 구현을 확인합니다.
예시 프롬프트
Text
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 AI 지원 접근 방식은 일관되고 효율적인 데이터 스키마를 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 관리
관리자 앱 개요
Back4app 관리자 앱은 백엔드 데이터 관리를 위한 코드 없는 인터페이스를 제공합니다. 사용자 친화적인 드래그 앤 드롭 기능은 레코드 추가, 보기, 업데이트 및 삭제와 같은 CRUD 작업을 간소화합니다.
관리자 앱 활성화
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리자 앱” 선택 후 “관리자 앱 활성화.”
관리자 자격 증명 구성 첫 번째 관리자 계정을 설정하여. 이 단계는 역할(예: B4aAdminUser) 및 시스템 클래스를 생성합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 백엔드 데이터를 관리합니다.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 사용
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: 항목과 같은 클래스에서 “레코드 추가” 기능을 사용하여 새 항목을 생성합니다.
레코드 검사/업데이트: 세부 정보를 보거나 정보를 수정하려면 항목을 클릭합니다.
레코드 삭제: 오래되었거나 불필요한 레코드를 제거합니다.
이 간소화된 인터페이스는 데이터 관리를 빠르고 직관적으로 만듭니다.
﻿
4단계 – Gatsby 앱을 Back4app과 연결하기
백엔드가 설정되면, 다음 단계는 Gatsby 애플리케이션을 Back4app에 연결하는 것입니다.
Gatsby에서 API 호출 사용하기
REST 또는 GraphQL 호출을 사용하여 Back4app과 통신할 것입니다. 두 번째 옵션은 SDK를 사용하는 것입니다.
REST를 사용하여 데이터 가져오기
JavaScript의 fetch API를 사용하여 데이터를 검색할 수 있습니다. 예를 들어, Back4app에서 항목을 로드하려면:
JS
// src/services/api.js
export const fetchItems = async () => {
  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();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    return [];
  }
};
// src/services/api.js
export const fetchItems = async () => {
  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();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    return [];
  }
};
﻿
REST를 통해 데이터 전송하기
새 항목을 추가하려면 POST 요청을 사용하세요:
JS
// src/services/api.js
export const createItem = async (title, description) => {
  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({ title, description }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating item:', error);
  }
};
// src/services/api.js
export const createItem = async (title, description) => {
  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({ title, description }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating item:', error);
  }
};
﻿
PUT/POST 및 DELETE 메서드를 사용하여 업데이트 및 삭제 기능을 유사하게 구현할 수 있습니다.
Gatsby 페이지나 컴포넌트에 이러한 API 호출을 통합하여 데이터를 동적으로 관리하세요.
﻿
5단계 – 백엔드 보안
접근 제어 구현
Back4app에서 접근 제어 목록(ACL)을 설정하여 데이터를 보호하세요. 예를 들어, 소유자만 볼 수 있는 항목을 생성하려면:
JS
// Example payload for a private item
const privateItem = {
  title: 'Private Title',
  description: 'This item is private',
  ACL: {
    "*": { "read": false, "write": false },
    "USER_OBJECT_ID": { "read": true, "write": true }
  }
};
// Example payload for a private item
const privateItem = {
  title: 'Private Title',
  description: 'This item is private',
  ACL: {
    "*": { "read": false, "write": false },
    "USER_OBJECT_ID": { "read": true, "write": true }
  }
};
﻿
클래스 수준 권한(CLPs)
Back4app 대시보드에서 CLP를 설정하여 기본 접근 규칙을 시행하고, 인증된 사용자만 특정 클래스에 접근할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 추가
Gatsby에서 사용자 계정 구성
Back4app은 인증을 위해 Parse의 내장 사용자 클래스를 활용합니다. Gatsby 앱에서 API 호출을 통해 사용자 등록 및 로그인을 관리하세요.
예시: 사용자 등록
JS
// src/services/auth.js
export const signUp = async (username, password, email) => {
  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({ username, password, email }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error during sign up:', error);
  }
};
// src/services/auth.js
export const signUp = async (username, password, email) => {
  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({ username, password, email }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error during sign up:', error);
  }
};
﻿
예시: 사용자 로그인
JS
// src/services/auth.js
export const logIn = async (username, password) => {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      },
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Login error:', error);
  }
};
// src/services/auth.js
export const logIn = async (username, password) => {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      },
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Login error:', error);
  }
};
﻿
이 접근 방식은 세션 관리, 비밀번호 재설정 등을 처리하는 데 확장될 수 있습니다.
﻿
7단계 – Gatsby 애플리케이션 배포
Back4app은 원활한 배포 프로세스를 지원합니다. 여러 방법을 사용하여 Gatsby 앱을 배포할 수 있으며, 컨테이너화도 포함됩니다.
7.1 Gatsby 사이트 구축하기
종속성 설치:
실행:
Bash
npm install
npm install
﻿
사이트 구축:
Gatsby 빌드 명령어를 사용하세요:
Bash
gatsby build
gatsby build
﻿
로컬 테스트:
기능성을 확인하기 위해 프로덕션 빌드를 제공하세요:
Bash
gatsby serve
gatsby serve
﻿
7.2 프로젝트 구조 개요
전형적인 Gatsby 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Gatsby/
|-- node_modules/
|-- src/
|   |-- components/
|   |   |-- ItemForm.js
|   |   |-- ItemList.js
|   |-- pages/
|       |-- index.js
|       |-- login.js
|-- static/
|-- gatsby-config.js
|-- package.json
|-- README.md
Basic-CRUD-App-Gatsby/
|-- node_modules/
|-- src/
|   |-- components/
|   |   |-- ItemForm.js
|   |   |-- ItemList.js
|   |-- pages/
|       |-- index.js
|       |-- login.js
|-- static/
|-- gatsby-config.js
|-- package.json
|-- README.md
﻿
7.3 당신의 Gatsby 애플리케이션을 도커화하기
컨테이너화된 배포를 선호하는 경우, Dockerfile:
Dockerfile
# Use an official Node.js image as the base
FROM node:14-alpine

# Set the working directory
WORKDIR /app

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

# Copy the remaining source code
COPY . .

# Build the Gatsby site
RUN npm run build

# Expose port (adjust if needed)
EXPOSE 8000

# Serve the built site
CMD ["npx", "gatsby", "serve", "-H", "0.0.0.0"]
# Use an official Node.js image as the base
FROM node:14-alpine

# Set the working directory
WORKDIR /app

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

# Copy the remaining source code
COPY . .

# Build the Gatsby site
RUN npm run build

# Expose port (adjust if needed)
EXPOSE 8000

# Serve the built site
CMD ["npx", "gatsby", "serve", "-H", "0.0.0.0"]
﻿
7.4 Back4app 웹 배포를 통한 배포
저장소 연결하기:
GitHub에 Gatsby 소스 코드를 호스팅하세요.
배포 구성하기:
Back4app 대시보드에서 웹 배포, 저장소를 연결하고 (예: Basic-CRUD-App-Gatsby) 브랜치를 선택하세요.
빌드 명령 설정하기:
빌드 명령을 지정하세요 (예: npm run build) 및 출력 디렉토리.
배포하기:
배포를 클릭하고 사이트가 라이브 될 때까지 로그를 모니터링하세요.
﻿
8단계 – 결론 및 다음 단계
잘 하셨습니다! Back4app과 통합된 Gatsby 기반 CRUD 애플리케이션을 구축하셨습니다.
"Basic-CRUD-App-Gatsby"라는 이름의 프로젝트를 설정하고, 데이터 모델을 정의하며, 관리 앱으로 데이터를 관리하고, REST/GraphQL API 호출을 사용하여 Gatsby 프론트 엔드를 Back4app에 연결했습니다.
다음 단계:
앱 개선하기:
고급 검색, 상세 보기 또는 실시간 업데이트 추가를 고려해 보세요.
백엔드 기능 확장하기:
클라우드 기능, 서드파티 API 통합 또는 세분화된 역할 기반 접근 제어를 탐색해 보세요.
더 배우기:
추가적인 통찰력과 튜토리얼을 위해 Back4app 문서를 방문하세요.
코딩을 즐기고 Gatsby CRUD 애플리케이션을 구축하는 것을 즐기세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목이 마지막으로 업데이트된 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 ID.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	로그인을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	최신 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Remix로 CRUD 애플리케이션 만들기?
Nuxt.js로 CRUD 애플리케이션 만들기?