How to Build a CRUD App with React Native?

29min
개요
이 튜토리얼에서는 Back4app을 클라우드 백엔드로 사용하여 필수 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하는 React Native 애플리케이션을 만드는 방법을 배웁니다.
이 가이드는 Back4app에서 프로젝트를 생성하고, 유연한 데이터 모델을 설정하며, RESTful API를 사용하여 React Native 앱을 백엔드와 통합하는 과정을 안내합니다.
먼저, 백엔드로 사용할 Basic-CRUD-App-ReactNative라는 제목의 Back4app 프로젝트를 설정합니다. 그런 다음 Back4app 대시보드에서 수동으로 클래스와 필드를 정의하거나 통합된 AI 에이전트를 사용하여 데이터 스키마를 설계합니다.
백엔드를 구성한 후, 데이터 관리를 위한 사용자 친화적인 드래그 앤 드롭 인터페이스를 제공하는 Back4app 관리 앱을 사용하여 CRUD 작업을 더 쉽게 수행할 수 있습니다.
이 가이드가 끝날 무렵, 레코드를 생성, 읽기, 업데이트 및 삭제할 수 있는 완전한 기능의 React Native 애플리케이션을 갖추게 되며, 안전한 사용자 인증 및 데이터 처리를 지원합니다.
주요 이점
모바일 앱 구축: React Native CRUD 애플리케이션을 강력한 백엔드와 함께 개발하는 방법을 배웁니다.
백엔드 통합: Back4app을 사용하여 확장 가능한 데이터 모델을 설계하고 통합하는 방법을 이해합니다.
손쉬운 데이터 관리: Back4app의 관리 앱을 사용하여 애플리케이션의 데이터를 신속하게 관리합니다.
안전한 운영: 안전한 사용자 인증 및 데이터 프라이버시 조치를 구현합니다.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
새 프로젝트가 설정된 활성 Back4app 계정.
도움이 필요하신가요? Back4app 시작하기를 참조하세요.
React Native 개발 환경.
Node.js, npm(또는 yarn), React Native CLI와 같은 도구를 설치하세요. Expo는 빠른 프로토타입 제작에도 사용할 수 있습니다.
React, JavaScript 및 REST API에 대한 이해.
리프레셔가 필요하시면 React Native 문서를 참조하세요.
﻿
1단계 – Back4app 프로젝트 설정하기
Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-ReactNative 및 설정을 완료하기 위한 안내를 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나며, 백엔드 구성의 기초를 마련합니다.
﻿
2단계 – 데이터 모델 만들기
데이터 구조화하기
이 CRUD 앱을 위해 Back4app 프로젝트 내에 몇 개의 컬렉션을 정의할 것입니다. 아래는 핵심 CRUD 기능을 지원하는 데 필요한 주요 컬렉션과 필드의 예입니다.
1. 컬렉션: 항목
이 컬렉션은 각 항목에 대한 세부 정보를 저장합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 설명.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 수집: 사용자
이 컬렉션은 사용자 자격 증명 및 인증 정보를 관리합니다.
필드
유형
설명
_id
객체 ID
자동으로 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 이메일 주소(고유해야 함).
비밀번호 해시
문자열
안전한 로그인을 위한 해시된 비밀번호.
생성일
날짜
계정이 생성된 시간.
업데이트됨
날짜
계정 세부정보가 마지막으로 업데이트된 시간.
Back4app 대시보드를 통해 이러한 컬렉션과 그 필드를 정의할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 입력하고, 기본값을 설정하고, 필수 여부를 표시하여 새 필드를 추가할 수 있습니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app에 통합된 AI 에이전트는 간단한 설명으로부터 데이터 스키마를 자동으로 구성할 수 있습니다. 이 도구는 프로젝트 설정을 간소화하고 데이터 모델이 필요한 CRUD 작업을 지원하도록 보장합니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드에서 프로젝트 설정으로 이동하여 AI 에이전트를 선택합니다.
스키마 설명하기:
필요한 컬렉션과 필드에 대한 자세한 설명을 입력합니다.
검토 및 확인:
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 관리자 앱은 백엔드 데이터 관리를 단순화하는 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 기능을 통해 복잡한 쿼리를 작성하지 않고도 CRUD 작업—레코드 추가, 보기, 업데이트 및 삭제—를 수행할 수 있습니다.
관리자 앱 활성화
“더보기” 메뉴로 가기 당신의 Back4app 대시보드에서.
“관리자 앱” 클릭하기 그리고 “관리자 앱 활성화.”
관리자 자격 증명 설정:
초기 관리자 계정을 생성하여 B4aAdminUser와 같은 시스템 역할을 설정합니다.
관리자 앱 활성화
﻿
활성화되면, 관리자 앱에 로그인하여 애플리케이션 데이터를 관리하세요.
관리자 앱 대시보드
﻿
관리자 앱을 통한 CRUD 작업 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 레코드 삽입: 모든 컬렉션(예: 항목)에서 “레코드 추가” 기능을 사용하여 새로운 데이터를 도입하세요.
레코드 검토/수정: 세부 정보를 검토하거나 필드를 업데이트할 레코드를 선택하세요.
레코드 삭제: 더 이상 필요하지 않은 항목을 제거하세요.
이 간소화된 도구는 데이터 관리를 간단하게 만들어 작업 흐름을 개선합니다.
﻿
4단계 – React Native 앱을 Back4app과 통합하기
백엔드를 설정한 후, React Native 애플리케이션을 Back4app에 연결할 시간입니다.
REST API를 사용한 통합
JavaScript용 Parse SDK가 있지만, React Native 환경에서는 유연성을 위해 표준 REST API 호출을 사용할 수 있습니다. 아래는 JavaScript fetch API를 사용하여 CRUD 작업을 수행하는 방법의 예입니다.
예: 항목 가져오기
JS
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      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 fetching items:', error);
  }
}

export default fetchItems;
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      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 fetching items:', error);
  }
}

export default fetchItems;
﻿
예: 새 항목 만들기
JS
async function createItem(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();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
async function createItem(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();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
﻿
업데이트 및 삭제를 위해 적절한 HTTP 메서드(업데이트는 PUT/POST, 삭제는 DELETE)를 사용하여 항목을 업데이트하고 삭제하는 함수를 유사하게 구현할 수 있습니다.
필요에 따라 이러한 함수를 React Native 구성 요소에 통합하여 CRUD 작업을 완료하십시오.
﻿
5단계 – 백엔드 보안 강화
액세스 제어 목록(ACL) 구성
ACL을 설정하여 기록을 보호하세요. 예를 들어, 항목이 소유자만 접근할 수 있도록 하려면:
JS
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    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, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    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, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
﻿
클래스 수준 권한 설정 (CLPs)
Back4app 대시보드를 통해 컬렉션의 기본 권한을 조정하세요. 이를 통해 인증된 사용자만 특정 데이터 유형과 상호작용할 수 있도록 보장합니다.
﻿
6단계 – 사용자 인증 구현
사용자 관리 구성
Back4app은 인증을 처리하기 위해 내장된 사용자 컬렉션을 활용합니다. React Native 앱에서 REST API 호출을 사용하여 사용자 등록 및 로그인을 관리할 수 있습니다.
예시: 사용자 등록
JS
async function signUp(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();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
async function signUp(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();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
﻿
예시: 사용자 로그인
JS
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
﻿
이 접근 방식은 비밀번호 재설정, 세션 관리 및 추가 인증 기능을 포함하도록 확장할 수 있습니다.
﻿
결론 및 다음 단계
잘 하셨습니다! Back4app과 통합된 React Native CRUD 애플리케이션을 성공적으로 구축했습니다.
이 가이드에서는 Basic-CRUD-App-ReactNative라는 프로젝트를 설정하고, 항목 및 사용자에 대한 데이터 스키마를 설계하며, Back4app 관리 앱으로 백엔드를 관리했습니다.
또한, REST API를 통해 앱을 연결하고 중요한 보안 조치 및 사용자 인증을 구현했습니다.
다음은 무엇인가요?
앱 확장:
고급 필터링, 상세 항목 보기 또는 실시간 데이터 업데이트와 같은 더 많은 기능을 추가하세요.
백엔드 기능 향상:
클라우드 기능, 타사 통합 또는 액세스 제어 정책을 세밀하게 조정해 보세요.
계속 배우기:
다음의 Back4app 문서 및 추가 튜토리얼을 확인하여 기술을 더욱 연마하세요.
코딩을 즐기고 React Native 프로젝트에 행운이 있기를 바랍니다!
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 설명.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	유형	설명
_id	객체 ID	자동으로 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 이메일 주소(고유해야 함).
비밀번호 해시	문자열	안전한 로그인을 위한 해시된 비밀번호.
생성일	날짜	계정이 생성된 시간.
업데이트됨	날짜	계정 세부정보가 마지막으로 업데이트된 시간.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Flutter로 CRUD 앱 만들기?
Objective-C로 iOS CRUD 앱 만들기?