How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

개요 이 가이드에서는 riot js를 사용하여 crud(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 만드는 방법을 배웁니다 백엔드로 사용할 basic crud app riotjs 라는 이름의 back4app 프로젝트 설정을 진행한 후, 이를 riot js 프론트엔드와 통합하는 방법을 안내합니다 이 튜토리얼에서는 데이터베이스 스키마 설계 및 back4app 관리 앱을 통한 데이터 관리부터 sdk(해당되는 경우) 또는 rest/graphql api 호출을 사용한 프론트엔드 통합까지 모든 내용을 다룹니다 마지막에는 사용자 인증 및 안전한 데이터 처리를 특징으로 하는 완전한 운영 가능하고 생산 준비가 완료된 웹 애플리케이션을 갖게 됩니다 주요 이점 확장 가능한 백엔드 시스템을 사용하여 crud 작업을 마스터하세요 riot js 프론트엔드를 back4app과 통합하는 방법에 대한 통찰력을 얻으세요 직관적인 back4app 관리 앱을 활용하여 손쉬운 데이터 관리를 하세요 docker 컨테이너화를 포함한 배포 전략을 배우세요 필수 조건 시작하기 전에 다음 사항을 확인하세요 새 프로젝트가 있는 back4app 계정 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 riot js에 대한 개발 환경 riot cli를 사용하거나 스크립트 태그를 통해 riot를 포함할 수 있습니다 node js (v14 이상)가 설치되어 있는지 확인하세요 javascript, riot js 및 rest api에 대한 기본 지식 필요한 경우 riot js 문서 https //riot js org/ 를 참조하여 추가 정보를 얻으세요 1단계 – 프로젝트 초기화 back4app 프로젝트 만들기 back4app 계정에 로그인하세요 대시보드에서 “새 앱”을 클릭하세요 프로젝트 이름 지정 basic crud app riotjs 및 설정 지침을 따르세요 새 프로젝트 만들기 귀하의 프로젝트가 이제 back4app 대시보드에 나타나며, 이는 애플리케이션 데이터의 중추 역할을 합니다 2단계 – 데이터베이스 스키마 설계 데이터 모델 만들기 우리의 crud 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다 아래는 효율적인 crud 작업을 위해 데이터베이스 구조를 잡는 데 도움이 되는 샘플 컬렉션과 필드입니다 1\ 아이템 컬렉션 이 컬렉션은 각 아이템에 대한 세부 정보를 포함합니다 필드 유형 설명 id 객체 id 자동 생성된 고유 식별자 제목 문자열 항목 제목 설명 문자열 간단한 항목 설명 생성일 날짜 항목이 추가된 타임스탬프 업데이트됨 날짜 항목이 수정된 타임스탬프 2\ 사용자 수집 이 컬렉션에는 사용자 세부정보 및 인증 정보가 포함되어 있습니다 필드 유형 설명 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 고유한 사용자 이름 이메일 문자열 고유한 이메일 주소 비밀번호 해시 문자열 암호화된 비밀번호 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트 타임스탬프 이러한 컬렉션은 back4app 대시보드에서 새 클래스를 만들고 열을 정의하여 수동으로 구성할 수 있습니다 새 클래스 만들기 데이터 유형을 선택하고, 이름을 지정하고, 기본값을 설정하고, 필드가 필수인지 표시하여 필드를 추가할 수 있습니다 열 생성 back4app ai 에이전트를 활용한 스키마 생성 대시보드에서 접근할 수 있는 back4app ai 에이전트는 필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 처리하여 스키마를 자동으로 생성할 수 있습니다 ai 에이전트 사용하기 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 관리자 앱은 코드 없이 드래그 앤 드롭 인터페이스를 제공하여 손쉬운 백엔드 관리를 가능하게 하며, crud 작업을 신속하게 수행할 수 있습니다 관리자 앱 활성화 “더보기” 메뉴를 열기 back4app 대시보드에서 “관리자 앱” 선택하기 그리고 클릭하기 “관리자 앱 활성화 ” 관리자 계정 설정하기 초기 관리자 사용자를 생성하여 기본 역할을 설정합니다 관리자 앱 활성화 활성화되면, admin app에 로그인하여 백엔드 데이터를 관리하세요 admin app 대시보드 admin app을 통한 crud 작업 수행 이 인터페이스 내에서, 당신은 기록 추가 새 항목을 만들기 위해 컬렉션(예 항목) 내의 “기록 추가” 버튼을 사용하세요 기록 수정 어떤 기록을 클릭하여 세부 정보를 보고 수정하세요 기록 삭제 더 이상 필요하지 않은 기록을 삭제하세요 이 도구는 데이터를 관리하기 위한 간단한 인터페이스를 제공하여 작업 흐름을 간소화합니다 4단계 – riot js와 back4app 연결하기 이제 백엔드가 설정되었으므로 riot js 프론트엔드를 back4app에 연결할 시간입니다 옵션 a parse sdk 사용하기 parse sdk 설치하기 npm install parse riot js 프로젝트에서 parse 초기화하기 파일을 생성하세요 (예 src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; riot 태그에서 parse 사용하기 아이템을 가져오고 표시하기 위해 riot 태그를 생성하세요 (예 items riot ) items { item get("title") } — { item get("description") } 옵션 b rest 또는 graphql api 사용하기 parse sdk가 적합하지 않은 경우, api 호출을 통해 crud 작업을 수행하십시오 예를 들어, rest를 사용하여 항목을 검색하려면 // rest api example to get items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); 필요에 따라 riot js 태그 내에서 이러한 api 호출을 통합하십시오 5단계 – 백엔드 보호하기 액세스 제어 목록(acl) 구성하기 객체에 acl을 설정하여 데이터를 보호하십시오 예를 들어, 개인 항목을 생성하려면 async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 클래스 수준 권한(clp) 조정하기 back4app 대시보드 내에서 각 컬렉션에 대한 clp를 구성하여 인증된 사용자 또는 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 하십시오 6단계 – 사용자 인증 사용자 계정 구성하기 riot js 애플리케이션은 back4app의 내장 parse 사용자 클래스를 사용하여 사용자 등록 및 로그인을 처리할 수 있습니다 아래는 사용자 가입을 위한 riot 태그의 예입니다 sign up 로그인 및 세션 관리에 유사한 전략을 적용할 수 있습니다 소셜 로그인, 이메일 인증 또는 비밀번호 복구와 같은 추가 기능은 back4app 대시보드에서 설정할 수 있습니다 7단계 – riot js 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리를 연결하여 riot js 앱을 호스팅할 수 있습니다 프로덕션 빌드를 배포하려면 다음 단계를 따르세요 7 1 프로덕션 파일 빌드하기 터미널에서 프로젝트 디렉토리를 엽니다 빌드 명령을 실행합니다 npm run build 이 명령은 최적화된 정적 파일(html, js, css, 이미지)이 포함된 build 폴더를 생성합니다 빌드를 확인합니다 build 폴더에 index html 및 필요한 자산 디렉토리가 포함되어 있는지 확인합니다 7 2 코드를 정리하고 github에 푸시하기 귀하의 저장소에는 완전한 riot js 프론트엔드 소스가 포함되어야 합니다 일반적인 구조는 다음과 같을 수 있습니다 basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md 예 src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 예 src/app riot riot js crud app 코드를 커밋하고 푸시하기 git 저장소 초기화 (아직 하지 않았다면) git init 파일 추가하기 git add 변경 사항 커밋하기 git commit m "리엇 js 프론트엔드 초기 커밋" github 저장소 만들기 (예 basic crud app riotjs frontend ) 및 코드 푸시하기 git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 github 리포지토리를 back4app 웹 배포와 통합하기 웹 배포 열기 back4app 대시보드에 로그인하고, 프로젝트 ( basic crud app riotjs )를 선택한 후 웹 배포 를 클릭하세요 github에 연결하기 프롬프트에 따라 github 계정과 리포지토리를 연결하세요 리포지토리 및 브랜치 선택하기 리포지토리 (예 basic crud app riotjs frontend )와 적절한 브랜치 (예 main )를 선택하세요 7 4 배포 구성 빌드 명령어 저장소에 미리 빌드된 build 폴더가 없으면 빌드 명령어를 지정하세요 (예 npm run build ) back4app이 이를 실행합니다 출력 디렉토리 정적 파일이 위치하는 곳을 나타내기 위해 build 로 설정하세요 환경 변수 구성에 필요한 변수를 포함하세요 (예 api 키) 7 5 riot js 앱 도커화 (선택 사항) 컨테이너화된 배포를 선호하는 경우, 프로젝트에 dockerfile 을 추가하세요 \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 이 경로를 선택하면 웹 배포 설정에서 docker 옵션을 선택하세요 7 6 애플리케이션 배포하기 배포 설정을 구성한 후 배포 버튼을 클릭하세요 프로세스 모니터링 back4app이 코드를 가져오고, 빌드 명령을 실행하며, 컨테이너에 앱을 배포합니다 url 가져오기 배포가 완료되면 back4app이 riot js 애플리케이션이 호스팅되는 url을 제공합니다 7 7 배포 검증하기 url 방문하기 제공된 url을 브라우저에서 엽니다 앱 테스트하기 모든 경로와 자산(css, javascript, 이미지)이 제대로 작동하는지 확인합니다 문제 해결 문제가 발생하면 브라우저 개발자 도구와 back4app 로그를 사용하세요 8단계 – 마무리 및 향후 방향 축하합니다! riot js와 back4app을 사용하여 완전한 crud 앱을 구축했습니다 " basic crud app riotjs "라는 프로젝트를 설정하고, 아이템과 사용자에 대한 강력한 데이터베이스 스키마를 설계했으며, 관리 앱을 통해 데이터를 관리했습니다 riot js 프론트엔드를 통합하고 acl과 같은 보안 조치를 구현했습니다 다음 단계 프론트엔드 개선 상세 보기, 검색 기능 및 실시간 업데이트와 같은 기능을 추가하세요 기능 확장 클라우드 함수와 같은 고급 백엔드 작업을 탐색하거나 서드파티 api를 통합하세요 학습 심화 back4app 문서 https //www back4app com/docs 및 기타 리소스를 방문하여 애플리케이션을 최적화하고 확장하세요 이 단계들을 통해 이제 riot js와 back4app을 사용하여 확장 가능한 crud 애플리케이션을 구축할 수 있는 전문 지식을 갖추게 되었습니다 즐거운 코딩 되세요!