Quickstarters
Cycle.js로 기본 CRUD 애플리케이션 구축: 포괄적인 가이드

40min
개요
이 가이드는 Cycle.js를 사용하여 전체 기능을 갖춘 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 구축하는 방법을 안내합니다.
이 튜토리얼에서는 Basic-CRUD-App-CycleJS라는 제목의 Back4app 프로젝트를 구성하여 애플리케이션의 강력한 백엔드로 사용할 것입니다.
확장 가능한 데이터 모델을 설계하고, 직관적인 Back4app 관리 앱을 통해 데이터를 관리하며, REST/GraphQL 호출을 사용하여 Cycle.js 프론트엔드를 Back4app과 통합하는 방법을 배웁니다.
마지막에는 CRUD 작업을 수행할 수 있는 프로덕션 준비가 완료된 웹 앱과 사용자 인증 및 안전한 데이터 처리가 가능한 앱을 갖게 됩니다.
주요 통찰
신뢰할 수 있는 백엔드로 기능적인 CRUD 시스템 구축.
확장 가능한 데이터 모델 아키텍처 설계에 대한 실무 경험 얻기.
원활한 데이터 관리를 위한 드래그 앤 드롭 관리 도구 활용.
REST/GraphQL을 통해 Cycle.js 프론트엔드를 Back4app과 통합.
Docker 컨테이너화를 포함한 배포 전략 배우기.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 확인하세요.
Cycle.js 개발 환경입니다.
 create-cycle-app과 같은 도구를 사용하고 Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Cycle.js 및 REST API에 대한 친숙함입니다.
복습이 필요하면 Cycle.js 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 누르세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-CycleJS, 그리고 설정 프롬프트를 따르세요.
새 프로젝트 만들기
﻿
생성 후, 귀하의 프로젝트는 대시보드에 표시되며, 백엔드 구성 및 관리가 준비됩니다.
﻿
2단계 – 데이터베이스 스키마 정의
데이터 모델 구조화
이 CRUD 애플리케이션을 위해, 데이터를 관리하기 위해 여러 컬렉션을 생성할 것입니다. 아래는 필수 필드와 데이터 유형이 포함된 예제 컬렉션입니다.
1. 항목 컬렉션
이 컬렉션은 각 항목의 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목이 추가된 시간의 타임스탬프입니다.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 세부정보 및 인증을 처리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자의 고유 식별자.
이메일
문자열
사용자의 이메일 주소.
비밀번호_해시
문자열
안전한 인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
Back4app 대시보드를 통해 새로운 클래스를 생성하고 해당 필드를 구성하여 이러한 컬렉션을 수동으로 정의할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 데이터 유형을 선택하고, 필드 이름을 제공하며, 선택적으로 기본값을 설정하고, 필요한 경우 필드를 필수로 표시합니다.
열 만들기
﻿
﻿
Back4app AI 에이전트를 통한 스키마 생성 자동화
Back4app AI 에이전트는 제공된 프롬프트를 기반으로 데이터 모델을 자동으로 생성하여 스키마 생성을 간소화합니다. 이는 일관되고 효율적인 데이터베이스 설계를 보장합니다.
AI 에이전트를 활용하는 단계:
AI 에이전트에 접근하기:
Back4app 대시보드에 로그인하고 메뉴 또는 프로젝트 설정에서 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 대시보드에서.
“관리자 앱” 선택 후 “관리자 앱 활성화.”
관리자 자격 증명 설정 첫 번째 관리자 사용자를 생성하여. 이 작업은 시스템 역할도 초기화합니다 (예: B4aAdminUser).
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 컬렉션을 관리하기 시작하세요.
관리자 앱 대시보드
﻿
관리자 앱을 통한 CRUD 작업 수행
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 추가: 새 항목을 삽입하려면 모든 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 클릭하세요.
레코드 보기/수정: 기존 레코드를 선택하여 세부 정보를 검사하거나 필드를 수정하세요.
레코드 제거: 삭제 옵션을 사용하여 원하지 않는 항목을 삭제하세요.
이 사용자 친화적인 인터페이스는 데이터 관리 및 운영을 크게 향상시킵니다.
﻿
4단계 – Cycle.js와 Back4app 통합
이제 백엔드가 Back4app을 통해 작동하므로 Cycle.js 프론트엔드를 통합할 시간입니다.
옵션: REST/GraphQL API 활용
백엔드와 상호작용하기 위해 REST API 호출에 집중하겠습니다.
아래는 Cycle.js 구성 요소의 예로, Cycle의 HTTP 드라이버를 사용하여 Back4app 데이터베이스에서 항목을 검색하고 표시하는 방법을 보여줍니다.
예: Cycle.js로 항목 가져오기 및 표시하기
JS
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, ul, li, input, button, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  // Intent: capture add-item interactions
  const addClick$ = sources.DOM.select('.add').events('click');

  // Model: make an HTTP request to fetch items
  const request$ = xs.of({
    url: 'https://parseapi.back4app.com/classes/Items',
    category: 'items',
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });

  // Intent: handle HTTP responses
  const items$ = sources.HTTP.select('items')
    .flatten()
    .map(res => res.body.results);

  // View: render the items list
  const vdom$ = items$.startWith([])
    .map(items =>
      div([
        h1('Items'),
        button('.add', 'Add Item'),
        ul(
          items.map(item =>
            li(`${item.title} — ${item.description}`)
          )
        )
      ])
    );

  return {
    DOM: vdom$,
    HTTP: request$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, ul, li, input, button, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  // Intent: capture add-item interactions
  const addClick$ = sources.DOM.select('.add').events('click');

  // Model: make an HTTP request to fetch items
  const request$ = xs.of({
    url: 'https://parseapi.back4app.com/classes/Items',
    category: 'items',
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });

  // Intent: handle HTTP responses
  const items$ = sources.HTTP.select('items')
    .flatten()
    .map(res => res.body.results);

  // View: render the items list
  const vdom$ = items$.startWith([])
    .map(items =>
      div([
        h1('Items'),
        button('.add', 'Add Item'),
        ul(
          items.map(item =>
            li(`${item.title} — ${item.description}`)
          )
        )
      ])
    );

  return {
    DOM: vdom$,
    HTTP: request$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
﻿
이 샘플 코드는 Cycle.js를 사용하여 항목을 가져오고 동적으로 렌더링하기 위해 HTTP GET 요청을 수행하는 방법을 보여줍니다.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 적용
ACL을 정의하여 객체를 보호하세요. 예를 들어, 개인 항목을 생성할 때:
JS
async function createPrivateItem(data, ownerUser) {
  const newItem = {
    title: data.title,
    description: data.description
  };

  // Define ACL: restrict access to the owner only
  newItem.ACL = {
    [ownerUser.id]: { read: true, write: true },
    '*': { read: false, write: false }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newItem)
    });
    const result = await response.json();
    console.log('Created item:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createPrivateItem(data, ownerUser) {
  const newItem = {
    title: data.title,
    description: data.description
  };

  // Define ACL: restrict access to the owner only
  newItem.ACL = {
    [ownerUser.id]: { read: true, write: true },
    '*': { read: false, write: false }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newItem)
    });
    const result = await response.json();
    console.log('Created item:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
클래스 수준 권한 설정 (CLP)
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 인증된 사용자만 민감한 정보에 접근할 수 있도록 하세요.
﻿
단계 6 – 사용자 인증 구현
계정 등록 및 로그인 설정
Back4app은 인증을 위해 사용자 클래스를 활용합니다. REST API 호출을 사용하여 Cycle.js 애플리케이션 내에서 사용자 가입 및 로그인을 관리하세요.
아래는 사용자 등록을 처리하는 예입니다:
JS
async function signUpUser(userData) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: userData.username,
        password: userData.password,
        email: userData.email
      })
    });
    const result = await response.json();
    alert('Registration successful!');
    return result;
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
async function signUpUser(userData) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: userData.username,
        password: userData.password,
        email: userData.email
      })
    });
    const result = await response.json();
    alert('Registration successful!');
    return result;
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
﻿
사용자 로그인 및 세션 관리를 위해 유사한 패턴을 복제할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Cycle.js 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리와의 통합을 통해 Cycle.js 애플리케이션을 손쉽게 호스팅할 수 있습니다.
7.1 프로덕션 빌드 준비하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령어를 실행합니다:
Bash
npm run build
npm run build
﻿
이것은 최적화된 정적 파일이 있는 build 디렉토리를 생성합니다.
빌드 확인:
 build 폴더에 index.html 및 관련 자산 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 소스 코드 정리 및 업로드
귀하의 Git 저장소에는 전체 Cycle.js 애플리케이션 소스가 포함되어야 합니다. 예시 파일 구조:
Text
Basic-CRUD-App-CycleJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── httpDrivers.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-CycleJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── httpDrivers.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
예시 파일: src/main.js
JS
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import ItemsList from './components/ItemsList';

function main(sources) {
  const itemsVTree$ = ItemsList(sources);

  const vdom$ = itemsVTree$.map(tree =>
    div([
      h1('Cycle.js CRUD Application'),
      tree
    ])
  );

  return {
    DOM: vdom$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import ItemsList from './components/ItemsList';

function main(sources) {
  const itemsVTree$ = ItemsList(sources);

  const vdom$ = itemsVTree$.map(tree =>
    div([
      h1('Cycle.js CRUD Application'),
      tree
    ])
  );

  return {
    DOM: vdom$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
﻿
GitHub에 커밋하기
Git 저장소 초기화하기 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
작업 커밋하기:
Bash
git commit -m "Cycle.js 프론트엔드 초기 커밋"
git commit -m "Cycle.js 프론트엔드 초기 커밋"
﻿
GitHub 저장소 만들기 (예: Basic-CRUD-App-CycleJS-Frontend).
저장소 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-CycleJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-CycleJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 리포지토리와 웹 배포 연결하기
웹 배포 접근하기:
Back4app에 로그인하고, 프로젝트(Basic-CRUD-App-CycleJS)로 이동한 후 웹 배포 기능을 선택하세요.
GitHub에 연결하기:
Back4app이 리포지토리에 접근할 수 있도록 GitHub 계정을 연결하는 안내를 따르세요.
리포지토리 및 브랜치 선택하기:
리포지토리(예: Basic-CRUD-App-CycleJS-Frontend)와 브랜치(일반적으로 main)를 선택하세요.
﻿
7.4 배포 설정
빌드 명령어:
저장소에 미리 빌드된 build 폴더가 없으면 빌드 명령어를 지정하세요 (예: npm run build).
출력 디렉토리:
이것을 build로 설정하여 Back4app이 정적 파일을 찾을 수 있도록 하세요.
환경 변수:
필요한 API 키나 구성 세부정보를 포함하세요.
﻿
7.5 Cycle.js 애플리케이션 도커화하기
Docker 배포를 선택하면 저장소에 Dockerfile을 추가하세요:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the remaining files
COPY . .

# Build the Cycle.js application
RUN npm run build

# Use Nginx to serve the built files
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 for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the remaining files
COPY . .

# Build the Cycle.js application
RUN npm run build

# Use Nginx to serve the built files
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
애플리케이션을 컨테이너화하려면 웹 배포 구성에서 Docker 배포 옵션을 선택하세요.
﻿
7.6 애플리케이션 배포하기
앱 배포하기:
설정을 구성한 후 배포 버튼을 클릭하세요.
배포 모니터링하기:
Back4app이 GitHub에서 코드를 가져오고, 앱을 빌드(구성된 경우)하고 배포합니다.
애플리케이션 접근하기:
배포가 완료되면 Back4app이 라이브 Cycle.js 애플리케이션의 URL을 제공합니다.
﻿
7.7 배포 테스트하기
배포된 URL 방문하기:
제공된 URL을 브라우저에서 엽니다.
기능 확인하기:
모든 경로와 자산이 제대로 로드되는지 확인합니다.
필요시 디버깅하기:
브라우저 개발자 도구를 사용하고 Back4app 배포 로그를 검토하여 문제를 해결합니다.
﻿
8단계 – 마무리 및 향후 개선 사항
축하합니다! Cycle.js와 Back4app을 사용하여 CRUD 애플리케이션을 성공적으로 구축했습니다. 
"Basic-CRUD-App-CycleJS"라는 제목의 프로젝트를 설정하고, 항목 및 사용자에 대한 데이터베이스 스키마를 정의했으며, 직관적인 관리 앱을 통해 데이터를 관리했습니다. 
또한, REST/GraphQL을 사용하여 Cycle.js 프론트엔드를 백엔드와 통합하고 적절한 접근 제어로 데이터를 보호했습니다.
다음 단계:
프론트엔드 확장:
더욱 고급 뷰, 필터링 또는 실시간 업데이트를 추가하세요.
추가 백엔드 기능 통합:
클라우드 기능, 서드파티 API 또는 역할 기반 접근 제어 추가를 고려하세요.
추가 학습:
성능 조정 및 사용자 정의 통합에 대한 추가 통찰력을 위해 Back4app 문서를 탐색하세요.
이 가이드를 통해 이제 Back4app을 사용하여 Cycle.js 애플리케이션을 위한 확장 가능한 CRUD 백엔드를 구축할 수 있는 기술을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 추가된 시간의 타임스탬프입니다.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자의 고유 식별자.
이메일	문자열	사용자의 이메일 주소.
비밀번호_해시	문자열	안전한 인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
업데이트됨 26 Feb 2025
이 페이지가 도움이 되었습니까?
마리오네트.js로 기본 CRUD 앱 구축하기: 단계별 가이드
Ractive.js로 기본 CRUD 앱 만드는 방법: 단계별 안내