Quickstarters
Deno로 CRUD 애플리케이션을 개발하는 방법? 종합 가이드

42min
개요
이 가이드는 Deno를 사용하여 간단한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 보여줍니다.
우리는 Back4app을 백엔드 관리 플랫폼으로 활용하여 신뢰할 수 있는 데이터베이스 솔루션으로 작동하도록 구성하고, API 접근 방식을 사용하여 백엔드 서비스와 상호작용할 것입니다.
이 튜토리얼에서는 다음을 수행합니다:
“Basic-CRUD-App-Deno”이라는 이름의 Back4app 프로젝트를 설정합니다.
CRUD 작업에 맞게 컬렉션과 필드로 데이터베이스 스키마를 설계하고 구성합니다.
Back4app 관리 앱을 사용하여 직관적인 드래그 앤 드롭 인터페이스를 통해 컬렉션을 관리합니다.
REST/GraphQL 호출을 사용하여 Deno 프론트엔드를 Back4app에 연결합니다.
강력한 접근 제어 조치를 통해 백엔드를 보호합니다.
이 가이드를 마치면 필수 데이터 작업과 사용자 인증을 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 구축하게 됩니다.
필수 통찰
데이터를 효율적으로 처리하기 위해 CRUD 기능을 마스터합니다.
Deno 기반 프론트엔드와 통합된 확장 가능한 백엔드를 설계하는 방법을 배웁니다.
원활한 데이터 관리를 위해 Back4app 관리 앱을 사용합니다.
Docker를 통한 컨테이너화 등 배포 전략을 발견합니다.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정과 초기화된 프로젝트.
필요한 경우 Back4app 시작하기를 참조하세요.
Deno 개발 환경.
Deno가 설치되고 업데이트되었는지 확인하세요 (버전 1.10 이상 권장).
JavaScript/TypeScript, Deno 및 REST API 개념에 대한 이해.
더 많은 정보를 원하시면 Deno 매뉴얼을 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Deno 및 화면 지침을 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에서 확인할 수 있으며, 백엔드 구성을 위한 기초를 마련합니다.
﻿
2단계 – 데이터베이스 스키마 작성
데이터 모델 구조화
이 CRUD 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다. 아래는 기본 작업을 용이하게 하기 위한 제안된 필드가 포함된 샘플 컬렉션입니다.
1. 컬렉션: 항목
이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다.
필드
유형
목적
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 수집: 사용자
이 수집은 사용자 프로필 및 인증 데이터를 저장합니다.
필드
유형
목적
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전하게 해시된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 업데이트 타임스탬프.
Back4app 대시보드에서 각 컬렉션을 수동으로 생성하고 각 필드를 정의하기 위해 새 클래스를 설정하고 열을 추가할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 유형을 선택하고, 이름을 지정하고, 기본값을 설정하고, 필수로 표시할 수 있습니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 설명적인 프롬프트를 입력할 수 있게 하여 스키마 생성을 간소화합니다. 그러면 필요한 컬렉션과 필드를 자동으로 생성합니다.
AI 에이전트 사용 단계:
AI 에이전트에 접근하기:
Back4app 대시보드를 열고 AI 에이전트 옵션을 찾습니다.
데이터 모델 설명 입력하기:
컬렉션과 필드를 나열한 자세한 프롬프트를 제공합니다.
검토 및 적용하기:
생성된 스키마 제안을 검토하고 프로젝트에 적용합니다.
샘플 프롬프트:
Text
Create the following collections in my Back4app application:

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 the following collections in my Back4app application:

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 관리 앱은 백엔드 데이터를 처리하기 위한 코드 없는 인터페이스를 제공합니다. 직관적인 드래그 앤 드롭 디자인으로 CRUD 작업을 쉽게 관리할 수 있습니다.
관리 앱 활성화
“더보기” 메뉴로 가기 Back4app 대시보드에서.
“관리자 앱” 선택하기 그리고 클릭하기 “관리자 앱 활성화.”
관리자 자격 증명 설정하기 초기 관리자 사용자를 생성하여 역할을 구성합니다 (예: B4aAdminUser) 및 시스템 컬렉션.
관리자 앱 활성화
﻿
활성화되면, 관리자 앱에 로그인하여 컬렉션을 손쉽게 관리하세요.
관리자 앱 대시보드
﻿
관리자 앱을 통한 CRUD 작업 관리
관리자 앱에서 다음을 수행할 수 있습니다:
기록 추가: 새 항목을 만들기 위해 모든 컬렉션(예: 항목)에서 “기록 추가”를 클릭하세요.
기록 보기/편집: 세부 정보를 검사하거나 수정할 기록을 선택하세요.
기록 제거: 더 이상 필요하지 않은 항목을 삭제하세요.
이 간단한 도구는 기본 데이터 작업을 수행하는 과정을 간소화합니다.
﻿
4단계 – Deno와 Back4app 연결하기
백엔드가 구성되었으므로, REST 또는 GraphQL API를 사용하여 Deno 프론트엔드를 연결할 시간입니다.
옵션: REST/GraphQL API 호출 사용하기
Back4app과 상호작용하기 위해 API 호출에 의존할 것입니다.
예시: Deno에서 REST를 통한 데이터 가져오기
모듈을 생성하세요 (예: fetchItems.ts) 다음 코드를 사용하여:
TypeScript
const APPLICATION_ID = "YOUR_APPLICATION_ID";
const REST_API_KEY = "YOUR_REST_API_KEY";
const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

export async function fetchItems() {
  try {
    const response = await fetch(SERVER_URL, {
      headers: {
        "X-Parse-Application-Id": APPLICATION_ID,
        "X-Parse-REST-API-Key": REST_API_KEY,
      },
    });
    const data = await response.json();
    console.log("Retrieved items:", data.results);
  } catch (error) {
    console.error("Error retrieving items:", error);
  }
}

fetchItems();
const APPLICATION_ID = "YOUR_APPLICATION_ID";
const REST_API_KEY = "YOUR_REST_API_KEY";
const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

export async function fetchItems() {
  try {
    const response = await fetch(SERVER_URL, {
      headers: {
        "X-Parse-Application-Id": APPLICATION_ID,
        "X-Parse-REST-API-Key": REST_API_KEY,
      },
    });
    const data = await response.json();
    console.log("Retrieved items:", data.results);
  } catch (error) {
    console.error("Error retrieving items:", error);
  }
}

fetchItems();
﻿
필요에 따라 Deno 애플리케이션에 이러한 API 호출을 통합하세요.
﻿
5단계 – 백엔드 보안 강화
액세스 제어 목록(ACL) 구현
각 객체에 ACL을 할당하여 데이터를 보호하세요. 예를 들어, 항목이 비공개인지 확인하려면:
TypeScript
async function createPrivateItem(itemData: { title: string; description: string }, ownerToken: string) {
  const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

  const response = await fetch(SERVER_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "X-Parse-Session-Token": ownerToken,
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        "*": { read: false, write: false },
        [ownerToken]: { read: true, write: true }
      }
    }),
  });
  const result = await response.json();
  console.log("Private item created:", result);
}
async function createPrivateItem(itemData: { title: string; description: string }, ownerToken: string) {
  const SERVER_URL = "https://parseapi.back4app.com/classes/Items";

  const response = await fetch(SERVER_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "X-Parse-Session-Token": ownerToken,
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        "*": { read: false, write: false },
        [ownerToken]: { read: true, write: true }
      }
    }),
  });
  const result = await response.json();
  console.log("Private item created:", result);
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 조정하여 기본 액세스 정책을 정의하고, 인증된 사용자 또는 권한이 부여된 사용자만 민감한 데이터에 접근하거나 수정할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 관리
사용자 계정 생성
Back4app은 인증을 위해 Parse User 클래스를 사용합니다. Deno 애플리케이션에서 REST API 호출을 통해 사용자 등록 및 로그인을 관리하세요.
예: Deno에서 사용자 등록
TypeScript
async function registerUser(username: string, password: string, email: string) {
  const SERVER_URL = "https://parseapi.back4app.com/users";

  try {
    const response = await fetch(SERVER_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
        "X-Parse-REST-API-Key": "YOUR_REST_API_KEY"
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const data = await response.json();
    console.log("User registered:", data);
  } catch (error) {
    console.error("Registration error:", error);
  }
}

registerUser("newUser", "securePassword", "[email protected]");
async function registerUser(username: string, password: string, email: string) {
  const SERVER_URL = "https://parseapi.back4app.com/users";

  try {
    const response = await fetch(SERVER_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
        "X-Parse-REST-API-Key": "YOUR_REST_API_KEY"
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const data = await response.json();
    console.log("User registered:", data);
  } catch (error) {
    console.error("Registration error:", error);
  }
}

registerUser("newUser", "securePassword", "user@example.com");
﻿
이 접근 방식은 로그인 및 세션 관리에도 유사하게 적용될 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Deno 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 직접 배포하여 Deno 기반 프론트엔드를 호스팅할 수 있습니다.
7.1 – 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
예를 들어, esbuild와 같은 번들러를 사용하는 경우:
Bash
deno run --allow-read --allow-write build_script.ts
deno run --allow-read --allow-write build_script.ts
﻿
빌드 출력 확인:
출력 디렉토리(예: dist)에 index.html, 번들된 JavaScript, CSS 및 이미지와 같은 필요한 정적 파일이 포함되어 있는지 확인합니다.
﻿
7.2 – 코드 정리 및 커밋하기
귀하의 저장소에는 Deno 프론트엔드의 모든 소스 파일이 포함되어야 합니다. 예시 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Deno/
├── deps.ts
├── controllers/
├── public/
│   └── index.html
├── routes/
├── src/
│   ├── app.ts
│   └── fetchItems.ts
├── Dockerfile
├── build_script.ts
└── README.md
Basic-CRUD-App-Deno/
├── deps.ts
├── controllers/
├── public/
│   └── index.html
├── routes/
├── src/
│   ├── app.ts
│   └── fetchItems.ts
├── Dockerfile
├── build_script.ts
└── README.md
﻿
샘플 파일: deps.ts
TypeScript
export { serve } from "https://deno.land/[email protected]/http/server.ts";
export { serve } from "https://deno.land/std@0.140.0/http/server.ts";
﻿
샘플 파일: src/app.ts
TypeScript
import { serve } from "../deps.ts";
import { fetchItems } from "./fetchItems.ts";

serve(async (req) => {
  const { pathname } = new URL(req.url);

  if (pathname === "/api/items") {
    const items = await fetchItems();
    return new Response(JSON.stringify(items), {
      headers: { "Content-Type": "application/json" },
    });
  }

  return new Response(await Deno.readTextFile("./public/index.html"), {
    headers: { "Content-Type": "text/html" },
  });
});
import { serve } from "../deps.ts";
import { fetchItems } from "./fetchItems.ts";

serve(async (req) => {
  const { pathname } = new URL(req.url);

  if (pathname === "/api/items") {
    const items = await fetchItems();
    return new Response(JSON.stringify(items), {
      headers: { "Content-Type": "application/json" },
    });
  }

  return new Response(await Deno.readTextFile("./public/index.html"), {
    headers: { "Content-Type": "text/html" },
  });
});
﻿
코드를 GitHub에 커밋하기
Git 초기화:
Bash
git init
git init
﻿
모든 파일 스테이징:
Bash
git add .
git add .
﻿
변경 사항 커밋:
Bash
git commit -m "Deno CRUD 프론트엔드 초기 커밋"
git commit -m "Deno CRUD 프론트엔드 초기 커밋"
﻿
GitHub에 푸시:
저장소 생성 (예: Basic-CRUD-App-Deno) 및 푸시:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Deno.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Deno.git
git push -u origin main
﻿
﻿
7.3 – GitHub와 Back4app 웹 배포 연결하기
Back4app에 로그인하고 프로젝트로 이동합니다.
웹 배포 기능을 클릭합니다.
GitHub 계정을 연결합니다. 프롬프트에 따라 진행합니다.
저장소와 브랜치를 선택합니다. (예: main) Deno 코드를 포함하고 있는.
﻿
7.4 – 배포 설정 구성하기
지정:
빌드 명령어:
사전 빌드된 dist 폴더가 존재하지 않으면 명령어를 설정하십시오 (예: deno run --allow-read --allow-write build_script.ts).
출력 디렉토리:
출력 폴더를 정의하십시오, 예를 들어 dist.
환경 변수:
필요한 환경 변수를 추가하십시오 (예: API 키).
﻿
7.5 – Deno 애플리케이션을 도커화하기
Docker로 배포하려면 프로젝트에 Dockerfile을 포함하십시오:
Dockerfile
# Use the official Deno image
FROM denoland/deno:alpine-1.25.0

# Set the working directory
WORKDIR /app

# Cache dependencies
COPY deps.ts .
RUN deno cache deps.ts

# Copy the application code
COPY . .

# Expose port 8000
EXPOSE 8000

# Run the application
CMD ["run", "--allow-net", "--allow-read", "src/app.ts"]
# Use the official Deno image
FROM denoland/deno:alpine-1.25.0

# Set the working directory
WORKDIR /app

# Cache dependencies
COPY deps.ts .
RUN deno cache deps.ts

# Copy the application code
COPY . .

# Expose port 8000
EXPOSE 8000

# Run the application
CMD ["run", "--allow-net", "--allow-read", "src/app.ts"]
﻿
컨테이너화를 선호하는 경우 Back4app에서 Docker 배포 옵션을 선택하십시오.
﻿
7.6 – 애플리케이션 시작하기
배포 시작:
Back4app 대시보드에서 배포 버튼을 클릭하세요.
프로세스 모니터링:
Back4app이 코드를 가져오고, 빌드 단계를 실행하며, 앱을 배포합니다.
사이트 접근:
배포 후, Deno 애플리케이션이 라이브인 URL이 제공됩니다.
﻿
7.7 – 배포 성공 확인하기
제공된 URL 방문:
브라우저에서 URL을 엽니다.
애플리케이션 테스트:
모든 경로, 정적 자산 및 API 엔드포인트가 올바르게 작동하는지 확인하세요.
문제 해결:
문제가 발생하면 배포 로그를 확인하고 구성을 검증하세요.
﻿
8단계 – 마무리 및 향후 방향
축하합니다! Deno를 사용하여 Back4app을 백엔드로 하는 기본 CRUD 애플리케이션을 성공적으로 구축했습니다. 
프로젝트를 설정했습니다 Basic-CRUD-App-Deno, 데이터베이스를 구조화하고, 관리 앱을 통해 데이터를 관리하며, API 호출을 통해 Deno 프론트엔드를 연결하고, ACL 및 CLP로 데이터를 보호했습니다.
향후 개선 사항:
프론트엔드 확장:
상세 보기, 검색 필터 또는 실시간 업데이트와 같은 기능을 추가하세요.
고급 백엔드 로직:
클라우드 기능 또는 추가 API 통합을 통합하세요.
보안 강화:
역할 기반 접근 및 추가 인증 조치를 탐색하세요.
자세한 내용은 Back4app 문서를 확인하고 추가 리소스를 탐색하세요.
코딩을 즐기고 확장 가능한 Deno CRUD 애플리케이션을 구축하세요!
필드	유형	목적
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	유형	목적
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전하게 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 업데이트 타임스탬프.
업데이트됨 24 Feb 2025
이 페이지가 도움이 되었습니까?
레드우드JS로 기본 CRUD 앱 만드는 방법? 단계별 가이드
Astro로 CRUD 앱 만드는 방법?