How to Create a CRUD Application with Svelte?

32min
개요
이 안내서에서는 Svelte를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 앱을 구축하는 방법을 배웁니다.
우리는 앱의 데이터를 관리하기 위해 강력한 로우코드 백엔드인 Back4app을 백엔드 플랫폼으로 활용할 것입니다.
이 가이드는 Back4app 프로젝트를 설정하고, 다목적 데이터 스키마를 설계하며, Svelte 애플리케이션 내에서 CRUD 작업을 구현하는 방법을 설명합니다.
먼저, Basic-CRUD-App-Svelte라는 제목의 Back4app 프로젝트를 생성합니다. 이 프로젝트는 백엔드 설정의 기초를 형성하며, 데이터 스키마를 수동으로 정의하거나 Back4app의 통합 AI 에이전트의 도움을 받을 수 있습니다.
다음으로, 데이터 관리를 위한 사용자 친화적인 인터페이스인 Back4app 관리 앱을 탐색하여 CRUD 작업을 쉽게 수행할 수 있습니다.
마지막으로, Svelte 애플리케이션을 Back4app에 연결하여 Parse JavaScript SDK 또는 직접 REST/GraphQL API 호출을 사용하면서 안전한 데이터 처리를 보장합니다.
이 튜토리얼이 끝나면 기본 CRUD 작업과 안전한 사용자 인증을 수행하는 완전한 Svelte 애플리케이션을 갖게 됩니다.
배울 내용
유연한 백엔드로 Svelte 기반 CRUD 애플리케이션을 설정하는 방법.
백엔드를 구성하고 Svelte 앱에 연결하는 방법.
원활한 데이터 작업을 위한 Back4app 관리 앱 활용 방법.
Docker 컨테이너화를 포함한 Svelte 애플리케이션 배포 전략.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하여 안내를 받으세요.
Svelte 개발 환경입니다.
VSCode와 같은 코드 편집기를 사용할 수 있으며 Node.js가 설치되어 있는지 확인하세요.
Svelte, JavaScript 및 REST API에 대한 기본적인 이해입니다.
필요한 경우 Svelte 문서를 검토하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Svelte 및 화면 지침에 따라 설정을 완료하세요.
새 프로젝트 만들기
﻿
프로젝트를 생성한 후, 대시보드에서 이를 확인할 수 있으며, 이는 백엔드를 구성하는 기초가 됩니다.
﻿
2단계 – 데이터 스키마 작성
데이터 구조화
이 CRUD 애플리케이션을 위해 Back4app 프로젝트에서 몇 가지 컬렉션을 정의해야 합니다. 아래는 Svelte CRUD 작업을 지원하는 데 필요한 주요 컬렉션 및 필드의 예입니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 정보를 저장합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
항목에 대한 마지막 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 인증 세부 정보를 관리합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
각 사용자에 대한 고유한 사용자 이름.
이메일
문자열
사용자의 이메일 주소.
비밀번호 해시
문자열
인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
이러한 컬렉션을 생성하고 필드를 Back4app 대시보드에서 직접 정의할 수 있습니다.
새 클래스 만들기
﻿
적절한 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필드를 필수로 표시하여 필드를 추가할 수 있습니다.
열 만들기
﻿
빠른 스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app에 통합된 AI 에이전트는 간단한 설명을 기반으로 데이터 스키마를 자동으로 설정할 수 있습니다. 이 도구는 설정 프로세스를 간소화하고 CRUD 작업에 최적화된 스키마를 보장합니다.
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
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: 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 collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 방법은 시간을 절약하고 백엔드 스키마가 앱의 요구에 완벽하게 맞도록 보장합니다.
﻿
3단계 – 관리 앱으로 데이터 관리하기
관리 앱 개요
Back4app 관리 앱은 백엔드 데이터를 관리하기 위한 코드 없는 환경을 제공합니다. 드래그 앤 드롭 인터페이스를 통해 레코드를 추가, 편집 및 삭제하는 작업을 쉽게 수행할 수 있습니다.
관리 앱 활성화
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리 앱” 선택 그런 다음 “관리 앱 활성화.”
관리자 계정 설정 자격 증명을 설정하기 위한 프롬프트를 따르세요. 이 과정은 또한 역할 (예: B4aAdminUser) 및 기타 시스템 구성을 설정합니다.
관리 앱 활성화
﻿
활성화되면 관리 앱에 로그인하여 프로젝트 데이터를 효과적으로 관리하세요.
관리자 앱 대시보드
﻿
관리자 앱 사용 방법
새 레코드 추가:
새 데이터를 추가하기 위해 컬렉션(예: 항목)에서 “레코드 추가” 기능을 사용하세요.
레코드 검사 또는 수정:
레코드를 클릭하여 세부 정보를 보거나 필드를 수정하세요.
레코드 삭제:
구식이거나 불필요한 데이터 항목을 제거하세요.
이 직관적인 인터페이스는 백엔드 데이터를 관리하는 것을 간단하고 효율적으로 만들어 줍니다.
﻿
4단계 – Svelte 앱을 Back4app에 연결하기
이제 백엔드가 설정되었으므로 Svelte 애플리케이션을 Back4app에 연결할 시간입니다.
옵션 A: Parse JavaScript SDK 사용하기
SDK 설치하기:
npm 또는 yarn을 사용하여 Parse JavaScript SDK를 설치하세요:
Bash
npm install parse
npm install parse
﻿
Svelte 앱에서 Parse 초기화하기:
주요 JavaScript 파일(예: src/main.js )에서 Parse를 초기화하세요:
JS
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Svelte 앱 초기화 코드가 이어집니다...
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Svelte 앱 초기화 코드가 이어집니다...
﻿
CRUD 함수 구현하기:
CRUD 작업을 처리하기 위해 모듈(예: src/services/items.js)을 만드세요:
JS
// src/services/items.js
import Parse from 'parse';

export async function fetchItems() {
  const query = new Parse.Query("Items");
  try {
    const results = await query.find();
    return results;
  } catch (error) {
    console.error("아이템 가져오기 오류:", error);
    return [];
  }
}

export async function addItem(title, description) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  try {
    await item.save();
    console.log("아이템이 성공적으로 생성되었습니다!");
  } catch (error) {
    console.error("아이템 생성 오류:", error);
  }
}

export async function updateItem(objectId, newTitle, newDescription) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    item.set("title", newTitle);
    item.set("description", newDescription);
    await item.save();
    console.log("아이템이 성공적으로 업데이트되었습니다!");
  } catch (error) {
    console.error("아이템 업데이트 오류:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("아이템이 성공적으로 삭제되었습니다!");
  } catch (error) {
    console.error("아이템 삭제 오류:", error);
  }
}
// src/services/items.js
import Parse from 'parse';

export async function fetchItems() {
  const query = new Parse.Query("Items");
  try {
    const results = await query.find();
    return results;
  } catch (error) {
    console.error("아이템 가져오기 오류:", error);
    return [];
  }
}

export async function addItem(title, description) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  try {
    await item.save();
    console.log("아이템이 성공적으로 생성되었습니다!");
  } catch (error) {
    console.error("아이템 생성 오류:", error);
  }
}

export async function updateItem(objectId, newTitle, newDescription) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    item.set("title", newTitle);
    item.set("description", newDescription);
    await item.save();
    console.log("아이템이 성공적으로 업데이트되었습니다!");
  } catch (error) {
    console.error("아이템 업데이트 오류:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("아이템이 성공적으로 삭제되었습니다!");
  } catch (error) {
    console.error("아이템 삭제 오류:", error);
  }
}
﻿
옵션 B: REST/GraphQL API 사용하기
Parse SDK가 귀하의 사용 사례에 적합하지 않은 경우, Back4app의 REST 또는 GraphQL 엔드포인트를 직접 호출할 수 있습니다. 예를 들어, REST를 통해 항목을 검색하려면:
JS
export async function getItemsREST() {
  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("REST error fetching items:", error);
    return [];
  }
}
export async function getItemsREST() {
  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("REST error fetching items:", error);
    return [];
  }
}
﻿
필요에 따라 Svelte 구성 요소 내에서 이러한 API 호출을 통합하십시오.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 사용
객체에 ACL을 설정하여 데이터의 보안을 강화하십시오. 예를 들어, 소유자만 볼 수 있는 항목을 생성하려면:
JS
import Parse from 'parse';

export async function createPrivateItem(title, description, owner) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item successfully created!");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
}
import Parse from 'parse';

export async function createPrivateItem(title, description, owner) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item successfully created!");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
}
﻿
클래스 수준 권한 설정(CLPS)
인증된 사용자만 특정 컬렉션과 상호작용할 수 있도록 액세스를 제한하기 위해 Back4app 대시보드에서 CLP를 직접 구성하십시오.
﻿
6단계 – Svelte에서 사용자 인증 구현
사용자 계정 설정
Back4app은 인증 관리를 위해 Parse의 내장 사용자 컬렉션을 활용합니다. Svelte 앱에서 아래 예제와 유사한 등록 및 로그인 기능을 구현하십시오:
JS
import Parse from 'parse';

export async function registerUser(username, password, email) {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Registration error:", error);
  }
}

export async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
import Parse from 'parse';

export async function registerUser(username, password, email) {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Registration error:", error);
  }
}

export async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
﻿
이 접근 방식은 세션 관리, 비밀번호 재설정 및 추가 인증 기능을 관리하는 데 확장될 수 있습니다.
﻿
7단계 – Svelte 애플리케이션 배포
Back4app은 배포 프로세스를 간소화합니다. Docker 컨테이너화를 포함하여 여러 방법으로 Svelte 앱을 배포할 수 있습니다.
7.1 Svelte 애플리케이션 빌드하기
앱 컴파일하기:
Svelte 빌드 명령을 실행하세요. 일반적으로:
Bash
npm run build
npm run build
﻿
빌드 검토하기:
생성된 파일(일반적으로 public 또는 build 폴더에) 모든 필요한 자산이 포함되어 있는지 확인하세요.
7.2 프로젝트 구조 예시
전형적인 Svelte 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Svelte 앱 도커화하기
컨테이너화된 배포를 선호하는 경우, 프로젝트의 루트에 Dockerfile을 생성하세요.
Dockerfile
# Use a Node.js image to build the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node.js image to build the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Back4app 웹 배포를 통한 배포
GitHub 리포지토리 연결:
Svelte 프로젝트를 GitHub에 호스팅합니다.
Back4app에서 배포 설정:
Back4app 대시보드에서 웹 배포 옵션을 선택하고, 리포지토리(예: Basic-CRUD-App-Svelte )를 연결한 후, 대상 브랜치를 선택합니다.
빌드 설정 정의:
빌드 명령(예: npm run build)을 지정하고 빌드 출력 디렉토리를 지정합니다.
애플리케이션 배포:
배포를 클릭하고 앱이 라이브될 때까지 로그를 모니터링합니다.
﻿
8단계 – 마무리 및 향후 개선 사항
축하합니다! Back4app에 연결된 Svelte 기반 CRUD 애플리케이션을 구축했습니다. 
당신은 Basic-CRUD-App-Svelte라는 프로젝트를 설정하고, 아이템과 사용자에 대한 컬렉션을 구성하며, Back4app 관리 앱을 통해 데이터를 관리했습니다. 
그런 다음 Parse JavaScript SDK(또는 REST/GraphQL)를 사용하여 Svelte 프론트엔드를 통합하고 강력한 보안 조치를 추가했습니다.
다음은 무엇인가요?
기능 확장:
고급 검색, 상세 보기 또는 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 로직 향상:
클라우드 함수, 서드파티 API 통합 또는 역할 기반 접근 제어를 실험해 보세요.
학습 심화:
더 많은 튜토리얼과 Back4app 문서를 탐색하여 앱을 최적화하세요.
행복한 코딩을 하시고 Svelte CRUD 애플리케이션을 만드는 것을 즐기세요!
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목에 대한 마지막 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	각 사용자에 대한 고유한 사용자 이름.
이메일	문자열	사용자의 이메일 주소.
비밀번호 해시	문자열	인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Nuxt.js로 CRUD 애플리케이션 만들기?
jQuery로 CRUD 애플리케이션 만들기?