How to Build a CRUD App with ReactJS?

41min
소개
이 튜토리얼에서는 ReactJS를 사용하여 포괄적인 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 구축합니다.
이 가이드는 CRUD 앱을 구축하는 방법을 보여주어 소프트웨어 애플리케이션의 기본 작업을 수행하도록 설계되었습니다. 이를 통해 데이터를 효과적으로 관리하고 업데이트할 수 있습니다.
먼저, Basic-CRUD-App-ReactJS라는 이름의 Back4app 프로젝트를 생성하고 구성하여 웹 애플리케이션의 강력한 백엔드 시스템 역할을 합니다.
다음으로, Back4app AI 에이전트의 도움을 받거나 수동으로 자세한 컬렉션과 필드를 정의하여 확장 가능한 데이터베이스 스키마를 설계합니다.
그런 다음, 드래그 앤 드롭 인터페이스를 갖춘 사용자 친화적인 관리 도구인 Back4app 관리 앱을 활용하여 컬렉션의 데이터를 쉽게 관리합니다.
이 관리 인터페이스는 사용자 경험을 개선하고 사용자 인터페이스를 단순화하여 사용자가 CRUD 작업을 신속하게 수행할 수 있도록 합니다.
마지막으로, ReactJS 프론트엔드를 배포하고 REST/GraphQL(또는 사용 가능한 경우 Parse SDK)을 사용하여 Back4app과 통합하며, 고급 액세스 제어로 백엔드를 안전하게 보호합니다.
이 가이드를 끝내면 기본 CRUD 작업을 지원할 뿐만 아니라 사용자 인증 및 강력한 데이터 업데이트 기능을 포함하는 프로덕션 준비가 완료된 웹 애플리케이션을 구축하게 됩니다.
주요 내용
신뢰할 수 있는 데이터베이스 관리 시스템을 사용하여 데이터를 효율적으로 관리하는 CRUD 애플리케이션을 구축하는 방법을 배우세요.
확장 가능한 백엔드를 설계하고 이를 ReactJS 프론트엔드와 통합하여 사용자 경험을 향상시키는 데 대한 실용적인 통찰력을 얻으세요.
드래그 앤 드롭 관리 도구(Back4app Admin App)를 사용하여 생성, 읽기, 업데이트 및 삭제 작업을 간소화하는 방법을 알아보세요.
웹 애플리케이션을 신속하게 배포하기 위한 기술, Docker 컨테이너화 등을 이해하세요.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정과 새 프로젝트가 설정되어 있어야 합니다.
도움이 필요하면 Back4app 시작하기를 참조하세요.
ReactJS 개발 환경이 필요합니다.
 Create React App 또는 유사한 도구를 사용하세요. Node.js(버전 14 이상)가 설치되어 있어야 합니다.
JavaScript, ReactJS 및 REST API에 대한 기본 이해가 필요합니다.
필요한 경우 ReactJS 문서를 검토하세요.
﻿
1단계 – 프로젝트 설정
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-ReactJS 및 프롬프트에 따라 프로젝트를 생성하세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면, 새로운 프로젝트가 Back4app 대시보드에 나타나며, 백엔드 구성 및 프로젝트 관리를 위한 견고한 기반을 제공합니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 설계
기본 CRUD 앱을 위해 여러 컬렉션을 생성할 것입니다. 
아래는 데이터베이스 스키마를 효과적으로 설정하는 데 필요한 필드와 데이터 유형을 설명하는 컬렉션의 몇 가지 예입니다.
이 컬렉션은 사용자가 데이터를 생성, 읽기, 업데이트 및 삭제할 수 있도록 하는 기본 CRUD 작업을 수행하도록 설계되었습니다.
1. 항목 컬렉션
이 컬렉션은 각 항목에 대한 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동으로 생성된 기본 키.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
항목이 마지막으로 업데이트된 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 정보 및 인증 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동으로 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
인증을 위한 해시된 비밀번호.
생성일
날짜
사용자 계정이 생성된 타임스탬프.
업데이트됨
날짜
사용자 계정이 업데이트된 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 생성하고 필드를 정의하는 열을 추가하여 수동으로 설정할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필수 여부를 정의하여 데이터베이스 필드를 쉽게 만들 수 있습니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 Back4app 대시보드에서 직접 사용할 수 있는 강력한 도구입니다. 
프롬프트를 기반으로 원하는 컬렉션과 필드를 설명하여 데이터베이스 스키마를 자동으로 생성할 수 있습니다.
이 기능은 프로젝트 관리에 있어 상당한 시간 절약이 되며, 웹 애플리케이션에서 요구하는 기본 작업을 수행할 수 있도록 데이터베이스 관리 시스템이 설정되도록 도와줍니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드에 로그인하고 메뉴 또는 프로젝트 설정 내에서 AI 에이전트를 찾습니다.
데이터 모델 설명하기:
AI 에이전트 인터페이스에서 필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 붙여넣습니다.
검토 및 적용:
제출 후, AI 에이전트가 컬렉션 및 필드 정의를 생성합니다. 이러한 제안을 검토하고 프로젝트에 적용합니다.
예시 프롬프트
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이와 같이 AI 에이전트를 사용하면 시간을 절약하고 스키마가 일관되며 애플리케이션의 요구에 최적화되도록 보장합니다.
﻿
3단계 – 관리 앱 및 CRUD 작업 활성화
관리 앱 개요
Back4app 관리 앱은 백엔드 데이터를 관리할 수 있는 강력한 코드 없는 인터페이스입니다.
이 관리 도구는 사용자가 레코드를 생성, 읽기, 업데이트 및 삭제하는 CRUD 작업을 쉽게 수행할 수 있도록 드래그 앤 드롭 사용자 인터페이스를 제공합니다.
관리 앱 활성화
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리 앱” 클릭 후 “관리 앱 활성화.”
첫 번째 관리자 사용자를 생성하여 관리자 자격 증명을 구성합니다. 이 과정은 역할(예: B4aAdminUser) 및 시스템 컬렉션도 설정합니다.
관리 앱 활성화
﻿
활성화한 후, 데이터를 관리하기 위해 관리 앱에 로그인합니다.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 사용하기
관리자 앱 내에서 다음을 수행할 수 있습니다:
기록 생성하기: 새 항목을 생성하려면 컬렉션(예: 항목) 내에서 “기록 추가” 버튼을 클릭하세요.
기록 읽기/업데이트하기: 세부 정보를 보거나 필드를 편집하려면 원하는 기록을 선택하여 원활한 데이터 업데이트를 보장하세요.
기록 삭제하기: 더 이상 필요하지 않은 기록을 제거하려면 삭제 옵션을 사용하세요.
이 사용하기 쉬운 관리 도구는 CRUD 기능을 위한 간단한 드래그 앤 드롭 인터페이스를 제공하여 전체 사용자 경험을 향상시킵니다.
﻿
4단계 – ReactJS와 Back4app 통합하기
이제 백엔드가 설정되고 관리자 앱을 통해 관리되었으므로, ReactJS 프론트엔드를 Back4app에 연결할 시간입니다.
옵션 A: Parse SDK 사용하기
Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
React 앱에서 Parse 초기화하기:
파일을 생성하세요 (예: src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// 실제 Back4app 자격 증명으로 교체하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// 실제 Back4app 자격 증명으로 교체하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
React 컴포넌트에서 Parse 사용하기:
예를 들어, 항목을 가져오고 표시하는 컴포넌트를 생성하세요:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("항목 가져오기 오류:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>항목들</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("항목 가져오기 오류:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>항목들</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
옵션 B: REST 또는 GraphQL 사용하기
환경이 Parse SDK를 지원하지 않는 경우, REST 또는 GraphQL을 사용하여 CRUD 작업을 수행할 수 있습니다. 예를 들어, REST를 사용하여 항목을 가져오는 방법은 다음과 같습니다:
JS
// Example REST call to fetch items
const fetchItems = async () => {
  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 fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = async () => {
  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 fetching items:', error);
  }
};
fetchItems();
﻿
필요에 따라 이러한 API 호출을 React 구성 요소에 통합하십시오.
﻿
5단계 – 백엔드 보안
액세스 제어 목록 (ACLs)
객체에 ACL을 할당하여 데이터를 보호하세요. 예를 들어, 개인 항목을 생성하려면:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  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, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  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);
  }
}
﻿
클래스 수준 권한 (CLPs)
Back4app 대시보드에서 각 컬렉션에 대한 CLP를 구성하여 기본 액세스 규칙을 설정하세요. 이를 통해 인증된 사용자 또는 권한이 부여된 사용자만 민감한 데이터에 접근할 수 있습니다.
﻿
6단계 – 사용자 인증
사용자 계정 설정
Back4app은 인증을 위해 Parse의 사용자 클래스를 활용합니다. React 앱에서 사용자 등록 및 로그인을 다음과 같이 처리합니다:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
로그인 및 세션 관리에도 유사한 접근 방식을 사용할 수 있습니다. 소셜 로그인, 이메일 인증 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드에서 구성할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 ReactJS 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 배포하여 ReactJS 프론트엔드를 원활하게 호스팅할 수 있습니다.
이 섹션에서는 프로덕션 빌드를 준비하고, 소스 코드를 GitHub에 커밋하고, 리포지토리를 웹 배포와 통합하고, 사이트를 배포하는 방법을 배웁니다.
7.1 프로덕션 빌드 준비하기
터미널에서 프로젝트 폴더를 엽니다.
빌드 명령어를 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 build 폴더를 생성하여 모든 최적화된 정적 파일( index.html, JavaScript, CSS 및 이미지 포함)을 포함합니다.
빌드를 확인합니다:
build 폴더에 필요한 자산 하위 디렉토리와 함께 index.html 파일이 포함되어 있는지 확인합니다.
﻿
7.2 소스 코드를 정리하고 업로드하기
귀하의 리포지토리에는 ReactJS 프론트엔드의 전체 소스 코드가 포함되어야 합니다. 일반적인 파일 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
샘플 소스 코드 파일
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
소스 파일을 추가하세요:
Bash
git add .
git add .
﻿
변경 사항을 커밋하세요:
Bash
git commit -m "ReactJS 프론트엔드 소스 코드의 초기 커밋"
git commit -m "ReactJS 프론트엔드 소스 코드의 초기 커밋"
﻿
GitHub 리포지토리를 생성하세요:
예를 들어, Basic-CRUD-App-ReactJS-Frontend라는 이름의 리포지토리를 GitHub에 생성하세요.
코드를 GitHub에 푸시하세요:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub 리포지토리를 웹 배포와 통합하기
웹 배포 접근하기:
Back4app 대시보드에 로그인하고, 프로젝트(기본-CRUD-앱-리액트JS)로 이동한 후 웹 배포 기능을 클릭하세요.
GitHub에 연결하기:
아직 연결하지 않았다면, 화면의 안내에 따라 GitHub 계정을 통합하세요. 이 연결을 통해 Back4app이 귀하의 리포지토리에 접근할 수 있습니다.
리포지토리 및 브랜치 선택하기:
생성한 리포지토리(예: 기본-CRUD-앱-리액트JS-프론트엔드)를 선택하고, ReactJS 코드가 포함된 브랜치(예: main)를 선택하세요.
﻿
7.4 배포 구성하기
추가 구성 세부정보를 제공하십시오:
빌드 명령어:
저장소에 미리 빌드된 build 폴더가 포함되어 있지 않은 경우, 빌드 명령어를 지정하십시오 (예: npm run build). Back4app은 배포 중 이 명령어를 실행합니다.
출력 디렉토리:
출력 디렉토리를 build로 설정하여 Back4app이 정적 사이트 파일이 포함된 폴더를 알 수 있도록 하십시오.
환경 변수:
애플리케이션이 환경 변수(예: API 키)에 의존하는 경우, 구성 설정에 추가하십시오.
﻿
7.5 ReactJS 애플리케이션 프로젝트 도커화하기
배포를 위해 Docker를 사용하는 것을 선호하는 경우, ReactJS 애플리케이션을 컨테이너화할 수 있습니다. 다음과 유사한 내용을 포함하는 Dockerfile을 저장소에 포함하십시오:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
이 Dockerfile을(를) 리포지토리에 포함하세요. 그런 다음, 웹 배포 구성에서 Docker 배포 옵션을 선택하여 컨테이너화된 애플리케이션을 빌드하고 배포하세요.
﻿
7.6 애플리케이션 배포
배포 버튼 클릭:
배포 설정을 구성한 후, 배포 버튼을 클릭하세요.
빌드 프로세스 모니터링:
Back4app이 GitHub에서 코드를 가져오고, 빌드 명령을 실행하며(구성된 경우), 컨테이너 내에서 앱을 배포합니다.
URL 얻기:
배포가 완료되면 Back4app이 ReactJS 애플리케이션이 호스팅되는 URL을 제공합니다.
﻿
7.7 배포 확인
제공된 URL 방문:
웹 브라우저에서 URL을 열어 배포된 사이트를 확인하세요.
애플리케이션 테스트:
애플리케이션이 올바르게 로드되고, 모든 경로가 예상대로 작동하며, 모든 자산(CSS, JavaScript, 이미지)이 제대로 제공되는지 확인하세요.
필요시 문제 해결:
브라우저의 개발자 도구를 사용하여 오류를 확인하세요. 문제가 발생하면 Back4app의 배포 로그를 검토하고 GitHub 통합 및 빌드 설정을 확인하세요.
﻿
8단계 – 결론 및 다음 단계
축하합니다! ReactJS와 Back4app을 사용하여 완전한 기본 CRUD 앱을 구축했습니다. 
당신은 Basic-CRUD-App-ReactJS, 아이템과 사용자에 대한 상세한 데이터베이스 컬렉션을 설계하고, 강력한 관리 앱을 통해 데이터를 관리했습니다. 
또한 ReactJS 프론트엔드를 백엔드와 통합하고 강력한 접근 제어로 데이터를 보호했습니다.
다음 단계:
프론트엔드 향상:
상세 아이템 보기, 검색 기능, 실시간 알림과 같은 기능으로 ReactJS 앱을 확장하세요.
추가 기능 통합:
더욱 고급 백엔드 로직(예: 클라우드 함수), 서드파티 API 통합 또는 역할 기반 접근 제어를 추가하는 것을 고려하세요.
추가 자료 탐색:
성능 최적화 및 사용자 정의 통합에 대한 심층적인 학습을 위해 Back4app 문서 및 추가 튜토리얼을 검토하세요.
이 튜토리얼을 따라함으로써, 이제 Back4app을 사용하여 ReactJS 애플리케이션을 위한 강력하고 확장 가능한 CRUD 백엔드를 생성할 수 있는 기술을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	설명
_id	객체 ID	자동으로 생성된 기본 키.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목이 마지막으로 업데이트된 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동으로 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	인증을 위한 해시된 비밀번호.
생성일	날짜	사용자 계정이 생성된 타임스탬프.
업데이트됨	날짜	사용자 계정이 업데이트된 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
앵귤러로 기본 CRUD 앱 만드는 방법?
Next.js, Vercel 및 Back4App으로 티켓팅 앱 구축하기