퀵스타터즈

플러터를 위한 백엔드를 구축하는 방법?

39min

소개

이 튜토리얼에서는 Flutter를 위한 백엔드를 구축하는 방법을 배우게 됩니다. Back4app은 오픈 소스이며 신뢰할 수 있는 백엔드 서비스(BaaS)입니다.

우리는 데이터베이스 관리, 클라우드 함수, RESTful API, GraphQL API 및 사용자 인증과 같은 필수 Back4app 기능을 Flutter 프로젝트에 통합하는 방법을 안내할 것입니다.

또한 실시간 업데이트를 처리하는 방법을 Live Queries를 사용하여 발견하게 될 것입니다. Back4app의 강력한 백엔드 서버를 사용하면 많은 수동 구성을 건너뛰고 동적인 Flutter 앱을 만드는 데 집중할 수 있습니다.

이 가이드는 Flutter 개발자에게 클라이언트 측과 원활하게 통신하는 안전하고 확장 가능하며 강력한 백엔드 구조를 설정하는 방법을 보여줄 것입니다.

또한 Back4app이 호스팅, 사용자 인증 및 서버 논리와 같은 무거운 작업을 처리하도록 하는 장점을 강조할 것입니다. 이를 통해 자동 확장, 고급 보안 및 간소화된 유지 관리와 같은 기능을 누릴 수 있습니다.

Flutter 프로젝트가 있고 수많은 백엔드 설정 시간을 절약하고 싶다면, 여기가 시작하기에 적합한 장소입니다.

이 튜토리얼이 끝나면 Back4app으로 생성할 수 있는 백엔드 유형을 이해하고, 프로덕션 준비가 완료된 애플리케이션을 위한 백엔드 서비스를 확장하거나 외부 API 및 고급 사용자 인증과 같은 더 복잡한 기능을 통합할 준비가 될 것입니다.

시작해 봅시다!

전제 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

  • Back4app 계정과 새로운 Back4app 프로젝트 Back4app 시작하기. 계정이 없으시면 무료로 생성할 수 있습니다. 위의 가이드를 따라 프로젝트를 준비하세요.
  • 기본 Flutter 개발 환경 Flutter SDK설치 및 설정이 완료되었는지 확인하세요. 또한, Flutter에 대해 구성된 IDE(예: Android Studio 또는 VS Code)가 있는지 확인하세요.
  • Dart (프로그래밍 언어) 환경 보통 Flutter와 함께 설치됩니다. 오류 없이 dart 패키지를 가져올 수 있는지 확인하세요.
  • Flutter 기본 사항에 대한 이해 Flutter 공식 문서. Flutter가 처음이라면, 시작하기 전에 공식 문서나 초보자 튜토리얼을 검토하세요.

이 모든 전제 조건이 준비되어 있는지 확인하세요. Back4app 프로젝트가 설정되고 로컬 Flutter 환경이 구성되어 있으면 더 쉽게 따라할 수 있습니다.

1단계 – Back4App에서 새 프로젝트 만들기 및 연결하기

새 프로젝트 만들기

Back4app에서 Flutter 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다. 아직 만들지 않았다면, 다음 단계를 따르세요:

  1. Back4app 계정에 로그인하세요.
  2. Back4app 대시보드에서 “새 앱” 버튼을 클릭하세요.
  3. 앱에 이름을 지정하세요 (예: “Flutter-Backend-Tutorial”).
Document image


프로젝트가 생성되면 Back4app 대시보드에 나열된 것을 볼 수 있습니다. 이 프로젝트는 우리가 논의할 모든 백엔드 구성의 기초가 될 것입니다.

Flutter 앱에 Parse SDK 설치 및 초기화하기

Back4app은 데이터 관리, 실시간 업데이트, 사용자 인증 등을 위해 Parse 플랫폼에 의존합니다. Flutter 프로젝트를 Back4app에 연결하려면 다음 단계를 따르세요:

  1. Parse Flutter SDK를 앱에 추가하세요:
YAML

  1. Parse 패키지를 당신의 main.dart에 임포트하세요 (또는 앱을 초기화하는 곳에):
Dart


Back4app 대시보드에서 앱의 Security & Keys 섹션으로 이동하여 Application ID, Client Key, 및 Parse Server URL. 위의 자리 표시자를 자신의 자격 증명으로 교체하십시오. 이 초기화로 인해 Flutter 앱의 모든 요청이 Back4app 인스턴스로 안전하게 라우팅됩니다.

Flutter 앱의 클라이언트 측에서는 master key를 절대 사용하지 않아야 합니다. master key가 필요하면 서버나 안전한 환경에 보관하십시오.

2단계 – 데이터베이스 설정

데이터 모델 만들기

Flutter 앱이 Back4app에 연결되면 데이터베이스 스키마를 설계할 수 있습니다. Back4app 대시보드에서 수동으로 수행할 수 있습니다:

  1. 대시보드에서 “Database” 섹션으로 이동하십시오.
  2. 새 클래스를 만드십시오. (예: “Todo”) 및 관련 열을 추가하십시오 (예: 제목, 완료 여부).
새 클래스 만들기
새 클래스 만들기


Back4app은 자동 스키마 생성을 돕기 위해 AI Agent를 제공합니다:

  1. AI 에이전트 열기 앱 대시보드 또는 메뉴에서.
  2. 데이터 모델 설명하기 간단한 언어로 (예: “완전한 클래스 스키마로 새로운 ToDo 앱 만들기.”).
  3. AI 에이전트가 스키마를 생성하게 하세요 당신을 위해.
Document image


이것은 데이터 아키텍처 설정을 간소화합니다. 필드를 자동으로 생성하려면 앱에서 객체를 저장하기 시작하면 됩니다—Parse는 즉석에서 스키마 생성을 지원합니다.

AI 에이전트를 사용하여 데이터 모델 만들기

Back4app AI 에이전트를 사용하기로 선택하면, 짧은 설명을 제공하기만 하면 스키마를 구축하거나 제안합니다. 이는 플러터 프로젝트의 초기 데이터 모델링 단계를 가속화하는 훌륭한 방법입니다.

Flutter Parse SDK를 사용하여 데이터 읽기 및 쓰기

아래는 Parse Flutter SDK를 사용하여 객체를 생성하고 검색하는 방법을 보여주는 간단한 예입니다.

Dart


이것을 사용하면 Flutter 앱에서 Back4app 데이터베이스와 직접 상호작용할 수 있습니다. 단순히 호출하십시오 createTodoItem('Feed the cat', false) 또는 fetchTodos() 데이터 읽기 및 쓰기를 위해.

REST API를 사용한 데이터 읽기 및 쓰기

다른 서비스와 통합해야 하거나 더 전통적인 접근 방식을 선호하는 경우, Back4app REST API를 여전히 사용할 수 있습니다:

Bash


GraphQL API를 사용한 데이터 읽기 및 쓰기

Back4app은 GraphQL 엔드포인트도 제공합니다:

GraphQL


이것은 Flutter 앱에 가장 적합한 접근 방식을 구축할 수 있는 유연성을 제공합니다.

라이브 쿼리 작업하기

Back4app은 라이브 쿼리를 제공하여 데이터에 대한 실시간 업데이트를 받을 수 있습니다. Back4app 대시보드(서버 설정)에서 라이브 쿼리를 활성화한 후 Parse LiveQuery Flutter 클라이언트를 사용하세요.

Dart


이 구독을 통해 데이터 변경 사항이 발생할 때 실시간으로 들을 수 있습니다. 이는 여러 사용자가 실시간 데이터 업데이트를 볼 수 있는 협업 앱을 구축하는 데 환상적입니다. 핫 리로드가 트리거되면 앱이 재시작되지 않는 한 구독은 유지됩니다.

3단계 – ACL 및 CLP로 보안 적용하기

ACL과 CLP란 무엇인가요?

Back4app은 ACL(액세스 제어 목록)CLP(클래스 수준 권한)를 사용하여 객체 및 클래스 수준에서 누가 데이터를 읽거나 쓸 수 있는지를 제한합니다. 이 계층은 데이터가 무단 접근으로부터 보호되도록 보장합니다.

클래스 수준 권한 설정하기

  1. Back4app 대시보드에서 Database로 이동하여 클래스(예: “Todo”)를 선택합니다.
  2. Class-Level Permissions로 이동합니다.
  3. 기본값을 설정합니다(예: 인증된 사용자만 새 객체를 생성할 수 있습니다).
Document image


코드에서 ACL 구성하기

Flutter 코드에서 객체 수준에서 ACL을 적용할 수도 있습니다:

Dart


CLP와 ACL을 결합하여 올바른 사람이나 역할만 특정 데이터에 접근하거나 수정할 수 있도록 할 수 있습니다.

4단계 – 클라우드 코드 함수 작성하기

클라우드 코드가 필요한 이유?

클라우드 코드는 백엔드 서버를 수동으로 설정하지 않고도 서버 측 로직을 실행할 수 있게 해줍니다. 이는 데이터 검증, 외부 서비스와의 통합 또는 백엔드 서비스(BaaS)에서 특정 규칙을 적용하는 데 완벽합니다.

예제 함수

다음은 텍스트의 길이를 계산하는 클라우드 함수의 예입니다:

JS


이 코드는 Back4app CLI를 통해 또는 앱의 대시보드에서 클라우드 코드 아래에서 배포할 수 있습니다.

배포

Back4app CLI 사용하기:

Bash


대시보드 사용하기:

  1. 앱의 대시보드에서 클라우드 코드 > 함수로 이동합니다.
  2. JavaScript 코드를 붙여넣습니다.
  3. 클릭 배포.
Document image


Flutter에서 클라우드 코드 호출하기

Dart


이 안전한 접근 방식은 민감한 로직이 서버에 남아 있도록 보장하며, Flutter 앱은 단순히 요청을 보냅니다.

5단계 – 인증 구성

사용자 인증 활성화

Back4app은 사용자 가입 및 로그인을 처리하기 위해 Parse.User 클래스를 사용합니다. 기본적으로 Parse는 비밀번호 해싱, 세션 토큰 및 안전한 저장을 처리합니다.

Dart


소셜 로그인

Back4app은 Google, Apple, Facebook 등과의 통합을 지원합니다. 각 제공자는 특정 접근 방식을 가지고 있으며 추가 라이브러리(예: Facebook 또는 Google 로그인용)가 필요할 수 있습니다. 그런 다음 다음을 호출할 수 있습니다:

Dart


제공자의 문서에 따라 매개변수를 조정하십시오.

6단계 – 파일 저장 처리

파일 저장 설정

이미지, 문서 또는 기타 미디어 파일을 ParseFile을(를) 사용하여 저장할 수 있습니다. Back4app은 이러한 파일을 안전하게 보호하고 검색을 위한 URL을 제공합니다.

Dart


보안 고려사항

파일 수준 보안과 ACL을 결합하여 파일에 대한 접근 권한(공개, 인증된 사용자 또는 제한된 사용자)을 정의할 수 있습니다. 이를 통해 파일 데이터가 안전하게 유지됩니다.

7단계 – 이메일 확인 및 비밀번호 재설정

왜 중요한가

이메일 확인은 사용자가 제공한 이메일 주소의 소유권을 확인하며, 비밀번호 재설정 흐름은 사용자 경험과 보안을 향상시킵니다.

대시보드 구성

  1. 앱의 Email Settings으로 이동하세요.
  2. Email VerificationPassword Reset을 활성화하세요.
  3. 필요한 경우 이메일 템플릿이나 사용자 정의 도메인을 구성하세요.

이 설정은 Flutter 앱이 사용자 소유권 확인 및 비밀번호 복구를 자동으로 처리할 수 있도록 합니다.

Flutter에서의 구현

Dart


8단계 – 클라우드 작업으로 작업 예약하기

클라우드 작업

정기적인 작업(예: 오래된 데이터 정리 또는 주기적인 이메일 전송)을 예약하고 싶을 수 있습니다. 클라우드 작업을 통해 이를 수행할 수 있습니다:

JS


이 코드를 배포한 후, 앱 설정 > 서버 설정 > 백그라운드 작업으로 이동하여 예약하세요.

클라우드 작업 예약
클라우드 작업 예약


9단계 – 웹훅 통합

웹훅이란 무엇인가요?

웹훅은 특정 이벤트가 발생할 때(예: 새 객체 저장) Back4app 앱이 외부 서비스에 HTTP 요청을 보낼 수 있게 해줍니다. 이는 서드파티 도구와 통합하는 데 이상적입니다.

  1. Back4app 대시보드에서 더보기 > 웹훅으로 이동하여 웹훅 추가.
  2. 엔드포인트와 트리거를 설정하세요(예: “Todo에 새 레코드”).
웹훅 추가
웹훅 추가


Cloud Code에서 beforeSave 또는 afterSave 트리거를 사용하여 HTTP 요청을 만들어 웹훅을 수동으로 구성할 수도 있습니다.

BeforeSave WebHook
BeforeSave WebHook


10단계 – Back4App 관리 패널 탐색

어디서 찾을 수 있나요

Back4app Admin App”은 비기술 팀원이 Parse 대시보드를 열지 않고도 데이터(CRUD 작업, 데이터 작업 등)를 관리할 수 있는 사용자 친화적인 인터페이스입니다.

  1. 앱 대시보드 > 더보기 > 관리 앱”으로 이동합니다.
  2. 관리 앱 활성화”을 클릭합니다.
관리 앱 활성화
관리 앱 활성화


관리 사용자를 생성하고, 하위 도메인을 선택하고, 새로 생성된 자격 증명으로 로그인합니다. 관리 앱은 빠른 데이터 검토 및 수정을 도와줍니다.

결론

이 튜토리얼에서는 Flutter용 백엔드를 구축하는 방법을 배웠습니다.

클래스를 생성하고, 데이터를 저장하고, 실시간 쿼리를 구성하고, ACL 및 CLP로 보안을 적용하고, 클라우드 기능을 작성하고, 작업을 예약하고, 웹훅을 통합하고, Back4app 관리 패널을 탐색했습니다.

이 접근 방식은 복잡한 서버 구성보다 Flutter 클라이언트 측에 집중할 수 있게 하여 개발을 가속화합니다.

현재 가지고 있는 최종 문자열은 RESTful API, 사용자 인증 및 쉬운 데이터 조작을 활용하는 기능적이고 안전한 백엔드입니다.

추가 클라우드 기능, 외부 API 호출 또는 사용자 정의 역할과 같은 더 고급 기능을 언제든지 통합할 수 있습니다.

다음 단계

  • 프로덕션 준비 완료: 고급 캐싱, 분석 또는 역할 기반 액세스 제어를 구현합니다.
  • 앱 확장: 타사 서비스를 통합하거나 전문 비즈니스 로직을 위한 더 많은 클라우드 기능을 구축합니다.
  • Back4app 문서 참조: 고급 보안, 성능 조정, 로그 분석 등을 탐색합니다.
  • 더 배우기: 라이브 채팅 앱, 위치 기반 서비스 또는 더 복잡한 데이터 구조에 대한 튜토리얼을 확인하세요. 이를 Flutter 프로젝트와 결합하여 실제 사용 사례를 만드세요.

이 설정을 계속 다듬어 나가면 Flutter 앱을 강력하고 확장 가능한 솔루션으로 변환할 수 있습니다. 튼튼한 백엔드 서비스 위에 구축됩니다. 즐거운 코딩 되세요!