할 일 앱 백엔드 템플릿
React — 스키마, API 및 AI 가이드

주요 요점

개요

Todo 앱은 백엔드 개발 학습을 위한 가장 일반적인 시작점 중 하나입니다. 내부적으로 사용자 등록, 작업 CRUD, 소유 기반 접근 제어 및 선택적으로 실시간 동기화가 필요합니다.

아래 스키마는 _User (내장) 및 Todo라는 두 클래스를 정의하며, 이들은 포인터로 연결되어 있습니다. Back4app React SDK를 사용하면 앱에서 이 백엔드와 상호작용할 수 있습니다 — 객체를 쿼리하고, 생성하고, 업데이트하고, 삭제하는 작업을 사용자 정의 API 레이어를 작성하지 않고도 수행할 수 있습니다.

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

Back4app은 준비된 백엔드와 타입이 지정된 SDK를 제공하므로 REST 연결 코드를 작성하거나 인증을 직접 관리하지 않고도 할 일 앱을 구축할 수 있습니다.

• •SDK 및 타입 안전성: SDK는 Todo와 User를 타입 안전하게 유지하고 JSON을 처리하므로 보일러플레이트 코드를 덜 작성할 수 있습니다.
• •비동기 및 선택적 오프라인: async/await를 사용하세요; 지원되는 SDK는 로컬 핀닝을 제공하므로 목록이 오프라인에서도 작동하고 온라인으로 돌아올 때 동기화됩니다.
• •Live Queries: Todo 변경 사항을 구독하여 UI가 WebSockets를 통해 실시간으로 업데이트됩니다.

모든 스택에 대해 동일한 스키마와 API — 백엔드를 변경하지 않고 클라이언트를 나중에 전환할 수 있습니다.

핵심 이점

더 빠르게 배포할 수 있는 프로덕션 준비 완료 Todo 백엔드로 앱에 집중할 수 있습니다.

기술 스택

이 Todo 앱 템플릿을 지원하는 모든 것.

ER 다이어그램

React 할 일 앱 데이터 모델에 대한 개체-관계 다이어그램입니다.

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"

통합 흐름

Auth-to-CRUD 시퀀스: 당신의 React 앱이 Back4app와 통신하는 방법 — 로그인 후, 할 일을 조회하고 생성합니다.

sequenceDiagram
  participant User
  participant App as React 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: List 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 통합

React 앱에서 Back4app 백엔드에 연결하고 Back4app React SDK를 사용하세요.

1. 1단계: Back4app React SDK 설치

   Install the Parse JavaScript SDK in your React project.

   Bash

   복사

   1

   npm install parse

2. 2단계: 앱에서 Back4app 초기화

   Initialize Parse with your App ID and server URL (e.g. in index.js or App.js).

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   import Parse from 'parse';
   
   Parse.initialize(
     'YOUR_APP_ID',
     'YOUR_JAVASCRIPT_KEY',
     { serverURL: 'https://parseapi.back4app.com' }
   );
   Parse.serverURL = 'https://parseapi.back4app.com';

3. 3단계: 모든 할 일 쿼리

   SDK를 사용하여 우선순위별로 정렬된 모든 Todo 객체를 가져옵니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   7

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

4. 4단계: 할 일 만들기

   제목, 완료 여부 및 우선순위를 가진 새로운 Todo를 생성한 후 저장하세요.

   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단계: 할 일 업데이트 및 삭제

   필드를 업데이트하고 저장하거나 객체를 삭제합니다.

   JavaScript

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

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

전체 데이터 모델

타입 안전 직렬화를 위한 전체 Todo 모델을 복사하세요(예: 클래스, 인터페이스 또는 타입 정의).

// TypeScript interface for Todo (matches Back4app schema)
interface Todo {
  objectId?: string;
  title: string;
  done: boolean;
  dueDate?: string;  // ISO date
  priority: number;
  owner?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

// Helper: Parse.Object -> Todo
function toTodo(obj: Parse.Object): Todo {
  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'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

자주 묻는 질문

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