토도 앱 백엔드 템플릿
React Native - 스키마, API 및 AI 가이드

주요 내용

개요

Todo 앱은 백엔드 개발 학습을 위한 가장 일반적인 시작점 중 하나입니다. 내부적으로는 사용자 등록, 작업 CRUD, 소유권 기반 액세스 제어, 실시간 동기화 및 오프라인 지원(선택 사항)이 필요합니다.

아래 스키마는 포인터로 연결된 두 개의 클래스, 즉 _User(기본 제공)와 Todo를 정의합니다. Parse React 네이티브 SDK(Back4app)를 사용하면 사용자 지정 API 계층을 작성하지 않고도 JavaScript 또는 TypeScript 코드에서 직접 이 백엔드와 상호 작용하여 객체를 쿼리, 생성, 업데이트, 삭제하고 오프라인에 대한 고정 기능을 수행할 수 있습니다.

왜 Back4app로 React Native Todo 백엔드를 구축해야 할까요?

Back4app는 준비된 백엔드와 Parse React 네이티브 SDK를 제공하므로 REST 배선 및 인증 대신 UX와 성능에 집중할 수 있습니다.

• •오프라인 우선 및 동기화: Todo 개체를 로컬 데이터 저장소에 고정하면 목록이 오프라인에서 작동하고 앱이 다시 온라인 상태가 되면 동기화되므로 모바일에 이상적입니다.
• •구성 요소 및 후크: React 후크 및 컨텍스트와 함께 SDK를 사용하고, 실시간 업데이트를 위해 Parse 쿼리 및 Live Queries와 상태를 동기화하세요.
• •크로스 플랫폼, 하나의 백엔드: 브랜드2__ 및 브랜드1__에 대한 스키마 및 API가 동일하며, 엑스포 또는 베어 워크플로를 사용하는 React 네이티브 팀에 이상적입니다.

엑스포 또는 베어 워크플로우를 사용하는 React 네이티브 개발자에게 이상적입니다(하나의 백엔드, 두 플랫폼 모두).

핵심 혜택

프로덕션 준비가 완료된 Todo 백엔드를 통해 더 빠르게 출시하고 앱에 집중할 수 있습니다.

기술 스택

이 Todo 앱 템플릿을 지원하는 모든 것을 한눈에 살펴보세요.

응급실 다이어그램

PH0__ Todo 앱 데이터 모델에 대한 엔티티-관계 다이어그램입니다.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

통합 흐름

인증-크루 시퀀스: React Native 앱이 Back4app와 대화하는 방법 - 로그인, 쿼리 및 할 일 생성.

sequenceDiagram
  participant User
  participant App as React Native App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: Array of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>User: Updated list

데이터 사전

스키마의 모든 클래스에 대한 완전한 필드 참조.

보안 및 권한

소유권, ACL 및 클래스 수준 권한이 이 스키마에서 데이터를 보호하는 방식입니다.

스키마(JSON)

원시 JSON 스키마 정의 - 복사하여 Back4app 앱에서 사용하거나 API를 통해 가져옵니다.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API 플레이그라운드

Todo 스키마에 대한 REST 및 GraphQL 엔드포인트를 사용해 보세요. 위 예제 데이터의 응답 - Back4app 계정이 필요하지 않습니다.

이 템플릿과 동일한 Todo 스키마를 사용합니다.

단계별 React Native 통합

네이티브 SDK를 사용하여 React Native 앱에서 Parse React 백엔드에 연결합니다.

1. 1단계: Parse React 네이티브 SDK 설치하기

   npm 또는 yarn을 사용하여 프로젝트에 Parse React 네이티브 SDK(또는 React-native-Parse)를 추가합니다.

   JavaScript

   복사

   1

   2

   npm install parse --save
   # or: yarn add parse

2. 2단계: 앱에서 Parse 초기화하기

   애플리케이션 ID, 서버 URL, JavaScript 키를 사용하여 앱 항목(예: App.js 또는 index.js)에서 Parse SDK를 초기화합니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   import Parse from 'parse/react-native';
   
   Parse.setAsyncStorage(AsyncStorage);
   Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
   Parse.serverURL = 'https://parseapi.back4app.com';
   

3. 3단계: 모든 항목 쿼리하기

   Todo 클래스에 대한 Parse 쿼리를 만들고, 우선순위에 따라 오름차순을 추가한 다음 find()(또는 findWithCount())를 호출합니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   async function getTodos() {
     const query = new Parse.Query('Todo').ascending('priority');
     const results = await query.find();
     return results;
   }

4. 4단계: 할 일 만들기

   새 Parse.Object('Todo')를 만들고 제목, 완료 및 우선순위를 설정한 다음 save()를 호출합니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   async function createTodo(title, priority = 3) {
     const Todo = Parse.Object.extend('Todo');
     const todo = new Todo();
     todo.set('title', title);
     todo.set('done', false);
     todo.set('priority', priority);
     await todo.save();
     return todo;
   }

5. 5단계: 할 일 업데이트 및 삭제

   objectId로 할 일을 가져오고, 필드를 설정한 다음 save()를 호출하여 업데이트하거나 destroy()를 호출하여 삭제합니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   async function markDone(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     todo.set('done', true);
     await todo.save();
   }
   
   async function deleteTodo(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     await todo.destroy();
   }

전체 JavaScript/TypeScript 데이터 모델

브랜드0__ SDK를 사용하여 유형 안전 직렬화를 위한 전체 Todo 유형 및 헬퍼를 복사하세요.

/** @typedef {{ objectId?: string, title: string, done: boolean, dueDate?: string, priority: number, owner?: { objectId: string }, createdAt?: string, updatedAt?: string }} Todo */

/**
 * @param {Parse.Object} obj
 * @returns {Todo}
 */
function todoFromParse(obj) {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner') ? { objectId: obj.get('owner').id } : undefined,
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

자주 묻는 질문

Todo 앱 백엔드 템플릿에 대한 일반적인 질문입니다.