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

42min
개요
이 가이드에서는 Riot.js를 사용하여 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 만드는 방법을 배웁니다.
백엔드로 사용할 Basic-CRUD-App-RiotJS라는 이름의 Back4app 프로젝트 설정을 진행한 후, 이를 Riot.js 프론트엔드와 통합하는 방법을 안내합니다.
이 튜토리얼에서는 데이터베이스 스키마 설계 및 Back4app 관리 앱을 통한 데이터 관리부터 SDK(해당되는 경우) 또는 REST/GraphQL API 호출을 사용한 프론트엔드 통합까지 모든 내용을 다룹니다.
마지막에는 사용자 인증 및 안전한 데이터 처리를 특징으로 하는 완전한 운영 가능하고 생산 준비가 완료된 웹 애플리케이션을 갖게 됩니다.
주요 이점
확장 가능한 백엔드 시스템을 사용하여 CRUD 작업을 마스터하세요.
Riot.js 프론트엔드를 Back4app과 통합하는 방법에 대한 통찰력을 얻으세요.
직관적인 Back4app 관리 앱을 활용하여 손쉬운 데이터 관리를 하세요.
Docker 컨테이너화를 포함한 배포 전략을 배우세요.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
새 프로젝트가 있는 Back4app 계정.
 Back4app 시작하기를 참조하세요.
Riot.js에 대한 개발 환경.
Riot CLI를 사용하거나 스크립트 태그를 통해 Riot를 포함할 수 있습니다. Node.js (v14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Riot.js 및 REST API에 대한 기본 지식.
필요한 경우 Riot.js 문서를 참조하여 추가 정보를 얻으세요.
﻿
1단계 – 프로젝트 초기화
Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱”을 클릭하세요.
프로젝트 이름 지정: Basic-CRUD-App-RiotJS 및 설정 지침을 따르세요.
새 프로젝트 만들기
﻿
귀하의 프로젝트가 이제 Back4app 대시보드에 나타나며, 이는 애플리케이션 데이터의 중추 역할을 합니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 만들기
우리의 CRUD 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다. 아래는 효율적인 CRUD 작업을 위해 데이터베이스 구조를 잡는 데 도움이 되는 샘플 컬렉션과 필드입니다.
1. 아이템 컬렉션
이 컬렉션은 각 아이템에 대한 세부 정보를 포함합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목 제목.
설명
문자열
간단한 항목 설명.
생성일
날짜
항목이 추가된 타임스탬프.
업데이트됨
날짜
항목이 수정된 타임스탬프.
2. 사용자 수집
이 컬렉션에는 사용자 세부정보 및 인증 정보가 포함되어 있습니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
고유한 사용자 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 새 클래스를 만들고 열을 정의하여 수동으로 구성할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 이름을 지정하고, 기본값을 설정하고, 필드가 필수인지 표시하여 필드를 추가할 수 있습니다.
열 생성
﻿
Back4app AI 에이전트를 활용한 스키마 생성
대시보드에서 접근할 수 있는 Back4app AI 에이전트는 필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 처리하여 스키마를 자동으로 생성할 수 있습니다.
AI 에이전트 사용하기:
AI 에이전트 열기:
프로젝트 설정 또는 메뉴에서 찾으세요.
데이터 모델 입력:
컬렉션과 필드를 설명하는 프롬프트를 붙여넣으세요.
검토 및 확인:
생성된 스키마를 검증하고 프로젝트에 적용하세요.
샘플 프롬프트
Text
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)
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 설치하기:
Bash
npm install parse
npm install parse
﻿
Riot.js 프로젝트에서 Parse 초기화하기:
파일을 생성하세요 (예: src/parseConfig.js):
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;
// 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):
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
﻿
옵션 B: REST 또는 GraphQL API 사용하기
Parse SDK가 적합하지 않은 경우, API 호출을 통해 CRUD 작업을 수행하십시오. 예를 들어, REST를 사용하여 항목을 검색하려면:
JS
// 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();
// 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을 설정하여 데이터를 보호하십시오. 예를 들어, 개인 항목을 생성하려면:
JS
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);
  }
}
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 태그의 예입니다:
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
﻿
로그인 및 세션 관리에 유사한 전략을 적용할 수 있습니다. 소셜 로그인, 이메일 인증 또는 비밀번호 복구와 같은 추가 기능은 Back4app 대시보드에서 설정할 수 있습니다.
﻿
7단계 – Riot.js 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리를 연결하여 Riot.js 앱을 호스팅할 수 있습니다. 프로덕션 빌드를 배포하려면 다음 단계를 따르세요:
7.1 프로덕션 파일 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 최적화된 정적 파일(HTML, JS, CSS, 이미지)이 포함된 build 폴더를 생성합니다.
빌드를 확인합니다:
build 폴더에 index.html 및 필요한 자산 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 코드를 정리하고 GitHub에 푸시하기
귀하의 저장소에는 완전한 Riot.js 프론트엔드 소스가 포함되어야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-RiotJS-Frontend/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── app.riot
|    ├── parseConfig.js
|    └── tags/
|         ├── items.riot
|         └── auth.riot
|-- package.json
|-- README.md
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
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/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
HTML
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
﻿
코드를 커밋하고 푸시하기
Git 저장소 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 추가하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "리엇.js 프론트엔드 초기 커밋"
git commit -m "리엇.js 프론트엔드 초기 커밋"
﻿
GitHub 저장소 만들기 (예: Basic-CRUD-App-RiotJS-Frontend) 및 코드 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-RiotJS-Frontend.git
git push -u origin main
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을 추가하세요:
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;"]
# 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 문서 및 기타 리소스를 방문하여 애플리케이션을 최적화하고 확장하세요.
이 단계들을 통해 이제 Riot.js와 Back4app을 사용하여 확장 가능한 CRUD 애플리케이션을 구축할 수 있는 전문 지식을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목 제목.
설명	문자열	간단한 항목 설명.
생성일	날짜	항목이 추가된 타임스탬프.
업데이트됨	날짜	항목이 수정된 타임스탬프.
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide
Building a CRUD App with Inferno.js: A Comprehensive Walkthrough