퀵스타터즈
아이오닉을 위한 백엔드 구축 방법?

34min
소개
이 튜토리얼에서는 Back4App을 사용하여 Ionic 앱의 완전한 백엔드를 구축하는 방법을 배웁니다.
데이터베이스 관리, 클라우드 코드 함수, REST 및 GraphQL API, 사용자 인증, 파일 처리 등을 다룰 것입니다.
우리의 목표는 Ionic을 위한 백엔드 구축 방법을 보여주는 것입니다. 그것은 안전하고, 확장 가능하며, 유지 관리가 용이합니다.
서버 측 설정을 단순화하기 위해 Back4App의 직관적인 환경을 사용할 것이며, 수동으로 서버나 데이터베이스를 구성하는 번거로움에서 벗어날 수 있습니다.
클라우드 작업으로 작업 예약, 고급 보안 규칙 적용, 다른 서비스와의 웹후크 통합과 같은 필수 도구를 배울 것입니다.
마지막에는 이 기본 백엔드를 Ionic 앱을 위한 프로덕션 준비 시스템으로 확장할 준비가 될 것입니다.
전제 조건
Back4App 계정 및 새로운 Back4App 프로젝트
Back4App 시작하기.
계정이 없으신 경우, 무료로 계정을 생성하고 위의 가이드를 따라 프로젝트를 설정하세요.
기본 Ionic 개발 환경
Ionic 앱을 생성하고 실행할 수 있도록 Ionic CLI가 설치되어 있는지 확인하세요.
Node.js (버전 14 이상) 설치
Node.js 다운로드하여 종속성을 관리하고 프로젝트를 빌드하세요.
JavaScript/TypeScript 및 Ionic 개념에 대한 이해
Ionic 공식 문서.
Ionic 구조, 구성 요소 및 생명 주기 훅에 대한 좋은 이해가 도움이 될 것입니다.
1단계 – Back4App에서 새 프로젝트 만들기 및 연결하기
Back4App 계정에 로그인.
새 앱 만들기 Back4App 대시보드의 “새 앱” 버튼을 사용하여.
앱 이름 지정하기 (예: “Ionic-Backend-Tutorial”).
﻿
이 Back4App 프로젝트는 백엔드의 기초입니다. 클라이언트 측 Parse SDK를 사용하는 것과 달리, 이 튜토리얼은 Ionic 앱에서 REST 및 GraphQL을 통해 호출하는 방법을 보여줍니다.
자격 증명 가져오기
Back4App 대시보드에서 앱 설정 또는 보안 및 키로 이동합니다.
다음의 애플리케이션 ID, REST API 키, 및 GraphQL 엔드포인트. Ionic 앱에서 요청을 보내려면 이들이 필요합니다.
2단계 – 데이터베이스 설정
잘 구조화된 데이터베이스는 모든 앱의 중추입니다. Back4App의 대시보드는 데이터 모델을 설계하고 관계를 처리하는 것을 쉽게 만들어 줍니다.
1. 데이터 모델 만들기
Back4App 대시보드의 데이터베이스 섹션으로 이동합니다.
새 클래스를 생성합니다(예: “Todo”) 및 열을 추가합니다(예: title을 문자열로, isCompleted을 불리언으로).
새 클래스 만들기
﻿
2. AI 에이전트를 사용하여 데이터 모델 만들기
Back4App 대시보드에서 AI Agent를 엽니다.
원하는 스키마를 설명합니다. 예: “제목(String)과 완료 여부(Boolean) 필드가 있는 Todo 클래스를 생성합니다.”
AI Agent가 스키마를 자동으로 생성합니다.
﻿
3. REST API를 사용한 데이터 읽기 및 쓰기
Ionic 코드에서 HTTP 요청을 실행할 수 있습니다. 예를 들어, Todo를 생성하려면 다음과 같이 합니다:
Bash
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
﻿
모든 Todos를 가져오려면 다음과 같이 합니다:
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
이 호출을 fetch, Axios, 또는 Ionic 앱의 서비스나 컴포넌트 파일 내의 다른 HTTP 클라이언트 라이브러리를 사용하여 통합할 수 있습니다.
4. GraphQL API를 사용한 데이터 읽기 및 쓰기
유사하게, Ionic 앱에서 GraphQL 변형 및 쿼리를 보낼 수 있습니다. 예를 들어, create 새로운 Todo를 만들기 위해:
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
    }
  }
}
﻿
예시 REST 또는 GraphQL 호출은 Ionic 구조의 제공자/서비스 파일에 배치할 수 있으며, 그런 다음 페이지에서 호출할 수 있습니다.
5. 실시간 쿼리 작업하기 (선택 사항)
실시간 쿼리는 앱의 데이터에 대한 실시간 업데이트를 제공하지만, Parse SDK 또는 전문 구독 접근 방식이 필요합니다. 실시간 데이터가 필요하면 Back4App 서버 설정에서 Live Queries를 활성화할 수 있습니다. 일반적으로 클래스의 변경 사항을 감지하기 위해 WebSocket 연결을 사용합니다. 그러나 표준 HTTP 기반 호출의 경우 REST 또는 GraphQL 엔드포인트를 주기적으로 쿼리할 수 있습니다.
3단계 – ACL 및 CLP로 보안 적용하기
간략한 개요
ACLs (액세스 제어 목록)를 사용하면 개별 객체에 대한 읽기/쓰기 권한을 설정할 수 있습니다. CLPs (클래스 수준 권한)는 클래스 수준에서 더 넓은 접근을 관리할 수 있게 해줍니다. 이러한 기능은 개인 데이터를 보호하고 권한이 있는 사용자만 정보를 수정할 수 있도록 보장하는 데 중요합니다.
클래스 수준 권한 설정하기
Back4App 대시보드에서 데이터베이스 > 클래스 수준 권한로 이동합니다.
클래스 기본값을 구성합니다 (예: 인증된 사용자만 새로운 Todos를 생성할 수 있음).
ACL 구성하기
레코드를 생성하거나 업데이트할 때, ACL 필드를 REST를 통해 전달할 수 있습니다:
Bash
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
자세한 정보는 앱 보안 가이드라인을 참조하세요.
4단계 – 클라우드 코드 함수 작성
클라우드 코드의 필요성
클라우드 코드는 데이터 검증, 트리거 또는 통합과 같은 작업을 위해 서버 측 JavaScript를 실행할 수 있게 해줍니다. 클라이언트에서 코드를 제외하고 싶을 경우, 로직을 중앙 집중화하기 위해 사용자 정의 엔드포인트를 생성할 수 있습니다.
예제 함수 및 트리거
서버 측의 main.js에서 다음과 같이 작성할 수 있습니다:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
이를 Back4App CLI를 통해 배포하거나 대시보드의 클라우드 코드 섹션에서 배포할 수 있습니다.
아이오닉에서 클라우드 코드 호출하기
POST 요청을 보낼 수 있습니다:
Bash
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
JSON 응답을 받아서 반환된 데이터나 오류 메시지를 포함합니다.
NPM 모듈
Cloud Code 환경에서 axios와 같은 패키지를 설치하여 서드파티 서비스를 통합할 수 있습니다. main.js에 포함하세요:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
배포하고 다른 Cloud Code 함수와 같은 방식으로 호출하세요.
5단계 – 인증 구성
사용자 인증 활성화
사용자 가입 및 로그인은 User 클래스에 대한 REST 호출로 수행할 수 있습니다. 예를 들어, 가입:
Bash
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 '{
    "username": "jon",
    "password": "somePassword",
    "email": "[email protected]"
  }' \
  https://parseapi.back4app.com/users
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 '{
    "username": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
로그인
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  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" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
성공하면 sessionToken을 받게 됩니다. 안전하게 저장하고 인증된 작업을 위해 향후 요청의 헤더에 포함하세요.
소셜 로그인
Back4App을 통해 OAuth 흐름을 설정하거나 외부 제공자를 사용하여 소셜 로그인을 구성할 수 있습니다. 자세한 단계는 소셜 로그인 문서를 참조하세요.
6단계 – 파일 저장 처리
파일 저장 설정
Back4App은 안전한 파일 저장을 제공합니다. 객체에 파일을 첨부하거나 독립적으로 저장할 수 있습니다. 예를 들어:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
응답에는 클래스에 저장할 수 있는 파일 URL이 포함됩니다:
Bash
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
보안 고려사항
Back4App의 서버 설정에서 파일 보안 규칙을 활성화하여 인증을 요구하거나 특정 역할에 파일 업로드를 제한할 수 있습니다.
7단계 – 이메일 인증 및 비밀번호 재설정
인증이 중요한 이유
이메일 인증은 사용자 이메일의 정당성을 보장합니다. 비밀번호 재설정은 잃어버린 자격 증명을 복구하는 안전한 방법을 제공합니다. 이는 Ionic 앱에서 신뢰와 적절한 사용자 관리를 유지하는 데 도움이 됩니다.
Back4App 대시보드 구성
이동하여 앱 설정 > 이메일 설정.
이메일 인증을 활성화합니다.
인증 및 비밀번호 재설정 이메일 템플릿을 사용자 정의합니다.
8단계 – 클라우드 작업으로 작업 예약하기
클라우드 작업의 기능
클라우드 작업을 사용하면 데이터 정리 또는 요약 이메일 전송과 같은 반복 작업을 예약할 수 있습니다. 이를 main.js에 작성합니다.
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
배포 후:
 앱 설정 > 서버 설정 > 백그라운드 작업.
 cleanupOldTodos를 매일 실행되도록 예약합니다.
클라우드 작업 예약하기
﻿
9단계 – 웹훅 통합
웹훅을 사용하면 Back4App 프로젝트에서 특정 이벤트가 발생할 때 외부 서비스로 데이터를 보낼 수 있습니다. Ionic 앱이 새 레코드를 생성한 후 Stripe 또는 Slack에서 작업을 트리거해야 하는 경우, 웹훅을 사용하여 이를 자동화할 수 있습니다.
Back4App 대시보드에서 더보기 > 웹훅으로 이동합니다.
새 웹훅 추가 및 엔드포인트 설정 (예: https://your-service.com/webhook-endpoint).
“이벤트” 선택 (예: 저장 후 클래스에서).
웹훅 추가
﻿
표준 HTTP 라이브러리를 사용하여 main.js에서 Cloud Code 트리거로부터 아웃고잉 요청을 시작할 수도 있습니다.
10단계 – Back4App 관리 패널 탐색
이 Back4App Admin App은 비기술적 이해관계자를 위한 더 간단한 인터페이스입니다. 주요 Parse 대시보드에 들어가지 않고도 클래스에 대한 CRUD 작업을 쉽게 수행할 수 있는 방법을 제공합니다.
관리 앱 활성화
대시보드에서 더보기 > 관리 앱으로 이동합니다.
“관리 앱 활성화”를 클릭하고 관리 사용자를 생성합니다.
관리 인터페이스에 접근할 서브도메인을 선택합니다.
관리 앱 활성화
﻿
﻿
이 패널은 쿼리를 작성하지 않고 데이터를 관리하는 데 도움을 주며, 그래픽 인터페이스를 선호하는 클라이언트나 팀원에게 이상적입니다.
결론
이 가이드를 완료함으로써 Ionic의 백엔드 구축 방법에 대해:
안전한 백엔드 생성을 Back4App에서 강력한 데이터 모델과 관계로 구축했습니다.
REST 및 GraphQL API와 통합하여 Ionic 앱에서 데이터를 읽고 쓸 수 있습니다.
보안 구현을 ACL 및 CLP로 설정했습니다.
클라우드 코드 배포를 통해 사용자 정의 논리 및 트리거를 설정했습니다.
사용자 인증 구성 및 파일 저장소를 설정했습니다.
클라우드 작업 설정을 통해 작업을 예약했습니다.
웹훅 활용을 통해 외부 통합을 구현했습니다.
관리 패널 탐색을 통해 데이터 관리를 간소화했습니다.
이 기반을 통해 당신의 Ionic 앱은 프로덕션 준비가 완료된 플랫폼으로 발전할 수 있습니다. 더 많은 논리를 추가하고, 서드파티 API를 연결하거나, 사용 사례에 맞게 보안 규칙을 조정하세요.
다음 단계
프로덕션 빌드 향상을 위해 캐싱, 역할 기반 접근 및 성능 모니터링을 구현하세요.
고급 기능 통합으로 실시간 라이브 쿼리 또는 다중 인증을 추가하세요.
Back4App의 공식 문서 참조를 통해 분석, 로그 및 성능 조정에 대해 심층적으로 탐색하세요.
다른 튜토리얼 탐색을 통해 채팅 애플리케이션, IoT 통합 또는 Back4App의 강력한 백엔드 서비스와 결합된 위치 기반 기능을 시연하세요.
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Symfony를 위한 백엔드 구축 방법은?
다트를 위한 백엔드 구축 방법?