How to Create a CRUD Application with Koa.js?

36min
소개
이 가이드에서는 Koa.js를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 개발하는 방법을 배웁니다.
이 튜토리얼에서는 Koa.js 백엔드를 Back4app과 통합하여 데이터를 관리하고 기능적인 API를 구축하는 필수 단계를 안내합니다. 먼저 Basic-CRUD-App-KoaJS,라는 Back4app 프로젝트를 설정하는 것으로 시작합니다. 이 프로젝트는 애플리케이션의 강력한 백엔드 역할을 합니다.
그 후, 컬렉션을 설정하고 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다. 이는 수동으로 하거나 Back4app AI 에이전트의 도움을 받을 수 있습니다. 이 설정은 CRUD 작업이 원활하게 이루어지도록 데이터를 정리합니다.
다음으로, 데이터 관리 작업을 간소화하는 코드 없는 드래그 앤 드롭 도구인 Back4app 관리 앱을 활용하여 레코드를 생성, 읽기, 업데이트 및 삭제합니다.
마지막으로, Koa.js 서버를 구성하여 REST API를 통해 Back4app과 상호작용하도록 설정하며, 백엔드를 보호하기 위해 강력한 접근 제어를 구현합니다.
이 튜토리얼이 끝나면 기본 CRUD 작업을 지원할 뿐만 아니라 사용자 인증 및 안전한 데이터 처리를 포함하는 프로덕션 준비가 완료된 서버 측 애플리케이션을 구축하게 됩니다.
주요 내용
신뢰할 수 있는 클라우드 백엔드를 활용하여 Koa.js로 CRUD 애플리케이션을 구축하는 방법을 알아보세요.
확장 가능한 백엔드를 설계하고 RESTful API와 통합하는 방법에 대한 통찰력을 얻으세요.
직관적인 Back4app 관리 앱을 사용하여 CRUD 작업을 간소화하는 방법을 배우세요.
Docker를 사용한 컨테이너화 등 배포 전략을 탐색하여 Koa.js 애플리케이션을 신속하게 시작하세요.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
 Back4app 시작하기를 참조하세요.
작동하는 Node.js 개발 환경입니다.
 Node.js (v14 이상)를 설치하고 Koa.js 프로젝트를 설정하세요.
JavaScript, Koa.js 및 REST API에 대한 기본 지식입니다.
 필요하다면 Koa.js 문서를 검토하세요.
﻿
1단계 – Back4app 프로젝트 설정
새 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 Basic-CRUD-App-KoaJS로 지정하고 설정을 완료하기 위한 지침을 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 설정되면 대시보드에서 확인할 수 있으며, 애플리케이션에 필요한 백엔드 프레임워크를 제공합니다.
﻿
2단계 – 데이터베이스 스키마 작성
데이터 모델 설계
이 CRUD 애플리케이션을 위해 여러 컬렉션을 설정해야 합니다. 아래는 데이터베이스 스키마를 효과적으로 구성하는 데 도움이 되는 제안된 필드와 유형이 포함된 샘플 컬렉션입니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간단한 설명입니다.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 데이터 및 인증 자격 증명을 관리합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전하게 해시된 비밀번호.
생성일
날짜
계정 생성의 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
이러한 컬렉션은 Back4app 대시보드를 통해 각 컬렉션에 대한 새 클래스를 추가하고 해당 열을 정의하여 생성할 수 있습니다.
새 클래스 만들기
﻿
적절한 유형을 선택하고 기본값을 설정하며 필드가 필수인지 여부를 지정하여 필드를 정의할 수 있습니다.
열 만들기
﻿
﻿
Back4app AI 에이전트를 활용한 스키마 설정
대시보드 내에서 사용할 수 있는 Back4app AI 에이전트는 컬렉션과 필드를 설명하는 자세한 프롬프트에서 데이터베이스 스키마를 자동으로 생성할 수 있습니다. 이 기능은 프로젝트 설정을 신속하게 진행하고 CRUD 작업을 위한 일관된 스키마를 보장합니다.
AI 에이전트 사용 방법:
Back4app 대시보드 또는 프로젝트 설정에서 AI 에이전트를 엽니다.
필요한 컬렉션과 필드를 설명하는 프롬프트를 제공합니다.
생성된 스키마를 검토하고 프로젝트에 구성을 적용합니다.
예시 프롬프트
Text
Create these collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create these collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 접근 방식은 시간을 절약하고 스키마가 일관되고 최적화되도록 보장하는 데 도움이 됩니다.
﻿
3단계 – 관리자 앱 및 CRUD 기능 활성화
관리자 앱 개요
Back4app 관리자 앱은 드래그 앤 드롭 컨트롤을 통해 백엔드 데이터를 손쉽게 관리할 수 있는 사용자 친화적인 인터페이스입니다. 이 코드 없는 도구는 레코드를 생성, 읽기, 업데이트 및 삭제하는 등의 작업을 간소화합니다.
관리자 앱 활성화
Back4app 대시보드에서 “더보기” 메뉴로 이동합니다.
“관리자 앱”을 선택하고 “관리자 앱 활성화.”
초기 관리자 계정을 설정합니다. 이 과정은 B4aAdminUser와 같은 시스템 역할을 설정하고 시스템 컬렉션을 준비합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 컬렉션과 레코드를 관리합니다.
관리자 앱 대시보드
﻿
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 레코드 추가: 새 항목을 만들기 위해 모든 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 사용합니다.
레코드 보기 및 편집: 레코드를 선택하여 세부 정보를 검사하거나 필드를 수정합니다.
레코드 제거: 더 이상 필요하지 않은 항목을 삭제합니다.
﻿
4단계 – Koa.js 백엔드와 Back4app 연결하기
이제 백엔드가 구성되고 관리되었으므로, Koa.js 서버를 설정하여 Back4app과 상호작용할 시간입니다.
Koa.js와 REST API 사용하기
이 튜토리얼은 Koa.js 서버에서 REST API 호출을 사용하여 Back4app 컬렉션에서 CRUD 작업을 수행하는 방법을 보여줍니다.
기본 Koa.js 서버 설정하기
Koa.js 및 필요한 미들웨어 설치하기:
Bash
npm install koa koa-router koa-bodyparser node-fetch
npm install koa koa-router koa-bodyparser node-fetch
﻿
서버 파일 생성하기 (예: server.js):
JS
// server.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const fetch = require('node-fetch');

const app = new Koa();
const router = new Router();

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';
const BASE_URL = 'https://parseapi.back4app.com';

// Fetch all items
router.get('/items', async (ctx) => {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = await response.json();
    ctx.body = data.results;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Failed to fetch items' };
  }
});

// Create a new item
router.post('/items', async (ctx) => {
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const newItem = await response.json();
    ctx.body = newItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error creating item' };
  }
});

// Update an item
router.put('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'PUT',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const updatedItem = await response.json();
    ctx.body = updatedItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error updating item' };
  }
});

// Delete an item
router.delete('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  try {
    await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    ctx.body = { message: 'Item deleted successfully' };
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error deleting item' };
  }
});

app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
// server.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const fetch = require('node-fetch');

const app = new Koa();
const router = new Router();

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';
const BASE_URL = 'https://parseapi.back4app.com';

// Fetch all items
router.get('/items', async (ctx) => {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = await response.json();
    ctx.body = data.results;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Failed to fetch items' };
  }
});

// Create a new item
router.post('/items', async (ctx) => {
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const newItem = await response.json();
    ctx.body = newItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error creating item' };
  }
});

// Update an item
router.put('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  const { title, description } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'PUT',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const updatedItem = await response.json();
    ctx.body = updatedItem;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error updating item' };
  }
});

// Delete an item
router.delete('/items/:id', async (ctx) => {
  const { id } = ctx.params;
  try {
    await fetch(`${BASE_URL}/classes/Items/${id}`, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    ctx.body = { message: 'Item deleted successfully' };
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error deleting item' };
  }
});

app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
﻿
이 설정은 Koa.js 서버를 제공하여 REST 호출을 통해 Back4app과 통신하며, 모든 CRUD 작업을 처리합니다.
﻿
5단계 – 백엔드 보안
액세스 제어 구현
객체 수준에서 액세스 제어 목록(ACL)을 적용하여 데이터를 보호하십시오. 예를 들어, 개인 항목을 생성할 때 ACL을 설정하여 액세스를 제한합니다:
JS
async function createSecureItem(itemData, ownerSessionToken) {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json',
        'X-Parse-Session-Token': ownerSessionToken
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          "*": { "read": false, "write": false },
          "owner": { "read": true, "write": true }
        }
      })
    });
    const result = await response.json();
    console.log('Secure item created:', result);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerSessionToken) {
  try {
    const response = await fetch(`${BASE_URL}/classes/Items`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json',
        'X-Parse-Session-Token': ownerSessionToken
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          "*": { "read": false, "write": false },
          "owner": { "read": true, "write": true }
        }
      })
    });
    const result = await response.json();
    console.log('Secure item created:', result);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
클래스 수준 권한 설정 (CLPs)
Back4app 대시보드 내에서 각 컬렉션에 대한 CLPs를 구성하여 기본 규칙을 설정하고, 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다.
﻿
단계 6 – 사용자 인증
사용자 계정 구성
Back4app은 인증 처리를 위해 사용자 클래스를 사용합니다. Koa.js 서버에서 Back4app REST API와 인터페이스하여 사용자 등록 및 로그인을 관리합니다.
예: 사용자 등록 엔드포인트
JS
router.post('/signup', async (ctx) => {
  const { username, password, email } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/users`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const userData = await response.json();
    ctx.body = userData;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error signing up' };
  }
});
router.post('/signup', async (ctx) => {
  const { username, password, email } = ctx.request.body;
  try {
    const response = await fetch(`${BASE_URL}/users`, {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const userData = await response.json();
    ctx.body = userData;
  } catch (error) {
    ctx.status = 500;
    ctx.body = { error: 'Error signing up' };
  }
});
﻿
필요에 따라 로그인 및 세션 관리를 위한 유사한 엔드포인트를 구축할 수 있습니다.
﻿
단계 7 – Koa.js 애플리케이션 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에 연결하여 Koa.js 서버를 호스팅할 수 있습니다.
7.1 – 프로젝트 빌드 및 구성
프로젝트가 올바르게 구조화되어 있는지 확인하십시오. 샘플 레이아웃은 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-KoaJS/
├── node_modules/
├── server.js
├── package.json
└── README.md
Basic-CRUD-App-KoaJS/
├── node_modules/
├── server.js
├── package.json
└── README.md
﻿
모든 소스 파일을 Git 리포지토리에 커밋하십시오.
샘플 Git 명령어:
Bash
git init
git add .
git commit -m "Initial commit of Koa.js backend"
git remote add origin https://github.com/your-username/Basic-CRUD-App-KoaJS.git
git push -u origin main
git init
git add .
git commit -m "Initial commit of Koa.js backend"
git remote add origin https://github.com/your-username/Basic-CRUD-App-KoaJS.git
git push -u origin main
﻿
7.2 – Back4app 웹 배포와 통합
Back4app 대시보드에 로그인하고, 프로젝트 Basic-CRUD-App-KoaJS,로 이동하여 웹 배포 섹션으로 이동하십시오.
아직 연결하지 않았다면 GitHub 계정을 연결하십시오.
리포지토리와 관련 브랜치를 선택하십시오 (예: main).
7.3 – 배포 설정 구성
빌드 명령어:
프로젝트를 빌드해야 하는 경우 (예: 최신 JavaScript 변환), npm run build와 같은 빌드 명령어를 지정하십시오.
출력 디렉토리:
해당하는 경우, 프로덕션 준비가 완료된 파일이 포함된 폴더를 지정하십시오.
환경 변수:
배포 구성에 필요한 환경 변수 (예: API 키)를 추가하십시오.
7.4 – 선택 사항: Koa.js 서버를 도커화하기
애플리케이션을 컨테이너로 배포하려면 리포지토리에 Dockerfile을 포함하십시오:
Dockerfile
# Use the official Node.js image as a base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the desired port
EXPOSE 3000

# Run the application
CMD ["node", "server.js"]
# Use the official Node.js image as a base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Expose the desired port
EXPOSE 3000

# Run the application
CMD ["node", "server.js"]
﻿
7.5 – 애플리케이션 시작하기
Back4app에서 배포 버튼을 클릭하세요.
배포 로그를 모니터링하여 애플리케이션이 성공적으로 빌드되고 배포되었는지 확인하세요.
완료되면 Back4app에서 Koa.js 서버에 접근할 수 있는 URL을 제공합니다.
7.6 – 배포 검증하기
제공된 URL을 방문하여 애플리케이션이 실행되고 있는지 확인하세요.
각 엔드포인트(CRUD 작업, 사용자 인증)를 테스트하여 올바른 기능을 확인하세요.
문제가 발생하면 로그와 배포 설정을 검토하여 문제를 해결하세요.
﻿
8단계 – 결론 및 향후 개선 사항
훌륭한 작업입니다! 이제 Koa.js와 Back4app을 통합하여 완전한 CRUD 애플리케이션을 구축했습니다.
귀하의 프로젝트 Basic-CRUD-App-KoaJS는 항목 및 사용자에 대한 신중하게 설계된 컬렉션, 데이터 관리를 위한 사용자 친화적인 관리 애플리케이션, 그리고 안전한 백엔드를 특징으로 합니다.
다음 단계:
API 확장:
추가 경로, 미들웨어 또는 실시간 기능으로 Koa.js 서버를 향상시키세요.
인증 개선:
토큰 기반 인증, 소셜 로그인 또는 다단계 인증 구현을 고려하세요.
추가 문서 탐색:
다음의 Back4app 문서 및 Koa.js 가이드를 확인하여 더 고급 주제와 최적화에 대해 알아보세요.
이 튜토리얼을 따라함으로써, 이제 Koa.js와 Back4app을 사용하여 확장 가능하고 안전하며 효율적인 CRUD 백엔드를 구축할 수 있는 기술을 보유하게 되었습니다. 즐기세요.
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간단한 설명입니다.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	유형	설명
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전하게 해시된 비밀번호.
생성일	날짜	계정 생성의 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Building a Basic CRUD Application with Lit?
How to a Basic CRUD App with Alpine.js?