How to Build a CRUD App with Ionic?

27min
소개
이 가이드에서는 Ionic을 사용하여 포괄적인 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 생성합니다.
이 튜토리얼은 데이터 관리를 효율적으로 수행하면서 Back4app을 백엔드 서비스로 통합하는 앱을 설정하는 방법을 보여줍니다. 먼저 Basic-CRUD-App-Ionic이라는 Back4app 프로젝트를 구성하여 강력한 데이터 저장소로 사용합니다.
그 다음, 수동으로 또는 Back4app AI 에이전트를 활용하여 컬렉션과 필드를 정의하여 확장 가능한 데이터 스키마를 설계합니다. 이는 애플리케이션의 백엔드가 필수 데이터 작업을 처리할 준비가 되어 있음을 보장합니다.
다음으로, 직관적인 Back4app 관리 앱을 활용하여 원활한 데이터 관리를 위한 드래그 앤 드롭 인터페이스를 제공받고, CRUD 작업을 쉽게 실행할 수 있습니다.
마지막으로, REST/GraphQL 호출을 사용하여 Ionic 프론트엔드를 Back4app과 통합하고, 고급 액세스 제어로 백엔드를 보호합니다.
이 튜토리얼이 끝나면 기본 CRUD 기능을 지원할 뿐만 아니라 사용자 인증 및 강력한 데이터 관리를 통합한 프로덕션 준비 완료 Ionic 애플리케이션을 구축하게 됩니다.
주요 요점
신뢰할 수 있는 백엔드 서비스를 사용하여 데이터를 효율적으로 관리하는 CRUD 애플리케이션을 구축하는 방법을 이해합니다.
확장 가능한 백엔드 스키마를 설계하고 이를 Ionic 프론트엔드와 통합하여 우수한 사용자 경험을 제공하는 방법을 배웁니다.
Back4app 관리 앱에서 제공하는 사용자 친화적인 드래그 앤 드롭 인터페이스를 통해 데이터를 관리하는 방법을 탐색합니다.
액세스 제어 조치를 통해 백엔드를 보호하는 방법에 대한 통찰력을 얻습니다.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정과 활성 프로젝트.
안내를 보려면 Back4app 시작하기를 방문하세요.
이오닉 개발 환경.
다음의 지침에 따라 이오닉 CLI를 설치하세요: 이오닉 프레임워크 문서. Node.js (v14 이상)가 설치되어 있는지 확인하세요.
TypeScript, Angular (또는 이오닉을 위한 선호하는 프레임워크), REST API에 대한 이해.
추가적인 통찰을 위해 이오닉 문서를 참조하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱”을 선택하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Ionic 및 설정을 완료하기 위한 안내를 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 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: 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 for 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 관리자 앱은 드래그 앤 드롭 인터페이스를 통해 백엔드 데이터를 쉽게 관리할 수 있는 노코드 도구입니다. 이 직관적인 도구를 사용하면 CRUD 작업을 손쉽게 실행할 수 있습니다.
관리자 앱 활성화
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리자 앱” 선택 후 “관리자 앱 활성화.”
관리자 자격 증명 설정을 통해 첫 번째 관리자 계정을 생성합니다. 이 단계에서는 역할(예: B4aAdminUser) 및 시스템 컬렉션도 구성됩니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 데이터를 관리하기 시작합니다.
관리자 앱 대시보드
﻿
관리자 앱을 통한 CRUD 작업 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
기록 추가: 컬렉션(예: 항목)에서 “기록 추가” 버튼을 클릭하여 새 항목을 삽입합니다.
기록 보기/수정: 항목을 선택하여 세부 정보를 검사하거나 수정합니다.
기록 제거: 삭제 기능을 사용하여 불필요한 항목을 제거합니다.
이 간소화된 인터페이스는 데이터 관리 작업을 단순화하여 전반적인 사용자 경험을 향상시킵니다.
﻿
4단계 – Ionic과 Back4app 통합
백엔드가 구성되었으므로 Ionic 프론트엔드를 Back4app에 연결할 시간입니다.
REST 또는 GraphQL 사용
REST 또는 GraphQL을 사용하여 CRUD 작업을 실행할 수 있습니다. 예를 들어, REST를 사용하여 항목을 검색하려면:
TypeScript
// Example REST call within an Ionic service
async function fetchItems() {
  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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
// Example REST call within an Ionic service
async function fetchItems() {
  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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
﻿
응용 프로그램의 필요에 따라 이러한 API 호출을 Ionic 구성 요소에 통합합니다.
﻿
5단계 – 백엔드 보안 설정
액세스 제어 목록(ACL) 설정
ACL을 객체에 적용하여 데이터 보안을 강화하세요. 예를 들어, 개인 항목을 생성하려면:
TypeScript
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 설정하여 기본 액세스 규칙을 정의하세요. 이 구성은 인증된 사용자 또는 권한이 부여된 사용자만 민감한 데이터에 접근할 수 있도록 제한합니다.
﻿
6단계 – 사용자 인증
사용자 계정 관리
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 관리합니다. Ionic 애플리케이션에서 사용자 등록 및 로그인을 다음과 같이 구현하세요:
TypeScript
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
로그인 및 세션 관리를 구현하기 위해 유사한 패턴을 따를 수 있습니다. 소셜 로그인, 이메일 확인 및 비밀번호 복구와 같은 추가 기능도 Back4app 대시보드를 통해 구성할 수 있습니다.
﻿
7단계 – 결론 및 향후 방향
축하합니다! Back4app과 통합된 Ionic을 사용하여 기본 CRUD 애플리케이션을 성공적으로 개발했습니다. 이 튜토리얼에서 여러분은:
Back4app에서 Basic-CRUD-App-Ionic이라는 프로젝트를 구성했습니다.
아이템과 사용자에 대한 상세한 데이터베이스 컬렉션을 설계했습니다.
효율적인 Back4app 관리 앱을 사용하여 데이터를 관리했습니다.
REST/GraphQL API를 사용하여 Ionic 프론트엔드를 백엔드와 연결했습니다.
강력한 ACL 및 CLP로 백엔드를 보호했습니다.
사용자 계정을 관리하기 위해 사용자 인증을 구현했습니다.
다음 단계:
프론트엔드 확장:
추가적인 뷰, 내비게이션 및 실시간 업데이트로 Ionic 애플리케이션을 풍부하게 만드세요.
고급 기능 통합:
클라우드 기능, 서드파티 API 통합 또는 향상된 역할 기반 접근 제어를 고려하세요.
추가 자료 상담:
 Back4app 문서 및 Ionic 자료를 탐색하여 고급 최적화 및 사용자 정의 기술을 배우세요.
이 튜토리얼을 따라함으로써, 이제 Ionic과 Back4app을 사용하여 동적이고 생산 준비가 완료된 CRUD 애플리케이션을 구축하고 보호할 수 있는 기술을 갖추게 되었습니다. 코딩과 추가 실험을 즐기세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	인증을 위한 암호화된 비밀번호.
생성일	날짜	사용자가 생성된 타임스탬프.
업데이트됨	날짜	사용자 세부 정보가 수정된 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Create a Basic CRUD App with Preact?
Building a CRUD App with Jetpack Compose?