Astro로 CRUD 앱 만들기?

37min
개요
이 가이드에서는 Astro를 사용하여 CRUD(생성, 읽기, 업데이트 및 삭제) 웹 애플리케이션을 만드는 방법을 배웁니다.
이 튜토리얼은 강력한 백엔드인 Back4app 프로젝트를 설정하고 기본 작업을 지원하는 데이터 구조를 설계하는 과정을 안내합니다.
그런 다음 REST/GraphQL API를 통해 Back4app과 통신하는 Astro 프론트엔드를 구축하여 안전하고 효율적인 데이터 관리를 보장합니다.
이 가이드를 마치면 사용자 인증 및 안전한 데이터 처리가 완료된 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 됩니다.
배울 내용
Astro와 Back4app으로 CRUD 애플리케이션을 구조화하는 방법.
사용자 정의 컬렉션으로 확장 가능한 백엔드 설계.
손쉬운 데이터 관리를 위한 드래그 앤 드롭 관리 인터페이스 사용.
REST 또는 GraphQL을 사용하여 Astro 프론트엔드를 Back4app과 통합.
필요한 경우 Astro 프로젝트를 배포하고 Docker로 컨테이너화.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
새 프로젝트가 준비된 Back4app 계정입니다.
 Back4app 시작하기를 확인하세요.
Astro 개발 환경이 설정되어 있습니다.
공식 Astro 문서를 사용하여 시작하세요. Node.js (버전 14+)가 설치되어 있는지 확인하세요.
JavaScript, Astro 및 REST API에 대한 기본적인 이해가 필요합니다.
복습이 필요하다면 Astro 문서를 방문하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
“새 앱” 클릭 대시보드에서.
프로젝트 이름 지정: Basic-CRUD-App-Astro 및 지침에 따라 설정을 완료하세요.
새 프로젝트 만들기
﻿
생성 후, 귀하의 프로젝트는 Back4app 대시보드에 나타납니다—백엔드 구성의 기초입니다.
﻿
2단계 – 데이터베이스 스키마 작성
데이터 모델 구조화
우리의 CRUD 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다. 아래는 데이터베이스 스키마를 효과적으로 구성하는 데 도움이 되는 필드와 유형이 포함된 샘플 컬렉션입니다. 이 구조는 효율적인 CRUD 작업을 지원합니다.
1. 항목 수집
필드
유형
목적
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 개요.
생성일
날짜
생성 타임스탬프.
업데이트됨
날짜
마지막 수정의 타임스탬프.
2. 사용자 수집
필드
유형
목적
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 이메일 주소.
비밀번호_해시
문자열
인증을 위한 암호화된 비밀번호.
생성일
날짜
계정이 생성되었을 때.
업데이트됨
날짜
계정의 마지막 업데이트 시간.
Back4app 대시보드에서 새로운 클래스를 생성하고 적절한 열을 추가하여 이러한 컬렉션을 수동으로 구성할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 데이터 유형을 선택하고, 필드 이름을 제공하며, 필요에 따라 기본값을 정의하고, 필드가 필수인지 여부를 표시합니다.
열 만들기
﻿
스키마 설정을 위한 Back4app AI 에이전트 활용하기
Back4app에 통합된 AI 에이전트는 스키마를 자동 생성할 수 있습니다. AI 에이전트 인터페이스에서 원하는 컬렉션과 필드를 설명하고, 추천 사항을 검토한 후 프로젝트에 적용하세요.
샘플 프롬프트
Text
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-created)
  - 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-created)
  - 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단계 – Astro와 Back4app 연결하기
백엔드가 구성되었으므로, 이제 Astro 프론트엔드를 통합할 시간입니다.
REST/GraphQL API 활용하기
Astro는 성능을 최적화한 정적 사이트 생성기이므로, REST 또는 GraphQL API를 사용하여 Back4app과 상호작용합니다. 이 접근 방식은 Parse SDK의 필요성을 피합니다.
예시: REST를 통한 항목 가져오기
아래는 Astro 컴포넌트 내에서의 REST API 호출 예시입니다:
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  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();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  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();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
Astro 컴포넌트 내에서 레코드를 생성, 업데이트 및 삭제하기 위한 유사한 API 호출을 통합하세요.
﻿
5단계 – 백엔드 보호하기
액세스 제어 목록(ACL) 구현하기
객체에 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 소유자만 수정할 수 있는 항목을 생성하려면:
JS
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
﻿
클래스 수준 권한(CLP) 구성하기
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 누가 데이터에 접근하고 수정할 수 있는지를 정의하세요.
﻿
6단계 – 사용자 인증 추가하기
사용자 등록 및 로그인 설정
Back4app은 인증을 위해 Parse의 사용자 클래스를 사용합니다. Astro 프로젝트에서 REST API 호출을 활용하여 사용자 가입 및 로그인 컴포넌트를 생성하세요.
예시: 사용자 가입
Text
// src/components/SignUp.astro
---
import { useState } from 'react';

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
// src/components/SignUp.astro
---
import { useState } from 'react';

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
﻿
사용자 로그인 및 세션 관리를 위한 유사한 컴포넌트를 구축할 수 있습니다.
﻿
7단계 – Astro 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리와 연결하여 Astro 프로젝트를 원활하게 호스팅할 수 있습니다.
7.1 프로덕션 버전 빌드하기
프로젝트 디렉토리에서 터미널을 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 정적 자산이 포함된 최적화된 dist 폴더를 생성합니다.
빌드 확인:
dist 폴더에 다른 자산 디렉토리와 함께 index.html 파일이 포함되어 있는지 확인합니다.
﻿
7.2 프로젝트 리포지토리 정리하기
리포지토리에는 전체 Astro 소스 코드가 포함되어야 합니다. 예시 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
﻿
예제 파일: src/components/ItemsList.astro
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = 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 json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = 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 json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
7.3 코드를 GitHub에 커밋하고 푸시하기
Git 저장소 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
모든 파일 추가:
Bash
git add .
git add .
﻿
변경 사항 커밋:
Bash
git commit -m "Astro 프론트엔드의 초기 커밋"
git commit -m "Astro 프론트엔드의 초기 커밋"
﻿
GitHub에 저장소 생성 (예: Basic-CRUD-App-Astro) 및 푸시:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
﻿
﻿
7.4 GitHub와 Back4app 웹 배포 연결하기
웹 배포 접근:
Back4app 대시보드에 로그인하고, 프로젝트 (Basic-CRUD-App-Astro)로 이동한 후 웹 배포 옵션을 선택하세요.
GitHub 계정 연결:
Back4app이 귀하의 리포지토리에 접근할 수 있도록 권한을 부여하는 지침을 따르세요.
리포지토리 및 브랜치 선택:
리포지토리 (예: Basic-CRUD-App-Astro)와 브랜치 (일반적으로 main)를 선택하세요.
﻿
7.5 배포 설정 구성
빌드 명령:
리포지토리에 사전 빌드된 출력이 없는 경우 빌드 명령 (예: npm run build)을 지정하세요.
출력 디렉토리:
정적 파일의 위치를 Back4app이 알 수 있도록 dist로 설정하세요.
환경 변수:
API 키와 같은 필요한 변수를 추가하세요.
﻿
7.6 Astro 애플리케이션 도커화 (선택 사항)
컨테이너화된 배포를 선호하는 경우, 다음과 같은 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

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

# Copy source files and build the project
COPY . .
RUN npm run build

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

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

# Set the working directory
WORKDIR /app

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

# Copy source files and build the project
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
원하는 경우 웹 배포 구성에 Docker 설정을 통합하세요.
﻿
7.7 애플리케이션 시작하기
배포 버튼을 클릭하세요 웹 배포 섹션에서.
빌드 프로세스를 모니터링하세요:
Back4app이 코드를 가져와서 빌드하고 애플리케이션을 배포합니다.
URL을 받으세요:
배포가 완료되면 Back4app이 사이트가 실시간으로 제공되는 URL을 제공합니다.
﻿
8단계 – 마무리 및 향후 개선 사항
잘 하셨습니다! 이제 Astro와 Back4app을 사용하여 완전한 CRUD 애플리케이션을 만들었습니다. 귀하의 프로젝트에는 항목 및 사용자에 대한 자세한 컬렉션이 포함된 백엔드와 REST/GraphQL API를 통해 모든 CRUD 작업을 수행하는 프론트엔드가 포함되어 있습니다.
다음 단계:
프론트엔드 개선:
상세 보기, 검색 기능 및 실시간 알림과 같은 기능을 추가하세요.
백엔드 기능 확장:
더 복잡한 논리를 위해 클라우드 기능 또는 추가 API 엔드포인트 통합을 고려하세요.
더 깊이 탐구하기:
고급 주제를 위해 Back4app 문서 및 Astro 문서에서 추가 자료를 탐색하세요.
이 튜토리얼을 따라 하면서 이제 Astro와 Back4app을 사용하여 강력하고 확장 가능한 CRUD 애플리케이션을 구축할 수 있는 지식을 갖추게 되었습니다. 코딩을 즐기고 새로운 가능성을 탐색하세요!
필드	유형	목적
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 개요.
생성일	날짜	생성 타임스탬프.
업데이트됨	날짜	마지막 수정의 타임스탬프.
필드	유형	목적
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 이메일 주소.
비밀번호_해시	문자열	인증을 위한 암호화된 비밀번호.
생성일	날짜	계정이 생성되었을 때.
업데이트됨	날짜	계정의 마지막 업데이트 시간.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Develop a CRUD Application with Deno? A Comprehensive Guide
How to Create a CRUD Application with Kotlin?