How to Develop a CRUD App with TypeScript?

34min
개요
이 안내서에서는 TypeScript를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
우리는 데이터 관리를 간단하게 하기 위해 Back4app을 백엔드 플랫폼으로 활용할 것입니다. 이 가이드는 Back4app 프로젝트 설정, 데이터 모델링 및 TypeScript 애플리케이션에 CRUD 기능 통합을 다룹니다.
먼저, Basic-CRUD-App-TypeScript라는 이름의 Back4app 프로젝트를 생성합니다. 이는 유연한 NoSQL 저장 솔루션을 제공합니다.
Back4app의 AI 에이전트의 도움을 받아 수동으로 또는 클래스를 정의하여 데이터 구조를 설계합니다.
다음으로, 사용자 친화적인 인터페이스를 통해 데이터 작업을 간소화하는 Back4app 관리 앱을 사용하여 백엔드를 관리합니다.
마지막으로, Parse JavaScript SDK를 사용하여 TypeScript 애플리케이션을 Back4app과 연결하여 안전한 접근 및 인증을 보장합니다.
이 튜토리얼이 끝날 무렵, 기본 CRUD 작업을 처리할 수 있는 사용자 인증 및 데이터 관리 기능을 갖춘 완전한 TypeScript 애플리케이션을 갖게 될 것입니다.
배울 내용
NoSQL 백엔드를 사용하여 TypeScript 기반 CRUD 애플리케이션을 구축하는 방법.
TypeScript 프론트 엔드와 통합된 확장 가능한 백엔드를 설계하는 방법.
Back4app의 관리 앱을 활용하여 데이터를 손쉽게 관리하는 방법.
Docker 컨테이너화를 포함한 배포 전략으로 TypeScript 앱을 원활하게 시작하는 방법.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
구성된 프로젝트가 있는 Back4app 계정.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
TypeScript 개발 환경.
Visual Studio Code와 같은 편집기를 사용하고 Node.js가 설치되어 있는지 확인하세요.
TypeScript, 객체 지향 프로그래밍 및 RESTful API에 대한 기본 지식.
필요한 경우 TypeScript 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-TypeScript 를 입력하고 프로젝트 생성을 완료하세요.
새 프로젝트 만들기
﻿
프로젝트가 설정되면 대시보드에 나타나며, 백엔드의 기초가 됩니다.
﻿
2단계 – 데이터 스키마 작성
데이터 구조 정의하기
이 애플리케이션을 위해 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)
﻿
이 AI 지원 방법은 시간을 절약하고 잘 구조화된 스키마를 보장합니다.
﻿
3단계 – CRUD 작업을 위한 관리 앱 사용하기
관리 앱 개요
Back4app 관리 앱은 백엔드 데이터를 간단하게 관리할 수 있는 코드 없는 인터페이스를 제공합니다.
드래그 앤 드롭 기능을 통해 기록을 추가, 읽기, 업데이트 및 삭제하는 CRUD 작업을 번거로움 없이 수행할 수 있습니다.
관리 앱 활성화
Back4app 대시보드에서 “더보기” 메뉴로 이동합니다.
“관리 앱” 선택 후 “관리 앱 활성화.”
관리 자격 증명 설정을 위해 초기 관리자 계정을 생성하고, B4aAdminUser와 같은 역할 및 시스템 클래스를 정의합니다.
관리 앱 활성화
﻿
활성화 후, 데이터 관리를 위해 관리 앱에 로그인합니다.
관리 앱 대시보드
﻿
관리 앱을 통한 CRUD 작업 관리
관리 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: 모든 컬렉션(예: 항목)에서 “레코드 추가” 기능을 사용하여 새 데이터를 입력합니다.
검토 및 수정: 레코드를 클릭하여 세부정보를 보거나 필드를 수정합니다.
레코드 삭제: 더 이상 필요하지 않은 항목을 제거합니다.
이 직관적인 인터페이스는 일상적인 작업을 단순화하여 데이터 관리를 향상시킵니다.
﻿
4단계 – TypeScript 앱을 Back4app에 연결하기
백엔드가 준비되면 다음 단계는 TypeScript 애플리케이션을 Back4app과 연결하는 것입니다.
옵션 A: Parse JavaScript SDK 사용하기
Parse JavaScript SDK 설치:
npm을 사용하여 다음을 실행합니다:
Bash
npm install parse
npm install parse
﻿
TypeScript 애플리케이션에서 Parse 초기화:
구성 파일(예: parseConfig.ts)을 만듭니다:
TypeScript
// parseConfig.ts
import Parse from 'parse';
export function initializeParse() {
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
}
// parseConfig.ts
import Parse from 'parse';
export function initializeParse() {
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
}
﻿
﻿
Text

3. **Implement CRUD Functions in TypeScript:**  
For example, create a service for managing items:

```typescript
// itemsService.ts
import Parse from 'parse';

export async function fetchItems(): Promise<Parse.Object[]> {
const query = new Parse.Query('Items');
try {
 return await query.find();
} catch (error) {
 console.error('Error fetching items:', error);
 return [];
}
}

export async function addItem(title: string, description: string): Promise<void> {
const item = new Parse.Object('Items');
item.set('title', title);
item.set('description', description);
try {
 await item.save();
 console.log('Item added successfully.');
} catch (error) {
 console.error('Error adding item:', error);
}
}

export async function updateItem(objectId: string, newTitle: string, newDescription: string): Promise<void> {
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 async function removeItem(objectId: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log('Item removed successfully.');
} catch (error) {
 console.error('Error removing item:', error);
}
}

3. **Implement CRUD Functions in TypeScript:**  
For example, create a service for managing items:

```typescript
// itemsService.ts
import Parse from 'parse';

export async function fetchItems(): Promise<Parse.Object[]> {
const query = new Parse.Query('Items');
try {
 return await query.find();
} catch (error) {
 console.error('Error fetching items:', error);
 return [];
}
}

export async function addItem(title: string, description: string): Promise<void> {
const item = new Parse.Object('Items');
item.set('title', title);
item.set('description', description);
try {
 await item.save();
 console.log('Item added successfully.');
} catch (error) {
 console.error('Error adding item:', error);
}
}

export async function updateItem(objectId: string, newTitle: string, newDescription: string): Promise<void> {
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 async function removeItem(objectId: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log('Item removed successfully.');
} catch (error) {
 console.error('Error removing item:', error);
}
}
﻿
옵션 B: REST 또는 GraphQL 활용하기
Parse SDK를 사용하지 않으려면 REST를 통해 CRUD 작업을 수행할 수 있습니다. 예를 들어, REST를 사용하여 항목을 검색하려면:
TypeScript
import fetch from 'node-fetch';

export async function getItemsViaREST() {
  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('Data retrieved:', data);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}
import fetch from 'node-fetch';

export async function getItemsViaREST() {
  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('Data retrieved:', data);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}
﻿
필요에 따라 이러한 API 호출을 타입스크립트 모듈 내에서 통합하세요.
﻿
5단계 – 백엔드 보안 보장
액세스 제어 목록(ACL) 설정
ACL을 객체에 적용하여 데이터를 보호하세요. 예를 들어, 소유자만 접근할 수 있는 항목을 생성하려면:
TypeScript
import Parse from 'parse';

export async function createSecureItem(title: string, description: string, owner: Parse.User) {
  const item = new Parse.Object('Items');
  item.set('title', title);
  item.set('description', description);

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

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

export async function createSecureItem(title: string, description: string, owner: Parse.User) {
  const item = new Parse.Object('Items');
  item.set('title', title);
  item.set('description', description);

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

  try {
    await item.save();
    console.log('Secure item created successfully.');
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 관리
Back4app 대시보드를 통해 CLP를 조정하여 인증된 사용자만 특정 컬렉션과 상호작용할 수 있도록 액세스 제한을 시행하세요.
﻿
6단계 – 사용자 인증 구현
사용자 계정 관리
Back4app은 Parse의 내장 사용자 클래스를 활용하여 인증을 처리합니다. TypeScript 애플리케이션에서 사용자 등록 및 로그인을 다음과 같이 구현하세요:
TypeScript
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  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('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  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('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
﻿
﻿
이 접근 방식은 세션 관리, 비밀번호 재설정 및 기타 인증 기능에 대해 확장될 수 있습니다.
﻿
7단계 – TypeScript 애플리케이션 배포
Back4app은 배포 프로세스를 간소화합니다. Docker 컨테이너화와 같은 방법을 사용하여 TypeScript 애플리케이션을 배포할 수 있습니다.
7.1 TypeScript 앱 빌드하기
컴파일 및 번들링:
빌드 도구(예: Webpack 또는 tsc)를 사용하여 애플리케이션을 컴파일하고 번들링합니다.
예를 들어, tsc로 컴파일하려면:
Bash
tsc
tsc
﻿
출력 확인:
생성된 파일에 모든 필요한 자산과 모듈이 포함되어 있는지 확인합니다.
﻿
7.2 프로젝트 구조 정리하기
전형적인 TypeScript 프로젝트는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-TypeScript/
|-- src/
|   |-- index.ts
|   |-- parseConfig.ts
|   |-- services/
|       |-- itemsService.ts
|       |-- authService.ts
|-- package.json
|-- tsconfig.json
|-- README.md
Basic-CRUD-App-TypeScript/
|-- src/
|   |-- index.ts
|   |-- parseConfig.ts
|   |-- services/
|       |-- itemsService.ts
|       |-- authService.ts
|-- package.json
|-- tsconfig.json
|-- README.md
﻿
예: parseConfig.ts
TypeScript
// parseConfig.ts
import Parse from 'parse';

export function initializeParse() {
  Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com';
}
// parseConfig.ts
import Parse from 'parse';

export function initializeParse() {
  Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com';
}
﻿
7.3 TypeScript 애플리케이션 도커화하기
컨테이너화를 선택하면, 프로젝트 루트에 Dockerfile을 추가하세요:
Dockerfile
# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory
WORKDIR /usr/src/app

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

# Bundle app source code
COPY . .

# Build the TypeScript app
RUN npm run build

# Expose port (adjust as needed)
EXPOSE 3000

# Start the app
CMD [ "node", "dist/index.js" ]
# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory
WORKDIR /usr/src/app

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

# Bundle app source code
COPY . .

# Build the TypeScript app
RUN npm run build

# Expose port (adjust as needed)
EXPOSE 3000

# Start the app
CMD [ "node", "dist/index.js" ]
﻿
7.4 Back4app 웹 배포를 통한 배포
GitHub 리포지토리 연결:
당신의 TypeScript 프로젝트가 GitHub에 호스팅되어 있는지 확인하세요.
배포 설정 구성:
Back4app 대시보드에서 웹 배포 옵션을 사용하여 리포지토리(예: Basic-CRUD-App-TypeScript)를 연결하고 적절한 브랜치를 선택하세요.
빌드 및 출력 명령 정의:
빌드 명령(예: npm run build)을 지정하고 출력 디렉토리를 표시하세요.
애플리케이션 배포:
배포를 클릭하고 애플리케이션이 라이브 될 때까지 로그를 따르세요.
﻿
8단계 – 최종 생각 및 향후 개선 사항
축하합니다! Back4app과 통합된 TypeScript 기반 CRUD 애플리케이션을 성공적으로 생성했습니다.
"Basic-CRUD-App-TypeScript"라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 컬렉션을 설계하며, Back4app 관리 앱을 사용하여 데이터를 관리했습니다.
또한, Parse JavaScript SDK(또는 REST/GraphQL)를 통해 TypeScript 앱을 연결하고 강력한 보안 조치를 구현했습니다.
다음은 무엇인가요?
애플리케이션 확장:
고급 필터링, 상세 항목 보기 또는 실시간 데이터 업데이트와 같은 추가 기능을 통합하세요.
백엔드 기능 향상:
클라우드 기능을 탐색하거나, 서드파티 API를 통합하거나, 역할 기반 권한을 구현하세요.
추가 학습:
Back4app 문서를 방문하고 애플리케이션을 최적화하기 위한 추가 가이드를 확인하세요.
행복한 코딩을 하시고 TypeScript CRUD 애플리케이션을 구축하는 것을 즐기세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호 해시	문자열	로그인을 위한 안전하게 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Node.js로 CRUD 앱을 만드는 방법은?
How to Create a CRUD Application with Elm?