Quickstarters
CRUD Samples
Node.js로 CRUD 앱을 만드는 방법은?
33 분
개요 이 안내서에서는 node js를 사용하여 완전한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 개발하는 방법을 배웁니다 데이터 관리를 간소화하기 위해 back4app을 백엔드 서비스로 활용할 것입니다 이 가이드는 back4app 프로젝트 구성, 동적 데이터 모델 설계 및 node js를 사용한 crud 작업 구현을 안내합니다 먼저, basic crud app node 라는 이름의 back4app 프로젝트를 설정하여 강력한 비관계형 데이터 저장 솔루션을 제공합니다 그런 다음, back4app ai 에이전트를 활용하거나 수동으로 컬렉션과 필드를 정의하여 데이터 스키마를 설계합니다 다음으로, 데이터 조작을 위한 사용자 친화적인 드래그 앤 드롭 인터페이스인 back4app 관리 앱을 통해 백엔드를 관리합니다 마지막으로, 안전한 접근 제어를 보장하면서 parse javascript sdk(또는 필요에 따라 rest/graphql api)를 사용하여 node js 애플리케이션을 back4app과 통합합니다 이 튜토리얼이 끝날 무렵, 필수 crud 작업과 사용자 인증 및 데이터 보안을 수행할 수 있는 프로덕션 준비가 완료된 node js 애플리케이션을 구축하게 될 것입니다 배울 내용 효과적인 로우코드 백엔드를 사용하여 node js 기반 crud 애플리케이션을 만드는 방법 확장 가능한 백엔드를 설계하고 이를 node js 애플리케이션과 연결하는 전략 back4app 관리 앱을 활용하여 생성, 읽기, 업데이트 및 삭제 작업을 간소화하는 방법 docker 컨테이너화를 포함한 배포 기술로 node js 애플리케이션을 효율적으로 시작하는 방법 전제 조건 시작하기 전에 다음을 확인하세요 새로 구성된 프로젝트가 있는 back4app 계정 도움이 필요하신가요? back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 방문하세요 node js 개발 환경 visual studio code와 같은 코드 편집기를 사용하고 node js (v14 이상)가 설치되어 있는지 확인하세요 node js, 비동기 프로그래밍 및 rest api에 대한 기본 지식 필요한 경우 node js 문서 https //nodejs org/en/docs/ 를 참조하세요 1단계 – 프로젝트 설정 새로운 back4app 프로젝트 만들기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 클릭하세요 프로젝트 이름을 지정하세요 basic crud app node 그리고 화면의 안내에 따라 설정을 완료하세요 새 프로젝트 만들기 생성 후, 프로젝트가 대시보드에 나타나며 백엔드 구성을 준비합니다 2단계 – 데이터 스키마 작성 데이터 구조 정의하기 이 crud 애플리케이션을 위해, back4app 프로젝트에 여러 컬렉션을 생성할 것입니다 아래는 기본 crud 기능에 필요한 주요 컬렉션과 필드의 예입니다 1 아이템 컬렉션 이 컬렉션은 각 아이템에 대한 세부 정보를 저장합니다 필드 유형 설명 id 객체 id 자동 생성된 고유 식별자 제목 문자열 항목의 이름 설명 문자열 항목에 대한 간략한 개요 생성일 날짜 항목이 추가된 시간을 표시하는 타임스탬프 업데이트됨 날짜 마지막 업데이트를 표시하는 타임스탬프 2 사용자 수집 이 컬렉션은 사용자 자격 증명 및 인증 데이터를 처리합니다 필드 유형 설명 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 사용자를 위한 고유한 이름 이메일 문자열 사용자의 고유 이메일 주소 비밀번호 해시 문자열 안전한 인증을 위한 해시된 비밀번호 생성일 날짜 계정이 생성된 시간 업데이트됨 날짜 계정이 업데이트된 타임스탬프 이러한 컬렉션과 필드를 back4app 대시보드를 통해 수동으로 생성할 수 있습니다 새 클래스 만들기 데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필드를 필수로 표시하여 열을 추가할 수 있습니다 열 생성 스키마 생성을 위한 back4app ai 에이전트 활용하기 back4app ai 에이전트는 설명에 따라 데이터 모델을 자동으로 생성하여 스키마 설정을 간소화합니다 이는 구성 속도를 높이고 데이터 구조가 모든 crud 작업을 지원하도록 보장합니다 ai 에이전트 사용 방법 ai 에이전트 열기 back4app 프로젝트 설정에서 ai 에이전트에 접근합니다 데이터 스키마 개요 작성 필요한 컬렉션과 필드를 설명합니다 검토 및 적용 ai 에이전트가 스키마를 제안합니다 제안을 검토하고 변경 사항을 적용합니다 예시 프롬프트 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) 이 방법은 일관되고 최적화된 데이터 모델을 보장합니다 3단계 – 관리 앱 활성화 및 crud 작업 수행 관리 앱 개요 back4app 관리 앱은 백엔드 데이터를 관리하기 위한 코드 없는 인터페이스를 제공합니다 드래그 앤 드롭 디자인으로 레코드를 추가, 보기, 업데이트 및 삭제하는 crud 작업을 간단하게 실행할 수 있습니다 관리 앱 활성화 “더보기” 섹션으로 이동하십시오 back4app 대시보드에서 “관리 앱” 선택 을 클릭하십시오 “관리 앱 활성화 ” 관리 자격 증명 구성 초기 관리자 계정을 설정하여 이 과정은 역할(예 b4aadminuser ) 및 시스템 클래스를 생성합니다 관리 앱 활성화 활성화 후, 데이터 관리를 위해 관리 앱에 로그인하십시오 관리 앱 대시보드 관리 앱을 통한 crud 작업 관리 관리자 앱 내에서 다음을 수행할 수 있습니다 레코드 삽입 새 항목을 만들기 위해 컬렉션 내에서 “레코드 추가” 버튼을 사용하세요 (예 항목) 레코드 검토 및 편집 세부 정보를 확인하거나 필드를 업데이트하려면 레코드를 클릭하세요 레코드 삭제 더 이상 필요하지 않은 항목을 제거하세요 이 사용자 친화적인 인터페이스는 데이터 관리를 상당히 간소화합니다 4단계 – node js 애플리케이션을 back4app과 연결하기 백엔드 설정이 완료되었으므로 node js 앱을 back4app에 연결할 시간입니다 옵션 a parse javascript sdk 사용하기 parse javascript sdk 설치 프로젝트 디렉토리에서 다음 명령을 실행하세요 npm install parse node js 애플리케이션에서 parse 초기화 구성 파일을 생성하세요 (예 parseconfig js ) // parseconfig js const parse = require('parse/node'); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; module exports = parse; 3\ implement crud operations for example, create a service to manage items ```javascript // itemsservice js const parse = require(' /parseconfig'); async function fetchitems() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); console log('fetched items ', results); return results; } catch (error) { console error('error retrieving items ', error); } } async function createitem(title, description) { const items = parse object extend('items'); const item = new items(); item set('title', title); item set('description', description); try { await item save(); console log('item successfully created '); } catch (error) { console error('error creating item ', error); } } async function updateitem(objectid, newtitle, newdescription) { const items = parse object extend('items'); 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); } } async function deleteitem(objectid) { const items = parse object extend('items'); const query = new parse query(items); try { const item = await query get(objectid); await item destroy(); console log('item deleted successfully '); } catch (error) { console error('error deleting item ', error); } } module exports = { fetchitems, createitem, updateitem, deleteitem, }; 옵션 b rest 또는 graphql 사용하기 parse sdk를 사용하지 않으려면 rest api 호출을 통해 back4app과 상호작용할 수 있습니다 예를 들어, node js를 사용하여 항목을 검색하는 방법은 다음과 같습니다 const https = require('https'); function fetchitemsrest() { const options = { hostname 'parseapi back4app com', path '/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }; const req = https request(options, res => { let data = ''; res on('data', chunk => data += chunk); res on('end', () => console log('response ', data)); }); req on('error', error => console error('error ', error)); req end(); } fetchitemsrest(); 필요에 따라 이러한 rest 호출을 node js 서비스에 통합하십시오 5단계 – 백엔드 보안 강화 액세스 제어 목록(acl) 구성 객체에 acl을 설정하여 데이터 보안을 강화하십시오 예를 들어, 항목을 생성자만 접근할 수 있도록 하려면 const parse = require(' /parseconfig'); async function createprivateitem(title, description, owner) { const items = parse object extend('items'); const item = new 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('private item created successfully '); } catch (error) { console error('error saving private item ', error); } } 클래스 수준 권한(clp) 설정 back4app 대시보드에서 clp를 조정하여 기본 보안 규칙을 시행하고, 인증된 사용자만 특정 컬렉션과 상호작용할 수 있도록 합니다 6단계 – 사용자 인증 구현 사용자 관리 구성 back4app은 parse의 내장 사용자 컬렉션을 활용하여 인증을 관리합니다 node js 앱에서 사용자 가입 및 로그인을 아래와 같이 구현하십시오 const parse = require(' /parseconfig'); async function signup(username, password, email) { 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('error during sign up ', error); } } async function login(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login error ', error); } } module exports = { signup, login }; 세션 관리 및 추가 인증 기능에 대해 유사한 접근 방식을 사용할 수 있습니다 7단계 – node js 애플리케이션 배포 back4app은 원활한 배포 프로세스를 제공합니다 docker 컨테이너화를 포함하여 여러 방법으로 node js 앱을 배포할 수 있습니다 7 1 애플리케이션 빌드하기 컴파일 및 패키지 선호하는 빌드 도구(npm 또는 yarn 등)를 사용하여 애플리케이션을 준비합니다 예를 들어, 다음을 실행합니다 npm run build 빌드 확인 프로덕션 번들이 모든 필수 모듈과 파일을 포함하고 있는지 확인합니다 7 2 프로젝트 레이아웃 정리하기 전형적인 node js 프로젝트 구조는 다음과 같을 수 있습니다 basic crud app node/ \| src/ \| | controllers/ \| | | itemscontroller js \| | | authcontroller js \| | models/ \| | | item js \| | | user js \| | routes/ \| | itemsroutes js \| | authroutes js \| parseconfig js \| package json \| readme md 7 3 node js 앱 도커화하기 컨테이너화된 배포를 선호하는 경우, 프로젝트 루트에 dockerfile 을 추가하세요 # use an official node js runtime as a parent image from node 14 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# start the node js application cmd \["npm", "start"] 7 4 back4app 웹 배포를 통한 배포 github 리포지토리 연결 node js 소스 코드를 github에 호스팅하세요 배포 설정 구성 back4app 대시보드에서 웹 배포 옵션을 선택하고, 리포지토리(예 basic crud app node )를 연결한 후 원하는 브랜치를 선택하세요 빌드 및 출력 명령 설정 빌드 명령(예 npm run build )을 정의하고 출력 폴더를 지정하세요 앱 배포 배포 를 클릭하고 애플리케이션이 라이브 상태가 될 때까지 로그를 모니터링하세요 8단계 – 마무리 및 향후 개선 사항 축하합니다! 이제 back4app과 통합된 node js crud 애플리케이션을 구축했습니다 "},{ basic crud app node "라는 프로젝트를 구성하고, 항목 및 사용자에 대한 컬렉션을 설정했으며, back4app 관리 앱으로 백엔드를 관리했습니다