How to Develop a CRUD Application with Deno? A Comprehensive Guide

개요 이 가이드는 deno를 사용하여 간단한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 보여줍니다 우리는 back4app을 백엔드 관리 플랫폼으로 활용하여 신뢰할 수 있는 데이터베이스 솔루션으로 작동하도록 구성하고, api 접근 방식을 사용하여 백엔드 서비스와 상호작용할 것입니다 이 튜토리얼에서는 다음을 수행합니다 “ basic crud app deno ”이라는 이름의 back4app 프로젝트를 설정합니다 crud 작업에 맞게 컬렉션과 필드로 데이터베이스 스키마를 설계하고 구성합니다 back4app 관리 앱을 사용하여 직관적인 드래그 앤 드롭 인터페이스를 통해 컬렉션을 관리합니다 rest/graphql 호출을 사용하여 deno 프론트엔드를 back4app에 연결합니다 강력한 접근 제어 조치를 통해 백엔드를 보호합니다 이 가이드를 마치면 필수 데이터 작업과 사용자 인증을 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 구축하게 됩니다 필수 통찰 데이터를 효율적으로 처리하기 위해 crud 기능을 마스터합니다 deno 기반 프론트엔드와 통합된 확장 가능한 백엔드를 설계하는 방법을 배웁니다 원활한 데이터 관리를 위해 back4app 관리 앱을 사용합니다 docker를 통한 컨테이너화 등 배포 전략을 발견합니다 필수 조건 시작하기 전에 다음 사항을 확인하세요 back4app 계정과 초기화된 프로젝트 필요한 경우 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 deno 개발 환경 deno가 설치되고 업데이트되었는지 확인하세요 (버전 1 10 이상 권장) javascript/typescript, deno 및 rest api 개념에 대한 이해 더 많은 정보를 원하시면 deno 매뉴얼 https //deno land/manual 을 참조하세요 1단계 – 프로젝트 초기화 새 back4app 프로젝트 시작하기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 클릭하세요 프로젝트 이름을 지정하세요 basic crud app deno 및 화면 지침을 따르세요 새 프로젝트 만들기 프로젝트가 생성되면 대시보드에서 확인할 수 있으며, 백엔드 구성을 위한 기초를 마련합니다 2단계 – 데이터베이스 스키마 작성 데이터 모델 구조화 이 crud 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다 아래는 기본 작업을 용이하게 하기 위한 제안된 필드가 포함된 샘플 컬렉션입니다 1\ 컬렉션 항목 이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다 필드 유형 목적 id 객체 id 자동 생성된 기본 키 제목 문자열 항목의 이름 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 항목이 추가된 시간의 타임스탬프 업데이트됨 날짜 최신 업데이트의 타임스탬프 2\ 수집 사용자 이 수집은 사용자 프로필 및 인증 데이터를 저장합니다 필드 유형 목적 id 객체 id 자동 생성된 기본 키 사용자 이름 문자열 사용자를 위한 고유 식별자 이메일 문자열 사용자의 고유 이메일 주소 비밀번호 해시 문자열 안전하게 해시된 비밀번호 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 마지막 업데이트 타임스탬프 back4app 대시보드에서 각 컬렉션을 수동으로 생성하고 각 필드를 정의하기 위해 새 클래스를 설정하고 열을 추가할 수 있습니다 새 클래스 만들기 필드를 추가하려면 유형을 선택하고, 이름을 지정하고, 기본값을 설정하고, 필수로 표시할 수 있습니다 열 만들기 back4app ai 에이전트를 사용한 스키마 생성 back4app ai 에이전트는 설명적인 프롬프트를 입력할 수 있게 하여 스키마 생성을 간소화하며, 이를 통해 필요한 컬렉션과 필드를 자동으로 생성합니다 ai 에이전트 사용 단계 ai 에이전트에 접근하기 back4app 대시보드를 열고 ai 에이전트 옵션을 찾습니다 데이터 모델 설명 입력하기 컬렉션과 필드를 나열한 자세한 프롬프트를 제공합니다 검토 및 적용하기 생성된 스키마 제안을 검토하고 프로젝트에 적용합니다 샘플 프롬프트 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 ) 다음 코드를 사용하여 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을 할당하여 데이터를 보호하세요 예를 들어, 항목이 비공개인지 확인하려면 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에서 사용자 등록 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와 같은 번들러를 사용하는 경우 deno run allow read allow write build script ts 빌드 출력 확인 출력 디렉토리(예 dist )에 index html , 번들된 javascript, css 및 이미지와 같은 필요한 정적 파일이 포함되어 있는지 확인합니다 7 2 – 코드 정리 및 커밋하기 귀하의 저장소에는 deno 프론트엔드의 모든 소스 파일이 포함되어야 합니다 예시 구조는 다음과 같을 수 있습니다 basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md 샘플 파일 deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; 샘플 파일 src/app ts 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 초기화 git init 모든 파일 스테이징 git add 변경 사항 커밋 git commit m "deno crud 프론트엔드 초기 커밋" github에 푸시 저장소 생성 (예 basic crud app deno ) 및 푸시 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 을 포함하십시오 \# 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 문서 https //www back4app com/docs 를 확인하고 추가 리소스를 탐색하세요 코딩을 즐기고 확장 가능한 deno crud 애플리케이션을 구축하세요!