How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

41min
개요
이 가이드에서는 Aurelia 프레임워크를 사용하여 간단한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배웁니다.
이 튜토리얼은 Aurelia를 백엔드 서비스로 Back4app과 통합하여 필수 데이터 작업을 처리할 수 있는 애플리케이션을 구축하는 방법을 설명합니다.
먼저, 강력한 데이터 관리 시스템으로 사용할 Basic-CRUD-App-Aurelia라는 제목의 Back4app 프로젝트를 설정합니다.
다음으로, 수동으로 컬렉션과 필드를 정의하거나 Back4app AI 에이전트를 활용하여 확장 가능한 데이터베이스 구조를 개요합니다.
그 후, 데이터를 쉽게 관리할 수 있는 드래그 앤 드롭 인터페이스를 제공하는 Back4app 관리 앱을 활용합니다.
마지막으로, REST/GraphQL 호출(또는 해당되는 경우 Parse SDK)을 사용하여 Aurelia 프론트엔드를 Back4app과 연결하고, 세부적인 접근 제어로 백엔드를 안전하게 보호합니다.
이 튜토리얼이 끝나면 완전한 CRUD 기능, 사용자 인증 및 안전한 데이터 처리를 갖춘 프로덕션 준비 완료 웹 애플리케이션을 갖게 됩니다.
주요 통찰
신뢰할 수 있는 백엔드 서비스로 CRUD 애플리케이션 마스터하기.
확장 가능한 백엔드를 설계하고 이를 Aurelia 프론트엔드에 연결하는 실용적인 기술 습득하기.
원활한 데이터 작업을 위한 코드 없는 관리 인터페이스(Back4app Admin App) 탐색하기.
컨테이너화 등 현대적인 기술을 사용하여 애플리케이션을 배포하는 방법 배우기.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
가이드가 필요하면 Back4app 시작하기를 방문하세요.
Aurelia 개발 환경입니다.
Aurelia CLI 또는 유사한 도구를 사용하세요; Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Aurelia 및 REST API에 대한 기본적인 숙련도입니다.
필요한 경우 Aurelia 문서를 참조하세요.
﻿
1단계 – 프로젝트 설정하기
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 누르세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-Aurelia 및 설정 단계를 완료하세요.
새 프로젝트 만들기
﻿
생성 후, 프로젝트는 대시보드에서 백엔드 구성 및 데이터 관리를 위해 준비된 상태로 표시됩니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 만들기
이 CRUD 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다. 아래는 CRUD 작업을 효과적으로 지원하는 데 필요한 필드와 데이터 유형과 함께 필요한 컬렉션의 예입니다.
1. 아이템 컬렉션
필드
데이터 유형
세부사항
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 설명입니다.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
항목이 마지막으로 수정된 시간.
2. 사용자 수집
필드
데이터 유형
세부사항
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
계정 유효성을 위한 고유 이메일 주소.
비밀번호_해시
문자열
사용자 인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
Back4app 대시보드에서 각 클래스에 대해 새 클래스를 추가하고 필요한 열을 정의하여 이러한 컬렉션을 수동으로 만들 수 있습니다.
새 클래스 만들기
﻿
올바른 데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필드가 필수인지 여부를 표시하여 데이터베이스 필드를 쉽게 설정하세요.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 프롬프트를 통해 데이터 모델을 설명할 수 있게 하여 스키마 생성을 간소화합니다. 이 도구는 귀하의 요구 사항에 따라 자동으로 컬렉션과 필드를 생성합니다.
AI 에이전트 사용 단계:
AI 에이전트 시작하기:
Back4app 대시보드를 열고 프로젝트 설정에서 AI 에이전트를 찾습니다.
스키마 설명하기:
필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 입력합니다.
검토 및 확인:
생성된 스키마 제안을 검토하고 프로젝트에 적용합니다.
샘플 프롬프트
Text
Create the following 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 the following 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단계 – Aurelia와 Back4app 연결하기
백엔드가 Admin App을 통해 구성되고 관리되면, 이제 Aurelia 프론트엔드를 Back4app에 연결할 시간입니다.
REST 또는 GraphQL 사용하기
REST 또는 GraphQL API를 사용할 수 있습니다. 예를 들어, REST를 통해 항목을 가져오려면:
JS
// Example REST request 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('Items fetched:', data.results);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchItems();
// Example REST request 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('Items fetched:', data.results);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchItems();
﻿
필요에 따라 Aurelia 구성 요소 내에서 이러한 API 호출을 통합하십시오.
﻿
5단계 – 백엔드 보호하기
액세스 제어 목록(ACL) 구현하기
데이터 객체에 ACL을 할당하여 보안을 강화하십시오. 예를 들어, 개인 항목을 생성하려면:
JS
async function createSecureItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access to the owner only
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error saving secure item:', error);
  }
}
async function createSecureItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access to the owner only
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error saving secure item:', error);
  }
}
﻿
클래스 수준 권한 설정(CLPS)
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 기본 보안 규칙을 시행하고, 인증된 사용자 또는 권한이 부여된 사용자만 민감한 정보에 접근할 수 있도록 합니다.
﻿
6단계 – 사용자 인증 관리하기
사용자 계정 구성하기
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 처리합니다. Aurelia 앱에서 사용자 등록 및 로그인을 아래와 같이 관리할 수 있습니다:
JS
// src/resources/components/auth.js
import { observable } from 'aurelia-framework';
import Parse from '../../parse-config';

export class Auth {
  @observable username = '';
  @observable password = '';
  @observable email = '';

  async signUp(event) {
    event.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('Registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/resources/components/auth.js
import { observable } from 'aurelia-framework';
import Parse from '../../parse-config';

export class Auth {
  @observable username = '';
  @observable password = '';
  @observable email = '';

  async signUp(event) {
    event.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('Registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
로그인 및 세션 관리에 대해서도 유사한 패턴을 구현할 수 있습니다. 소셜 로그인 통합, 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 구성할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Aurelia 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 배포하여 Aurelia 애플리케이션을 효율적으로 호스팅할 수 있습니다.
이 섹션에서는 프로덕션 빌드를 준비하고, 코드를 GitHub에 커밋하고, 리포지토리를 웹 배포와 연결하고, 사이트를 배포합니다.
7.1 프로덕션 빌드 생성
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
au build --env production
au build --env production
﻿
이 명령은 최적화된 정적 자산을 포함하는 dist 폴더를 생성합니다.
빌드 확인:
 dist 폴더에 index.html 및 JavaScript, CSS, 이미지에 필요한 하위 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 프로젝트 코드 정리 및 업로드
귀하의 GitHub 저장소에는 Aurelia 프론트엔드의 모든 소스 파일이 포함되어야 합니다. 예시 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Aurelia-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- app.js
|   |-- parse-config.js
|   `-- resources/
|       |-- components/
|       |   |-- items-list.js
|       |   `-- auth.js
|-- package.json
`-- README.md
Basic-CRUD-App-Aurelia-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- app.js
|   |-- parse-config.js
|   `-- resources/
|       |-- components/
|       |   |-- items-list.js
|       |   `-- auth.js
|-- package.json
`-- README.md
﻿
예시 파일
src/parse-config.js
JS
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/app.js
JS
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
﻿
JS
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
﻿
JS
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
﻿
코드를 GitHub에 커밋하기
프로젝트 폴더에서 Git 초기화하기 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Aurelia 프론트엔드 소스의 초기 커밋"
git commit -m "Aurelia 프론트엔드 소스의 초기 커밋"
﻿
GitHub에 리포지토리 생성하기 (예: Basic-CRUD-App-Aurelia-Frontend)입니다.
코드를 GitHub에 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Aurelia-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Aurelia-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub 리포지토리와 웹 배포 연결하기
웹 배포 접근하기:
Back4app 대시보드에 로그인하고, 프로젝트 (Basic-CRUD-App-Aurelia)로 이동한 후 웹 배포 옵션을 선택합니다.
GitHub에 연결하기:
프롬프트에 따라 GitHub 계정을 통합하고 Back4app에 리포지토리 접근 권한을 부여합니다.
리포지토리 및 브랜치 선택하기:
리포지토리 (예: Basic-CRUD-App-Aurelia-Frontend)와 코드가 포함된 브랜치 (예: main)를 선택합니다.
﻿
7.4 배포 구성
다음 구성 세부정보를 설정하십시오:
빌드 명령:
만약 dist 폴더가 미리 빌드되지 않았다면, Back4app이 실행할 명령을 지정하십시오 (예: au build --env production).
출력 디렉토리:
Back4app이 정적 파일이 위치한 곳을 알 수 있도록 이 값을 dist로 설정하십시오.
환경 변수:
필요한 환경 변수(예: API 키)를 구성 설정에 추가하십시오.
﻿
7.5 당신의 Aurelia 애플리케이션 컨테이너화하기 (Docker)
Docker 배포를 선호하는 경우, 다음과 유사한 Dockerfile을(를) 저장소에 포함하십시오:
Dockerfile
# Use an official Node image as the build environment
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy remaining files and build the app
COPY . .
RUN au build --env production

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image as the build environment
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy remaining files and build the app
COPY . .
RUN au build --env production

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
웹 배포에서 Docker 배포 옵션을 적절히 구성하십시오.
﻿
7.6 애플리케이션 배포하기
배포 버튼 클릭하기:
배포를 구성한 후 배포를 클릭하세요.
빌드 프로세스 모니터링하기:
Back4app이 GitHub에서 코드를 가져오고, 필요시 빌드 명령을 실행하며, 컨테이너에 애플리케이션을 배포합니다.
URL 가져오기:
배포가 완료되면 Back4app이 Aurelia 애플리케이션이 호스팅되는 URL을 제공합니다.
﻿
7.7 배포 확인하기
제공된 URL 열기:
브라우저에서 URL을 방문하여 라이브 사이트를 확인하세요.
애플리케이션 테스트하기:
애플리케이션이 올바르게 로드되고, 라우트가 의도한 대로 작동하며, 모든 자산(CSS, JavaScript, 이미지)이 제공되는지 확인하세요.
필요시 문제 해결하기:
브라우저 개발자 도구를 사용하여 문제를 진단하고, 필요시 Back4app 배포 로그를 검토하세요.
﻿
8단계 – 마무리 및 향후 방향
축하합니다! 당신은 Aurelia와 Back4app을 사용하여 완전한 CRUD 애플리케이션을 성공적으로 구축했습니다. 
당신은 Basic-CRUD-App-Aurelia라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 포괄적인 데이터베이스 스키마를 정의했으며, Back4app 관리 앱을 사용하여 데이터를 관리했습니다. 
또한 Aurelia 프론트엔드를 백엔드와 통합하고 강력한 보안 조치를 구현했습니다.
다음 단계:
UI 개선:
상세 보기, 검색 기능 및 실시간 데이터 업데이트로 Aurelia 애플리케이션을 확장하세요.
고급 기능 추가:
클라우드 기능, 서드파티 API 또는 역할 기반 권한을 통합하는 것을 고려하세요.
더 탐색하기:
최적화 및 사용자 정의에 대한 보다 심층적인 안내를 위해 Back4app 문서 및 추가 Aurelia 리소스를 확인하세요.
행복한 코딩과 개발 여정에 행운이 함께하길 바랍니다!
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 설명입니다.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목이 마지막으로 수정된 시간.
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	계정 유효성을 위한 고유 이메일 주소.
비밀번호_해시	문자열	사용자 인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with Meteor? A Step-by-Step Guide
How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial