How to Create a CRUD Application with Koa.js?

소개 이 가이드에서는 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 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 작동하는 node js 개발 환경입니다 node js (v14 이상)를 설치하고 koa js 프로젝트를 설정하세요 javascript, koa js 및 rest api에 대한 기본 지식입니다 필요하다면 koa js 문서 https //koajs com/ 를 검토하세요 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 에이전트를 엽니다 필요한 컬렉션과 필드를 설명하는 프롬프트를 제공합니다 생성된 스키마를 검토하고 프로젝트에 구성을 적용합니다 예시 프롬프트 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 및 필요한 미들웨어 설치하기 npm install koa koa router koa bodyparser node fetch 서버 파일 생성하기 (예 server 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}`); }); 이 설정은 koa js 서버를 제공하여 rest 호출을 통해 back4app과 통신하며, 모든 crud 작업을 처리합니다 5단계 – 백엔드 보안 액세스 제어 구현 객체 수준에서 액세스 제어 목록(acl)을 적용하여 데이터를 보호하십시오 예를 들어, 개인 항목을 생성할 때 acl을 설정하여 액세스를 제한합니다 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와 인터페이스하여 사용자 등록 및 로그인을 관리합니다 예 사용자 등록 엔드포인트 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 – 프로젝트 빌드 및 구성 프로젝트가 올바르게 구조화되어 있는지 확인하십시오 샘플 레이아웃은 다음과 같을 수 있습니다 basic crud app koajs/ ├── node modules/ ├── server js ├── package json └── readme md 모든 소스 파일을 git 리포지토리에 커밋하십시오 샘플 git 명령어 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 을 포함하십시오 \# 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 문서 https //www back4app com/docs 및 koa js 가이드 https //koajs com/ 를 확인하여 더 고급 주제와 최적화에 대해 알아보세요 이 튜토리얼을 따라함으로써, 이제 koa js와 back4app을 사용하여 확장 가능하고 안전하며 효율적인 crud 백엔드를 구축할 수 있는 기술을 보유하게 되었습니다 즐기세요