앵귤러로 기본 CRUD 앱 만드는 방법?

41min
소개
이 가이드에서는 Angular를 사용하여 기본 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 과정을 안내합니다.
Angular의 강력한 프레임워크를 활용하여 데이터 작업을 효율적으로 관리하는 애플리케이션을 개발하는 방법을 배우게 됩니다.
먼저, Basic-CRUD-App-Angular라는 제목의 새로운 Back4app 프로젝트를 생성하고 구성하여 백엔드 데이터 관리의 중추 역할을 하게 됩니다.
다음으로, Back4app AI 에이전트의 도움을 받거나 수동으로 자세한 컬렉션과 필드를 개요하여 확장 가능한 데이터베이스 모델을 설계합니다. 이 단계는 시스템이 모든 CRUD 기능을 처리할 준비가 되어 있음을 보장합니다.
스키마를 설정한 후, 직관적인 드래그 앤 드롭 인터페이스인 Back4app Admin App을 탐색하여 컬렉션과 레코드를 쉽게 관리합니다.
마지막으로, REST/GraphQL(또는 선호하는 경우 Parse SDK)을 사용하여 Angular 프론트엔드를 Back4app과 통합하고, 백엔드를 보호하기 위한 고급 보안 조치를 구현합니다.
이 튜토리얼이 끝나면 사용자 인증 및 포괄적인 CRUD 기능을 갖춘 프로덕션 준비 완료 Angular 애플리케이션을 구축하게 됩니다.
주요 내용
신뢰할 수 있는 백엔드로 데이터를 효율적으로 처리하는 CRUD 애플리케이션을 구축하는 방법을 마스터하세요.
확장 가능한 데이터 모델을 생성하고 이를 Angular 프론트엔드에 연결하는 방법에 대한 실용적인 통찰력을 얻으세요.
Back4app 관리 앱의 사용자 친화적인 인터페이스를 활용하여 데이터 관리를 쉽게 하는 방법을 배우세요.
Angular 앱을 신속하게 배포하기 위한 전략, Docker 컨테이너화 등을 이해하세요.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
새 프로젝트 설정이 포함된 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 확인하세요.
Angular 개발 환경입니다.
Angular CLI를 설치하려면 npm install -g @angular/cli를 실행하고 ng new를 사용하여 새 프로젝트를 만드세요. Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
TypeScript, Angular 및 REST API에 대한 기본 이해입니다.
복습을 원하시면 Angular 문서를 방문하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-Angular 및 설정 프롬프트를 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 Back4app 대시보드에 나타나며, 백엔드 구성의 강력한 기반을 제공합니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 모델 구성하기
이 CRUD 애플리케이션을 위해 여러 컬렉션을 정의할 것입니다. 아래는 데이터베이스 스키마의 기초를 형성할 컬렉션과 그 필드의 예입니다. 이러한 컬렉션은 애플리케이션이 필수 CRUD 작업을 수행할 수 있도록 합니다.
1. 항목 수집
이 수집은 각 항목에 대한 정보를 저장합니다.
필드
데이터 유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 인증 데이터를 유지합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자입니다.
이메일
문자열
독특한 이메일 주소.
비밀번호_해시
문자열
인증을 위한 안전하게 해시된 비밀번호.
생성일
날짜
계정이 생성된 시간을 나타내는 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
Back4app 대시보드에서 각 컬렉션에 대해 새 클래스를 생성하고 필드를 정의하는 열을 추가하여 이러한 컬렉션을 수동으로 설정할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필수 여부를 표시하여 열을 추가하세요.
열 만들기
﻿
﻿
스키마 설정을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 설명 프롬프트를 기반으로 데이터베이스 스키마를 자동으로 생성할 수 있는 대화형 도구입니다. 이 기능은 시간을 절약하고 CRUD 작업에 완벽하게 맞춤화된 백엔드를 보장합니다.
AI 에이전트 사용 단계:
AI 에이전트 열기:
Back4app 대시보드에 로그인하고 AI 에이전트 옵션을 찾습니다.
스키마 설명하기:
필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 입력합니다.
검토 및 확인:
제출 후 생성된 스키마를 검토하고 프로젝트에 적용합니다.
샘플 프롬프트
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - 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 primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 AI 기반 접근 방식은 프로세스를 간소화하고 일관되고 최적화된 스키마를 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 관리
관리 앱 미리보기
Back4app 관리 앱은 백엔드 데이터를 손쉽게 관리할 수 있는 코드 없는 드래그 앤 드롭 인터페이스를 제공합니다.
이를 통해 레코드를 추가, 보기, 수정 및 삭제하는 CRUD 작업을 쉽게 수행할 수 있습니다.
관리자 앱 활성화
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리자 앱” 선택을 클릭하고 “관리자 앱 활성화.”
관리자 자격 증명 설정:
초기 관리자 사용자를 생성하고, 역할(예: B4aAdminUser) 및 시스템 컬렉션을 구성합니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 컬렉션과 레코드를 관리합니다.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 활용
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 레코드 추가: 모든 컬렉션(예: 항목)에서 “레코드 추가”를 클릭하여 새 항목을 생성합니다.
레코드 보기 및 편집: 레코드를 선택하여 세부 정보를 보거나 필드를 업데이트합니다.
레코드 제거: 삭제 옵션을 사용하여 오래된 레코드를 제거합니다.
이 직관적인 인터페이스는 백엔드 데이터 관리를 크게 단순화합니다.
﻿
4단계 – Angular 프론트엔드를 Back4app에 연결하기
이제 백엔드가 완전히 설정되고 관리자 앱을 통해 관리되므로, Angular 프론트엔드를 Back4app에 연결할 시간입니다.
옵션 A: Angular와 Parse SDK 통합하기
Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
Angular 프로젝트에 Parse 설정하기:
구성 파일 생성하기 (예: src/app/parse-config.ts):
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// 실제 Back4app 자격 증명으로 교체하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// 실제 Back4app 자격 증명으로 교체하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
﻿
Text

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}
﻿
그리고 HTML 템플릿 (items-list.component.html):
HTML
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
﻿
옵션 B: REST 또는 GraphQL 활용하기
Parse SDK를 사용하지 않으려면 REST 또는 GraphQL을 통해 CRUD 작업을 수행할 수 있습니다. 예를 들어, Angular에서 REST를 사용하여 항목을 가져오려면 다음과 같은 서비스 메서드를 생성합니다:
TypeScript
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
﻿
필요에 따라 Angular 구성 요소 내에서 이러한 API 호출을 통합할 수 있습니다.
﻿
5단계 – 백엔드 보호하기
액세스 제어 목록(ACL) 구현하기
객체에 ACL을 할당하여 데이터 보안을 강화하세요. 예를 들어, 소유자만 접근할 수 있는 항목을 생성하려면:
TypeScript
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign 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('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign 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('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성하기
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 기본 액세스 규칙을 설정하고, 인증된 사용자 또는 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다.
﻿
6단계 – 사용자 인증 관리
사용자 계정 생성 및 관리
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 관리합니다. Angular 프로젝트에서 사용자 등록 및 로그인을 다음과 같이 처리할 수 있습니다:
TypeScript
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: 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('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: 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('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
그리고 해당 HTML 템플릿 (auth.component.html):
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
사용자 로그인 및 세션 관리에 유사한 접근 방식을 적용할 수 있습니다. 소셜 로그인이나 비밀번호 재설정과 같은 기능의 경우 Back4app 대시보드에서 설정을 조정하십시오.
﻿
7단계 – Angular 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 직접 배포하여 Angular 애플리케이션을 호스팅할 수 있습니다. 이 섹션에서는 프로덕션 빌드를 준비하고, 소스 코드를 커밋하고, 배포를 위해 리포지토리를 통합합니다.
7.1 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
프로덕션 빌드 명령을 실행합니다:
Bash
ng build --prod
ng build --prod
﻿
이 명령은 Angular 애플리케이션을 최적화된 dist/ 폴더로 컴파일합니다.
빌드 확인:
 dist/ 디렉토리에 index.html 및 모든 필요한 자산이 포함되어 있는지 확인하십시오.
7.2 소스 코드 구조화 및 업로드
귀하의 저장소에는 전체 Angular 프로젝트가 포함되어야 합니다. 일반적인 파일 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
﻿
예시: src/app/parse-config.ts
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
예시: src/app/app.component.ts
TypeScript
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
﻿
코드를 GitHub에 커밋하기
프로젝트 폴더에서 Git 저장소를 초기화하세요 만약 아직 하지 않았다면:
Bash
git init
git init
﻿
프로젝트 파일을 추가하세요:
Bash
git add .
git add .
﻿
변경 사항을 커밋하세요:
Bash
git commit -m "Angular 프론트엔드 초기 커밋"
git commit -m "Angular 프론트엔드 초기 커밋"
﻿
GitHub 저장소를 생성하세요:
예를 들어, 이름을 Basic-CRUD-App-Angular로 하세요.
코드를 GitHub에 푸시하세요:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
﻿
7.3 GitHub 리포지토리와 웹 배포 연결하기
웹 배포 기능에 접근하기:
Back4app 대시보드에 로그인하고, 프로젝트 (Basic-CRUD-App-Angular)를 선택한 후 웹 배포를 선택하세요.
GitHub 계정 연결하기:
프롬프트에 따라 GitHub 계정을 통합하여 Back4app이 리포지토리에 접근할 수 있도록 하세요.
리포지토리 및 브랜치 선택하기:
리포지토리(예: Basic-CRUD-App-Angular)와 코드가 포함된 브랜치(예: main)를 선택하세요.
7.4 배포 설정 구성하기
필요한 구성 세부정보를 제공하세요:
빌드 명령:
리포지토리에 미리 빌드된 dist/ 폴더가 없는 경우, 빌드 명령을 지정하세요 (예: ng build --prod).
출력 디렉토리:
출력 디렉토리를 dist/your-project-name로 설정하여 Back4app이 정적 파일의 위치를 알 수 있도록 하세요.
환경 변수:
배포 구성에 필요한 환경 변수(예: API 키)를 추가하세요.
7.5 Docker로 Angular 애플리케이션 컨테이너화하기
Docker 기반 배포를 선호하는 경우, 리포지토리에 Dockerfile을 포함하세요. 예를 들어:
Dockerfile
# Use an official Node image to build the Angular app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

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

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

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
이 Dockerfile을(를) 리포지토리에 포함한 후, Back4app의 웹 배포 설정에서 Docker 배포 옵션을 선택하세요.
7.6 애플리케이션 시작하기
배포 버튼 클릭:
배포 설정이 구성되면 배포를 클릭하세요.
배포 프로세스 모니터링:
Back4app이 코드를 가져오고, 필요시 빌드 명령을 실행하며, Angular 앱을 배포합니다.
URL 가져오기:
성공적인 배포 후, Back4app이 애플리케이션이 라이브인 URL을 제공합니다.
7.7 배포된 애플리케이션 테스트하기
제공된 URL 방문:
브라우저에서 URL을 엽니다.
기능 확인:
Angular 앱이 제대로 로드되고, 모든 경로가 예상대로 작동하며, 자산이 올바르게 제공되는지 확인합니다.
필요시 문제 해결:
브라우저 개발자 도구를 사용하여 문제를 식별하고 해결합니다. 문제가 발생하면 Back4app의 배포 로그와 구성을 확인하세요.
﻿
8단계 – 마무리 및 향후 방향
축하합니다! Angular와 Back4app을 사용하여 기본 CRUD 애플리케이션을 성공적으로 구축했습니다. 
"Basic-CRUD-App-Angular"라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 포괄적인 데이터베이스 컬렉션을 설계했으며, 직관적인 관리 앱을 사용하여 데이터를 관리했습니다. 
또한, Angular 프론트엔드를 백엔드에 연결하고 강력한 보안 조치를 구현했습니다.
다음 단계:
프론트엔드 향상:
상세 항목 보기, 검색 기능 및 실시간 업데이트와 같은 고급 기능으로 Angular 애플리케이션을 확장하세요.
기능 확장:
추가 백엔드 로직(예: 클라우드 함수) 통합 또는 역할 기반 접근 제어 구현을 고려하세요.
추가 리소스 탐색:
Back4app 문서 및 기타 Angular 리소스를 확인하여 이해를 심화하세요.
이 가이드를 통해 이제 Back4app을 사용하여 Angular 애플리케이션을 위한 강력하고 확장 가능한 CRUD 백엔드를 구축할 수 있습니다. 즐거운 코딩 되세요!
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자입니다.
이메일	문자열	독특한 이메일 주소.
비밀번호_해시	문자열	인증을 위한 안전하게 해시된 비밀번호.
생성일	날짜	계정이 생성된 시간을 나타내는 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with Next.js?
How to Build a CRUD App with ReactJS?