How to Build CRUD App with JavaScript?

34min
개요
이 튜토리얼에서는 JavaScript를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
우리는 Back4app을 활용하여 백엔드 데이터를 손쉽게 관리할 것입니다. 이 가이드는 Back4app 프로젝트 구성부터 JavaScript 애플리케이션을 Parse JavaScript SDK 또는 REST API와 통합하는 필수 CRUD 작업을 다룹니다.
먼저, Basic-CRUD-App-JavaScript라는 제목의 Back4app에서 프로젝트를 설정합니다. 이는 강력한 백엔드 솔루션을 제공합니다.
그런 다음, 애플리케이션의 요구 사항에 맞게 데이터 스키마를 정의합니다. 이는 수동으로 하거나 Back4app의 AI 에이전트의 도움을 받을 수 있습니다.
다음으로, 사용자 친화적인 Back4app 관리 앱을 통해 백엔드를 관리하여 간단한 드래그 앤 드롭 인터페이스를 통해 데이터 작업을 수행할 수 있습니다.
마지막으로, JavaScript 애플리케이션을 Back4app에 연결하여 안전한 사용자 인증 및 기본 CRUD 기능을 구현합니다.
이 가이드를 끝내면, 모든 기본 CRUD 작업을 수행할 수 있는 보안 액세스 제어가 가능한 프로덕션 준비 완료 JavaScript 애플리케이션을 구축하게 됩니다.
기억해야 할 주요 사항
확장 가능한 백엔드로 JavaScript 기반 CRUD 앱을 개발하는 방법을 마스터하세요.
백엔드를 구조화하고 JavaScript 코드와 원활하게 통합하는 방법을 이해하세요.
Back4app의 관리 앱을 활용하여 데이터 조작 및 CRUD 작업을 쉽게 수행하는 방법을 배우세요.
Docker를 이용한 컨테이너화 등 배포 옵션을 탐색하여 JavaScript 애플리케이션을 시작하세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
구성된 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
JavaScript 개발 환경입니다.
Visual Studio Code 또는 Node.js(버전 14 이상)와 함께 선호하는 다른 편집기를 사용할 수 있습니다.
JavaScript, 현대 프레임워크 및 REST API에 대한 기본 지식입니다.
필요한 경우 JavaScript 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-JavaScript 설정 과정을 완료하세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나며, 백엔드 구성의 기초를 마련합니다.
﻿
2단계 – 데이터 스키마 만들기
데이터 구조 설계
우리의 CRUD 앱을 위해 Back4app에서 두 개의 주요 클래스(컬렉션)를 설정할 것입니다. 이 클래스와 그 필드는 필요한 CRUD 작업을 처리하는 데 필수적입니다.
1. 항목 수집
이 수집은 각 항목에 대한 세부 정보를 저장합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 사용자 수집
이 수집은 사용자 자격 증명 및 인증 세부 정보를 처리합니다.
필드
유형
세부사항
_id
객체 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)
﻿
이 AI 지원 접근 방식은 시간을 절약하고 앱을 위한 잘 구조화된 데이터 모델을 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 수행
관리 앱 개요
Back4app 관리 앱은 효율적인 백엔드 데이터 관리를 위한 코드 없는 인터페이스를 제공합니다. 직관적인 드래그 앤 드롭 기능을 통해 레코드를 추가, 보기, 수정 및 삭제하는 CRUD 작업을 손쉽게 수행할 수 있습니다.
관리 앱 활성화
“더보기” 섹션으로 이동하여 Back4app 대시보드에서.
“관리 앱” 선택 후 “관리 앱 활성화.”
관리 자격 증명 구성 초기 관리 계정을 설정하여. 이는 B4aAdminUser와 시스템 클래스를 설정합니다.
관리 앱 활성화
﻿
활성화 후, 관리 앱에 로그인하여 애플리케이션의 데이터를 관리합니다.
관리 앱 대시보드
﻿
관리 앱을 통한 CRUD 작업 관리
관리 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: “레코드 추가” 옵션을 사용하여 항목과 같은 컬렉션에 새 항목을 만듭니다.
레코드 보기 및 편집: 레코드를 클릭하여 세부정보를 보거나 필드를 수정합니다.
레코드 삭제: 더 이상 필요하지 않은 레코드를 제거합니다.
이 간단한 인터페이스는 데이터 관리를 간소화하고 전반적인 사용성을 향상시킵니다.
﻿
4단계 – JavaScript 앱을 Back4app과 연결하기
백엔드가 설정되면 다음 단계는 JavaScript 애플리케이션을 Back4app과 통합하는 것입니다.
옵션 A: Parse JavaScript SDK 활용하기
Parse SDK 포함하기:
npm을 사용하는 경우 다음 명령어를 실행하여 SDK를 설치합니다:
Bash
npm install parse
npm install parse
﻿
애플리케이션에서 Parse 초기화하기:
초기화 파일을 만듭니다 (예: parseConfig.js):
JS
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
﻿
﻿
Text

3. **Implement CRUD Functions:**  
For example, create a module to handle item operations:

```javascript
// itemsService.js
import Parse from 'parse';

export const getItems = async () => {
const query = new Parse.Query("Items");
try {
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
 return [];
}
};

export const createItem = async (title, description) => {
const Item = Parse.Object.extend("Items");
const item = new Item();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item created successfully.");
} catch (error) {
 console.error("Error creating item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 item.set("title", newTitle);
 item.set("description", newDescription);
 await item.save();
 console.log("Item updated successfully.");
} catch (error) {
 console.error("Error updating item:", error);
}
};

export const deleteItem = async (objectId) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log("Item deleted successfully.");
} catch (error) {
 console.error("Error deleting item:", error);
}
};

3. **Implement CRUD Functions:**  
For example, create a module to handle item operations:

```javascript
// itemsService.js
import Parse from 'parse';

export const getItems = async () => {
const query = new Parse.Query("Items");
try {
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
 return [];
}
};

export const createItem = async (title, description) => {
const Item = Parse.Object.extend("Items");
const item = new Item();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item created successfully.");
} catch (error) {
 console.error("Error creating item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 item.set("title", newTitle);
 item.set("description", newDescription);
 await item.save();
 console.log("Item updated successfully.");
} catch (error) {
 console.error("Error updating item:", error);
}
};

export const deleteItem = async (objectId) => {
const query = new Parse.Query("Items");
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log("Item deleted successfully.");
} catch (error) {
 console.error("Error deleting item:", error);
}
};
﻿
옵션 B: REST 또는 GraphQL 사용
Parse SDK를 사용하지 않으려면 REST 호출을 통해 Back4app과 상호작용할 수 있습니다. 예를 들어, REST를 사용하여 항목을 검색하는 방법은 다음과 같습니다:
JS
import fetch from 'node-fetch';

export const fetchItemsREST = async () => {
  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("Items fetched:", data);
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
import fetch from 'node-fetch';

export const fetchItemsREST = async () => {
  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("Items fetched:", data);
  } catch (error) {
    console.error("Error fetching items via REST:", error);
  }
};
﻿
필요에 따라 이러한 API 호출을 JavaScript 모듈 내에 통합하십시오.
﻿
5단계 – 백엔드 보호하기
접근 제어 구성하기
액세스 제어 목록(ACL)을 설정하여 데이터의 보안을 확보하세요. 예를 들어, 생성자만 접근할 수 있는 항목을 만들려면:
JS
import Parse from 'parse';

export const createPrivateItem = async (title, description, user) => {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(user, true);
  acl.setWriteAccess(user, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item created successfully.");
  } catch (error) {
    console.error("Error creating private item:", error);
  }
};
import Parse from 'parse';

export const createPrivateItem = async (title, description, user) => {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(user, true);
  acl.setWriteAccess(user, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item created successfully.");
  } catch (error) {
    console.error("Error creating private item:", error);
  }
};
﻿
클래스 수준 권한(CLP) 조정하기
Back4app 대시보드를 통해 컬렉션에 대한 기본 접근 규칙을 설정하여 인증된 사용자만 민감한 데이터에 접근할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 구현하기
사용자 계정 설정하기
Back4app은 인증을 처리하기 위해 내장된 Parse 사용자 클래스를 사용합니다. JavaScript 애플리케이션에서 사용자 등록 및 로그인을 다음과 같이 관리하세요:
JS
import Parse from 'parse';

export const signUpUser = async (username, password, email) => {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

export const logInUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
};
import Parse from 'parse';

export const signUpUser = async (username, password, email) => {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

export const logInUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
};
﻿
﻿
이 방법은 세션 관리, 비밀번호 복구 등으로 확장할 수 있습니다.
﻿
7단계 – JavaScript 애플리케이션 배포
Back4app은 배포를 간소화합니다. Docker 컨테이너화와 같은 방법을 사용하여 JavaScript 앱을 배포할 수 있습니다.
7.1 애플리케이션 빌드하기
애플리케이션 번들하기:
빌드 도구(webpack 또는 유사한 번들러와 같은)를 사용하여 코드를 컴파일합니다.
빌드 확인하기:
번들된 파일에 필요한 모든 모듈과 자산이 포함되어 있는지 확인합니다.
﻿
7.2 프로젝트 구조 정리하기
전형적인 JavaScript 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-JavaScript/
|-- src/
|   |-- index.js
|   |-- parseConfig.js
|   |-- services/
|       |-- itemsService.js
|       |-- authService.js
|-- public/
|   |-- index.html
|-- package.json
|-- README.md
Basic-CRUD-App-JavaScript/
|-- src/
|   |-- index.js
|   |-- parseConfig.js
|   |-- services/
|       |-- itemsService.js
|       |-- authService.js
|-- public/
|   |-- index.html
|-- package.json
|-- README.md
﻿
예시: parseConfig.js
JS
// parseConfig.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
// parseConfig.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
﻿
7.3 JavaScript 앱 도커화하기
컨테이너화를 선택하면 프로젝트 루트에 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the application port (adjust if necessary)
EXPOSE 3000

# Define the command to run your application
CMD ["npm", "start"]
# Use an official Node.js runtime as the base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the application port (adjust if necessary)
EXPOSE 3000

# Define the command to run your application
CMD ["npm", "start"]
﻿
7.4 Back4app 웹 배포를 통한 배포
GitHub 리포지토리 연결:
JavaScript 프로젝트가 GitHub에 호스팅되어 있는지 확인하세요.
배포 설정 구성:
Back4app 대시보드에서 웹 배포 옵션을 사용하여 리포지토리를 연결하세요 (예: Basic-CRUD-App-JavaScript) 및 원하는 브랜치를 선택하세요.
빌드 및 출력 명령 설정:
빌드 명령(예: npm run build) 및 출력 디렉토리를 지정하세요.
배포:
'배포'를 클릭하고 애플리케이션이 라이브로 전환될 때까지 로그를 지켜보세요.
﻿
8단계 – 최종 생각 및 향후 개선 사항
축하합니다! Back4app과 통합된 JavaScript 기반 CRUD 애플리케이션을 성공적으로 개발했습니다.
"Basic-CRUD-App-JavaScript"라는 프로젝트를 설정하고, Items 및 Users 컬렉션을 구조화하며, Back4app 관리 앱을 사용하여 백엔드를 관리했습니다.
또한, Parse SDK(또는 REST API)를 통해 JavaScript 애플리케이션을 연결하고 강력한 보안 조치를 구현했습니다.
다음에 탐색할 내용:
기능 향상:
검색 필터, 상세 보기 또는 실시간 데이터 업데이트와 같은 기능을 추가하는 것을 고려해 보세요.
백엔드 기능 확장:
클라우드 기능, 서드파티 API 통합 또는 고급 역할 기반 접근 제어 구현을 살펴보세요.
전문성 심화:
Back4app 문서를 방문하고 추가 튜토리얼을 탐색하여 앱을 더욱 최적화하세요.
코딩을 즐기고, 고급 JavaScript CRUD 애플리케이션을 구축하는 것을 즐기세요!
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동으로 생성된 고유 ID.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	안전한 인증을 위한 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Vue.js로 CRUD 앱을 개발하는 방법?
Python으로 CRUD 앱 만드는 법?