퀵스타터즈
AngularJS를 위한 백엔드 구축 방법?

50min
소개
이 튜토리얼에서는 Back4app을 사용하여 AngularJS 애플리케이션의 완전한 백엔드를 구축하는 방법을 배웁니다.
데이터베이스 관리, 클라우드 코드 함수, REST 및 GraphQL API, 사용자 인증, 실시간 쿼리(라이브 쿼리)와 같은 필수 Back4app 기능을 통합하여 AngularJS 프론트엔드와 원활하게 통신하는 안전하고 확장 가능하며 강력한 백엔드를 만드는 과정을 안내합니다.
또한 Back4app의 빠른 설정과 직관적인 환경이 서버와 데이터베이스를 수동으로 구성하는 것에 비해 시간과 노력을 크게 줄일 수 있는 방법을 알게 될 것입니다.
이 과정에서 고급 보안 기능, 클라우드 작업을 통한 작업 예약, 외부 통합을 위한 웹훅 설정 등 주요 기능에 대한 실습 경험을 쌓게 됩니다.
이 튜토리얼이 끝나면 이 기본 설정을 프로덕션 준비 애플리케이션으로 향상시키거나 필요에 따라 사용자 정의 논리 및 타사 API를 쉽게 통합할 수 있는 준비가 잘 되어 있을 것입니다.
필수 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정과 새로운 Back4app 프로젝트
 Back4app 시작하기.
계정이 없으시면 무료로 생성할 수 있습니다. 위의 가이드를 따라 프로젝트를 준비하세요.
기본 AngularJS 개발 환경
 이 환경은 AngularJS 문서를 사용하거나 축소된 스크립트를 다운로드하여 설정할 수 있습니다. npm을 사용하여 종속성을 관리할 계획이라면 Node.js가 설치되어 있어야 합니다.
Node.js (버전 14 이상) 설치
npm 패키지를 설치하고 로컬 개발을 실행하려면 Node.js가 필요합니다. Node.js 설치하기﻿
JavaScript 및 기본 AngularJS 개념에 대한 이해
 AngularJS 공식 문서.﻿
시작하기 전에 이러한 필수 조건이 모두 갖추어져 있는지 확인하세요. Back4app 프로젝트를 설정하고 로컬 AngularJS 환경을 준비하면 더 쉽게 따라할 수 있습니다.
1단계 – Back4app 프로젝트 설정
새 프로젝트 만들기
Back4app에서 AngularJS 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다. 아직 만들지 않았다면, 다음 단계를 따르세요:
Back4app 계정에 로그인하세요.
“새 앱” 버튼을 클릭하세요 Back4app 대시보드에서.
앱에 이름을 지정하세요 (예: “AngularJS-Backend-Tutorial”).
﻿
프로젝트가 생성되면 Back4app 대시보드에 나열된 것을 볼 수 있습니다. 이 프로젝트는 이 튜토리얼에서 논의된 모든 백엔드 구성의 기초가 될 것입니다.
Parse SDK 연결하기
Back4app은 데이터를 관리하고, 실시간 기능을 제공하며, 사용자 인증을 처리하는 등 Parse 플랫폼에 의존합니다. AngularJS 애플리케이션을 Back4app에 연결하려면 parse npm 패키지를 설치하고(npm을 사용하는 경우) Back4app 대시보드의 자격 증명으로 초기화해야 합니다.
Parse 키 가져오기:
Back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키” 섹션으로 이동하여 애플리케이션 ID와 JavaScript 키를 찾으세요. 또한 Parse 서버 URL을 찾을 수 있습니다. (종종 https://parseapi.back4app.com) 형식입니다.
﻿
Parse SDK 설치하기 AngularJS 프로젝트에 (npm을 사용하는 경우):
Bash
npm install parse
npm install parse
﻿
또는:
Bash
yarn add parse
yarn add parse
﻿
AngularJS 애플리케이션에서 Parse 초기화하기:
일반적으로, 이 목적을 위해 JavaScript 파일(예: parseConfig.js)을 생성할 수 있습니다:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your 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';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
이 파일은 AngularJS 앱의 다른 곳에서 Parse를 가져올 때마다 특정 Back4app 인스턴스에 연결되도록 미리 구성되어 있음을 보장합니다.
이 단계를 완료함으로써 AngularJS 프론트엔드와 Back4app 백엔드 간의 안전한 연결을 설정했습니다. 모든 요청 및 데이터 거래는 이 SDK를 통해 안전하게 라우팅되며, 수동 REST 또는 GraphQL 호출의 복잡성을 줄여줍니다(필요할 때 여전히 사용할 수 있습니다).
2단계 – 데이터베이스 설정
데이터 저장 및 쿼리
Back4app 프로젝트가 설정되고 Parse SDK가 AngularJS 앱에 통합되었으므로 이제 데이터를 저장하고 검색할 수 있습니다. 레코드를 생성하는 가장 간단한 방법은 Parse.Object 클래스를 사용하는 것입니다:
JS
// Example: Create a Todo item

import Parse from './parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

// Example: Query all Todo items
async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
// Example: Create a Todo item

import Parse from './parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

// Example: Query all Todo items
async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
또는 Back4app의 REST API 엔드포인트를 사용할 수 있습니다:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Back4app은 또한 GraphQL 인터페이스를 제공합니다:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
이 다양한 옵션은 Parse SDK, REST 또는 GraphQL을 통해 데이터 작업을 통합할 수 있는 방법을 제공합니다.
스키마 설계 및 데이터 유형
기본적으로 Parse는 실시간 스키마 생성, 하지만 더 많은 제어를 위해 Back4app 대시보드에서 클래스와 데이터 유형을 정의할 수도 있습니다.
Back4app 대시보드에서 “데이터베이스” 섹션으로 이동합니다.
새 클래스를 생성합니다. (예: “Todo”) 및 제목 (문자열) 및 완료 여부 (부울)와 같은 관련 열을 추가합니다.
새 클래스 생성
﻿
Back4app은 또한 다양한 데이터 유형을 지원합니다: 문자열, 숫자, 부울, 객체, 날짜, 파일, 포인터, 배열, 관계, 지오포인트, 및 다각형. 각 필드에 적합한 유형을 선택할 수 있습니다. 원하신다면 AngularJS 앱에서 객체를 처음 저장할 때 Parse가 이러한 열을 자동으로 생성하도록 할 수도 있습니다.
열 생성
﻿
Back4app은 데이터 모델 설계를 도와줄 수 있는 AI 에이전트를 제공합니다:
AI 에이전트 열기 앱 대시보드 또는 메뉴에서.
데이터 모델 설명하기 간단한 언어로 (예: “새로운 ToDo 앱을 back4app에서 완전한 클래스 스키마로 생성해 주세요.”).
AI 에이전트가 스키마를 생성하도록 하세요.
﻿
AI 에이전트를 사용하면 데이터 아키텍처를 설정할 때 시간을 절약하고 애플리케이션 전반에 걸쳐 일관성을 보장할 수 있습니다.
관계형 데이터
관계형 데이터가 있는 경우—예를 들어, 여러 카테고리 객체가 여러 할 일 항목을 가리키는 경우—Parse에서 포인터 또는 관계를 사용할 수 있습니다. 예를 들어, 카테고리에 포인터를 추가하는 것입니다:
JS
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');
  
  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');
  
  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
﻿
쿼리할 때 포인터 데이터를 포함할 수도 있습니다:
JS
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
﻿
이 include('category') 호출은 각 할 일과 함께 카테고리 세부정보를 가져와 관계형 데이터를 원활하게 접근할 수 있게 합니다.
실시간 쿼리
실시간 업데이트를 위해 Back4app은 실시간 쿼리를 제공합니다. AngularJS 앱에서 특정 클래스의 변경 사항을 구독할 수 있습니다:
라이브 쿼리 활성화를 Back4app 대시보드의 앱 아래에서 서버 설정. “라이브 쿼리”가 켜져 있는지 확인하세요.
라이브 쿼리 구독 초기화를 코드에서:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
﻿
JS
import Parse from './parseConfig';

async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
import Parse from './parseConfig';

async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
구독함으로써 새로운 할 일이 생성되거나 업데이트되거나 삭제될 때마다 실시간 알림을 받을 수 있습니다. 이 기능은 여러 사용자가 페이지를 새로 고치지 않고도 최신 데이터를 볼 수 있어야 하는 협업 또는 동적 앱에 특히 유용합니다.
3단계 – ACL 및 CLP로 보안 적용
Back4app 보안 메커니즘
Back4app은 Access Control Lists (ACLs) 및 Class-Level Permissions (CLPs)을 제공하여 보안을 중요하게 생각합니다. 이러한 기능을 통해 객체별 또는 클래스별로 데이터를 읽거나 쓸 수 있는 사용자를 제한할 수 있으며, 승인된 사용자만 데이터 수정이 가능합니다.
﻿
Access Control Lists (ACLs)
ACL은 개별 객체에 적용되어 어떤 사용자, 역할 또는 일반 대중이 읽기/쓰기 작업을 수행할 수 있는지를 결정합니다. 예를 들어:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
객체를 저장할 때, 지정된 사용자 외에는 누구도 읽거나 수정할 수 없도록 하는 ACL이 있습니다.
ACL 편집
﻿
클래스 수준 권한 (CLPs)
CLPs는 클래스의 기본 권한을 관리하며, 클래스가 공개적으로 읽거나 쓸 수 있는지, 또는 특정 역할만 접근할 수 있는지를 결정합니다.
Back4app 대시보드로 이동, 앱을 선택하고 데이터베이스 섹션을 엽니다.
클래스 선택 (예: “Todo”).
클래스 수준 권한 탭을 엽니다.
읽기 또는 쓰기를 위한 “인증 필요” 또는 공개를 위한 “접근 불가”와 같은 기본값을 설정합니다.
﻿
이 권한은 기본선을 설정하며, ACL은 개별 객체에 대한 권한을 세부 조정합니다. 강력한 보안 모델은 일반적으로 CLPs(광범위한 제한)와 ACLs(세부적인 객체별 제한)를 결합합니다. 더 많은 정보는 앱 보안 가이드라인.﻿
4단계 – 클라우드 함수 작성 및 배포
클라우드 코드는 Parse Server 환경의 기능으로, 서버 측에서 사용자 정의 JavaScript 코드를 실행할 수 있게 해줍니다. 클라우드 코드를 작성함으로써, Back4app 백엔드를 추가 비즈니스 로직, 검증, 트리거 및 통합으로 확장할 수 있으며, 이는 Parse Server에서 안전하고 효율적으로 실행됩니다.
작동 방식
클라우드 코드를 작성할 때, 일반적으로 JavaScript 함수, 트리거 및 필요한 NPM 모듈을 main.js (또는 app.js) 파일에 배치합니다. 이 파일은 Back4app 프로젝트에 배포되며, Parse Server 환경 내에서 실행됩니다. 이러한 함수와 트리거는 서버에서 실행되므로, 기밀 로직을 처리하거나 민감한 데이터를 처리하거나 백엔드 전용 API 호출을 수행하는 데 신뢰할 수 있습니다. 이는 클라이언트에 직접 노출하고 싶지 않은 프로세스일 수 있습니다.
Back4app 앱을 위한 모든 클라우드 코드는 Back4app에서 관리하는 Parse Server 내에서 실행되므로 서버 유지 관리, 확장 또는 프로비저닝에 대해 걱정할 필요가 없습니다. main.js 파일을 업데이트하고 배포할 때마다 실행 중인 Parse Server가 최신 코드로 업데이트됩니다.
main.js 파일 구조
일반적인 main.js는 다음을 포함할 수 있습니다:
필요한 모듈에 대한 require 문 (NPM 패키지, 내장 Node 모듈 또는 기타 클라우드 코드 파일).
클라우드 함수 정의 사용 Parse.Cloud.define(). 
트리거 예를 들어 Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), 등.
설치한 NPM 모듈 (필요한 경우). 예를 들어, HTTP 요청을 만들기 위해 axios와 같은 패키지를 설치할 수 있습니다. 그런 다음 파일 상단에서 require(또는 import)할 수 있습니다.
JS
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
NPM 모듈을 설치하고 사용할 수 있는 기능 덕분에 클라우드 코드는 매우 유연해져 외부 API와 통합하거나 데이터 변환을 수행하거나 복잡한 서버 측 논리를 실행할 수 있습니다.
일반적인 사용 사례
비즈니스 로직: 예를 들어, 여러 객체 속성을 집계하여 게임에서 사용자의 점수를 계산한 다음, 해당 데이터를 자동으로 저장할 수 있습니다.
데이터 검증: 레코드를 저장하거나 삭제하기 전에 특정 필드가 존재하는지 또는 사용자가 올바른 권한을 가지고 있는지 확인합니다.
트리거: 데이터가 변경될 때 작업을 수행합니다(예: 사용자가 프로필을 업데이트할 때 알림을 보냄).
통합: 서드파티 API 또는 서비스와 연결합니다. 예를 들어, 결제 게이트웨이, Slack 알림 또는 이메일 마케팅 플랫폼과 Cloud Code에서 직접 통합할 수 있습니다.
보안 집행: Cloud Code 함수에서 입력 매개변수를 검증하고 정리하여 추가 보안 계층을 추가합니다. 예를 들어, 수신 데이터가 특정 형식과 일치하는지 확인하고, 유효하지 않거나 악의적인 입력을 거부하며, 민감한 작업을 수행하기 전에 사용자 역할 또는 권한에 따라 접근 규칙을 집행할 수 있습니다.
함수 배포
아래는 클라이언트에서 전송된 텍스트 문자열의 길이를 계산하는 간단한 Cloud Code 함수입니다:
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
다음과 같이 배포합니다 Back4app CLI:
1 - CLI 설치하기:
리눅스/맥OS용:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
윈도우용:
다운로드 b4a.exe 파일을 릴리스 페이지에서.
2 - 계정 키 구성하기:﻿
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - 클라우드 코드 배포하기:
Bash
b4a deploy
b4a deploy
﻿
대시보드를 통한 배포:
앱의 대시보드에서 클라우드 코드 > 함수로 이동합니다.
함수를 main.js 편집기에 복사/붙여넣기 합니다.
클릭 배포.
﻿
함수 호출하기
AngularJS에서 Parse SDK를 사용하여:
JS
import Parse from './parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from './parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
REST를 통해서도 호출할 수 있습니다:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
﻿
또는 GraphQL을 통해서:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
이 유연성은 AngularJS 프론트엔드 또는 REST 또는 GraphQL을 지원하는 다른 클라이언트에 사용자 정의 논리를 통합할 수 있게 해줍니다.
5단계 – 사용자 인증 구성하기
Back4app의 사용자 인증
Back4app은 Parse User 클래스를 인증의 기초로 활용합니다. 기본적으로 Parse는 비밀번호 해싱, 세션 토큰 및 안전한 저장을 처리합니다. 이는 복잡한 보안 흐름을 수동으로 설정할 필요가 없음을 의미합니다.
사용자 인증 설정
AngularJS 애플리케이션에서 새 사용자를 생성할 수 있습니다:
JS
import Parse from './parseConfig';

async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}
import Parse from './parseConfig';

async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}
﻿
기존 사용자 로그인:
JS
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
REST를 통해 로그인은 다음과 같이 보일 수 있습니다:
JS
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
﻿
세션 관리
성공적인 로그인 후, Parse는 세션 토큰을 사용자 객체에 저장합니다. AngularJS 앱에서 현재 로그인한 사용자에 접근할 수 있습니다:
JS
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
﻿
Parse는 자동으로 백그라운드에서 토큰 기반 세션을 처리하지만, 수동으로 관리하거나 취소할 수도 있습니다. 이는 로그아웃이 필요할 때 유용합니다:
JS
await Parse.User.logOut();
await Parse.User.logOut();
﻿
소셜 로그인 통합
Back4app과 Parse는 Google 또는 Facebook, 추가 패키지를 설치하거나 기존 어댑터를 사용하여 인기 있는 OAuth 제공업체와 통합할 수 있습니다. 예를 들어, Facebook App ID를 구성하고 Parse.FacebookUtils.logIn()을 사용하여 Facebook 로그인을 설정할 수 있습니다. 자세한 지침은 다를 수 있으므로 소셜 로그인 문서.﻿
JS
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
﻿
이메일 확인 및 비밀번호 재설정
이메일 확인 및 비밀번호 재설정을 활성화하려면:
이메일 설정으로 이동하여 Back4app 대시보드에서.
이메일 확인 활성화하여 새로운 사용자가 이메일 주소 소유권을 확인하도록 합니다.
보낸 사람 주소 구성, 이메일 템플릿 및 원하는 경우 사용자 도메인.
이 기능은 사용자 이메일 소유권을 검증하고 안전한 비밀번호 복구 방법을 제공하여 계정 보안 및 사용자 경험을 향상시킵니다.
6단계 – 파일 저장 처리
파일 업로드 및 검색
Parse는 파일 업로드를 처리하기 위한 Parse.File 클래스를 포함하고 있으며, Back4app은 이를 안전하게 저장합니다:
JS
import Parse from './parseConfig';

async function uploadImage(file) {
  // file is typically from a file input in AngularJS
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
import Parse from './parseConfig';

async function uploadImage(file) {
  // file is typically from a file input in AngularJS
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
﻿
데이터베이스의 객체에 파일을 첨부하려면 다음과 같이 할 수 있습니다:
JS
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
﻿
파일 URL을 검색하는 것은 간단합니다:
JS
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
﻿
이 imageUrl을 AngularJS 템플릿에서 HTML에 바인딩하거나 컨트롤러에서 사용할 수 있습니다.
파일 보안
Parse Server는 파일 업로드 보안을 관리하기 위한 유연한 구성을 제공합니다. 다음 예제는 누가 서버에 파일을 업로드할 수 있는지를 제어하기 위해 권한을 설정하는 방법을 보여줍니다:
{
"fileUpload": {
"enableForPublic": true,
"enableForAnonymousUser": true,
"enableForAuthenticatedUser": true
}
}
enableForPublic: true로 설정하면 인증 상태에 관계없이 누구나 파일을 업로드할 수 있습니다.
enableForAnonymousUser: 익명 사용자(가입하지 않은 사용자)가 파일을 업로드할 수 있는지를 제어합니다.
enableForAuthenticatedUser: 인증된 사용자만 파일을 업로드할 수 있는지를 지정합니다.
7단계 – 클라우드 작업으로 작업 예약하기
클라우드 작업
클라우드 작업은 Back4app에서 백엔드에서 정기적인 작업을 예약하고 실행할 수 있게 해줍니다. 예를 들어, 오래된 데이터를 정리하거나 매일 요약 이메일을 보내는 작업입니다. 일반적인 클라우드 작업은 다음과 같을 수 있습니다:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
클라우드 코드를 배포하세요 새로운 작업과 함께 (CLI 또는 대시보드를 통해).
Back4app 대시보드로 이동하세요 > 앱 설정 > 서버 설정 > 백그라운드 작업.
작업을 예약하세요 매일 또는 필요에 맞는 간격으로 실행되도록.
클라우드 작업 예약
﻿
클라우드 작업은 백그라운드 유지 관리 또는 기타 주기적인 프로세스를 자동화할 수 있게 해줍니다. 수동 개입이 필요하지 않습니다.
8단계 – 웹훅 통합
웹훅은 Back4app 앱이 특정 이벤트가 발생할 때마다 외부 서비스에 HTTP 요청을 보낼 수 있도록 합니다. 이는 결제 게이트웨이(예: Stripe), 이메일 마케팅 도구 또는 분석 플랫폼과 같은 제3자 시스템과 통합하는 데 강력합니다.
웹훅 구성으로 이동하여 Back4app 대시보드 > 더보기 > 웹훅을 클릭한 다음 웹훅 추가를 클릭합니다.
엔드포인트 설정 (예: https://your-external-service.com/webhook-endpoint).
트리거 구성하여 Back4app 클래스 또는 클라우드 코드 함수에서 어떤 이벤트가 웹훅을 발동할지를 지정합니다.
웹훅 추가
﻿
예를 들어, 새로운 Todo가 생성될 때마다 Slack 채널에 알림을 보내고 싶다면:
슬랙 앱을 만들어 들어오는 웹훅을 수락합니다.
슬랙 웹훅 URL을 복사합니다.
Back4app 대시보드에서 이벤트 "Todo 클래스의 새 레코드"에 대해 해당 슬랙 URL로 엔드포인트를 설정합니다.
필요한 경우 사용자 정의 HTTP 헤더나 페이로드를 추가할 수도 있습니다.
Cloud Code에서 beforeSave, afterSave와 같은 트리거에서 사용자 정의 HTTP 요청을 만들어 웹훅을 정의할 수도 있습니다.
BeforeSave WebHook
﻿
9단계 – Back4app 관리 패널 탐색
“Back4app Admin App”은 비기술 사용자가 CRUD 작업을 수행하고 코드를 작성하지 않고도 일상적인 데이터 작업을 처리할 수 있도록 설계된 웹 기반 관리 인터페이스입니다. 이는 데이터베이스 관리, 사용자 정의 데이터 관리 및 기업 수준의 작업을 간소화하는 모델 중심, 사용자 친화적 인터페이스를 제공합니다.
관리 앱 활성화
“App Dashboard > More > Admin App”으로 이동하여 “관리 앱 활성화” 버튼을 클릭하여 활성화합니다.
관리 앱 활성화
﻿
첫 번째 관리자 사용자 생성(사용자 이름/비밀번호)로, 이는 자동으로 새로운 역할(B4aAdminUser)과 클래스(B4aSetting, B4aMenuItem, B4aCustomField)를 앱의 스키마에 생성합니다.
﻿
관리 인터페이스에 접근할 서브도메인을 선택하고 설정을 완료합니다.
﻿
로그인 하여 새 Admin App 대시보드에 접근하기 위해 생성한 관리자 자격 증명을 사용하세요.
﻿
활성화되면, Back4app Admin App은 데이터베이스의 레코드를 쉽게 보고, 편집하거나 제거할 수 있게 해줍니다—Parse 대시보드나 백엔드 코드를 직접 사용할 필요 없이. 구성 가능한 접근 제어를 통해, 데이터 관리를 위해 명확하고 클릭 가능한 방법이 필요한 팀원이나 클라이언트와 이 인터페이스를 안전하게 공유할 수 있습니다.
결론
이 포괄적인 튜토리얼을 따라함으로써, 당신은:
안전한 백엔드 생성 AngularJS 앱을 위해 Back4app에서.
데이터베이스 구성 클래스 스키마, 데이터 유형 및 관계와 함께.
실시간 쿼리 통합 (Live Queries) 즉각적인 데이터 업데이트를 위해.
보안 조치 적용 ACL 및 CLP를 사용하여 데이터 접근을 보호하고 관리.
Cloud Code 구현 서버 측에서 사용자 정의 비즈니스 로직을 실행하는 기능.
사용자 인증 설정 이메일 확인 및 비밀번호 재설정을 지원.
파일 업로드 관리 선택적 파일 보안 제어와 함께.
Cloud Jobs 예약 자동화된 백그라운드 작업을 위해.
Webhooks 사용 외부 서비스와 통합하기 위해.
Back4app 관리 패널 탐색 데이터 관리를 위해.
견고한 AngularJS 프론트엔드와 강력한 Back4app 백엔드를 갖춘 당신은 이제 기능이 풍부하고 확장 가능하며 안전한 애플리케이션을 개발할 준비가 되어 있습니다. 더 고급 기능을 탐색하고 비즈니스 로직을 통합하며 Back4app의 힘을 활용하여 서버 및 데이터베이스 관리에서 수많은 시간을 절약하세요. 행복한 코딩!
다음 단계
생산 준비가 완료된 AngularJS 앱을 구축하세요 이 백엔드를 확장하여 더 복잡한 데이터 모델, 캐싱 전략 및 성능 최적화를 처리합니다.
고급 기능 통합 전문 인증 흐름, 역할 기반 접근 제어 또는 외부 API(결제 게이트웨이와 같은)를 포함합니다.
Back4app의 공식 문서 확인 고급 보안, 성능 조정 및 로그 분석에 대한 심층적인 내용을 위해.
다른 튜토리얼 탐색 실시간 채팅 애플리케이션, IoT 대시보드 또는 위치 기반 서비스에 대해. 여기서 배운 기술을 서드파티 API와 결합하여 복잡한 실제 애플리케이션을 만들 수 있습니다.
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
NextJS용 백엔드를 구축하는 방법?
리액트JS를 위한 백엔드를 구축하는 방법?