리액트 네이티브를 위한 백엔드 구축 방법?
이 튜토리얼에서는 React Native의 백엔드를 구축하는 방법을 배우게 됩니다.
우리는 크로스 플랫폼 호환성에 중점을 두고 데이터 관리, 사용자 인증 및 실시간 데이터에 대한 필수 Back4App 기능을 통합하는 방법을 설명할 것입니다.
REST 및 GraphQL API를 활용하여 iOS 및 Android 플랫폼 모두에서 실행되는 React Native 프로젝트를 개발할 수 있으며, 네이티브 구성 요소와 모바일 애플리케이션 간의 원활한 경험을 보장합니다.
안전한 사용자 로그인 구현, 작업 예약 및 실시간 애플리케이션 사용은 전체 스택 개발자 여정을 더 쉽게 만들어 줄 것입니다.
또한 Back4App의 환경이 호스팅, 데이터베이스 및 보안 계층을 포함한 서비스 설정에 필요한 시간을 줄일 수 있는 방법을 알게 될 것입니다.
마지막에는 React Native 앱을 지원하고 대규모 모바일 솔루션 구축을 위한 길을 열어주는 강력한 백엔드 구조를 갖추게 될 것입니다.
이 가이드를 완료한 후에는 고급 기능으로 앱을 확장하거나, 타사 서비스를 통합하거나, 프로젝트를 프로덕션 준비 플랫폼으로 전환할 준비가 되어 있을 것입니다.
Back4App과 React Native를 사용하여 현대 모바일 앱 개발에 뛰어들어 보겠습니다!
이 튜토리얼을 완료하려면 다음이 필요합니다:
- JavaScript 및 기본 React Native 개념에 대한 이해 React Native 공식 문서. React Native 개발이 처음이라면 문서나 초보자 튜토리얼을 먼저 검토하세요.
시작하기 전에 이러한 전제 조건이 준비되어 있는지 확인하세요. Back4App 프로젝트를 생성하고 로컬 React Native 환경을 구성하면 원활한 프로세스를 보장할 수 있습니다.
React Native 앱을 위한 모바일 백엔드를 구축하는 첫 번째 단계는 Back4App에서 새 프로젝트를 만드는 것입니다. 다음 단계를 따르세요:
- Back4App 계정에 로그인하세요.
- Back4App 대시보드에서 “새 앱” 버튼을 클릭하세요.
- 앱 이름을 지정하세요 (예: “ReactNative-Backend-Tutorial”).
프로젝트가 생성되면 Back4App 대시보드에 나타납니다. 이 새로운 프로젝트를 사용하여 React Native 앱의 데이터를 관리하고 보안을 구성합니다.
웹 기반 React 앱과 달리, React Native 개발은 종종 데이터 검색 및 조작을 위한 직접 HTTP 요청을 필요로 합니다. 우리는 REST API (또는 GraphQL API)에 집중하고 있으므로, 인증된 요청을 보내기 위해 Back4App 키가 여전히 필요합니다.
- Parse 키 가져오기: Back4App 대시보드에서 앱의 앱 설정 또는 보안 및 키 섹션을 열어 애플리케이션 ID, REST API 키, 및 GraphQL 엔드포인트 (보통 https://parseapi.back4app.com/graphql)를 찾습니다.
- REST API 키 기록하기: React Native fetch 또는 axios 헤더에 포함시켜 각 요청을 인증합니다.
이 단계는 모바일 애플리케이션이 Back4App과 안전하게 통신할 수 있도록 보장합니다.
Back4App은 React Native 앱을 위한 다양한 백엔드 옵션을 제공하며, 강력한 데이터 관리 기능을 포함하고 있습니다. 대시보드를 통해 클래스를 생성하고, 필드를 추가하며, 관계를 정의할 수 있습니다. 실시간 애플리케이션을 구축하든 간단한 CRUD 앱을 만들든, Back4App 대시보드는 데이터를 쉽게 저장하고 구성하는 데 도움을 줍니다.
- “데이터베이스” 섹션으로 이동하세요 Back4App 대시보드에서.
- 새 클래스를 생성하세요 (예: “Todo”) 그리고 title (문자열) 및 isCompleted (부울)과 같은 관련 열을 추가하세요.
Back4App은 다양한 데이터 유형을 지원합니다: 문자열, 숫자, 부울, 객체, 날짜, 파일, 포인터, 배열, 관계, 지오포인트, 및 다각형. 또한 새로운 데이터를 보낼 때 Parse가 자동으로 필드를 생성하도록 할 수 있습니다.
원하신다면 Back4App AI 에이전트를 사용할 수 있습니다:
- AI 에이전트 열기 당신의 앱 대시보드에서.
- 데이터 모델 설명하기 간단한 언어로 (예: “제목과 isCompleted 필드가 있는 Todo 클래스를 만드세요.”).
- AI 에이전트에게 스키마 생성하기 당신을 위해.
이것은 React Native 프로젝트의 초기 단계에서 시간을 절약할 수 있습니다.
일반적인 React Native 개발을 위해, 네이티브 fetch API 또는 axios와 같은 서드파티 라이브러리를 사용하여 REST API를 처리할 수 있습니다. 아래는 cURL을 사용한 예시로, fetch에 맞게 조정할 수 있습니다.
POST (Todo 생성):
GET (Todos 가져오기):
React Native 앱에서 fetch를 사용하여 동일한 작업을 수행할 수 있습니다:
GraphQL을 선호하는 경우, Back4App은 GraphQL 엔드포인트를 제공합니다. 아래는 새 레코드를 생성하기 위한 예제 뮤테이션입니다:
GraphQL 쿼리는 apollo-client와 같은 라이브러리나 간단한 fetch 호출을 사용하여 실행할 수 있습니다:
실시간 데이터의 경우, Back4App은 Live Queries를 제공하지만 일반적으로 Parse SDK가 필요합니다. 이 튜토리얼에서는 REST 호출에 중점을 두고 있으므로, 나중에 사용할 계획이 있다면 앱의 서버 설정에서 Live Queries를 활성화할 수 있습니다. 실시간 데이터는 React Native 앱에서 사용자를 즉시 업데이트하는 데 도움이 될 수 있습니다. 더 간단한 접근 방식으로는 자신의 간격으로 서버를 폴링하거나 서드파티 도구에 의존할 수 있습니다.
Back4App은 ACLs (액세스 제어 목록) 및 CLPs (클래스 수준 권한),으로 백엔드를 보호합니다. 이를 통해 객체 및 클래스 수준에서 데이터를 보호할 수 있습니다. 이는 프로덕션 등급 모바일 앱 개발에서 안전한 사용자 권한을 구현하는 데 필수적입니다.
- 클래스 수준 권한 (CLPs): 앱의 데이터베이스 섹션으로 가서, 어떤 클래스를 열고 “보안 및 권한”으로 전환합니다. 다양한 사용자 역할 또는 공개 액세스를 위한 읽기/쓰기 권한을 조정합니다.
- ACLs: REST 요청에 _ACL 필드를 포함하여 객체별 액세스 제어를 적용할 수 있습니다. 예를 들어:
자세한 내용은 앱 보안 가이드라인을 확인하세요.
클라우드 코드는 유효성 검사, 트리거 및 외부 API 호출 처리와 같은 작업을 위해 Back4App에서 서버 측 스크립트를 실행할 수 있게 해줍니다. 이는 클라이언트에게 숨겨져야 하는 로직을 제어할 수 있도록 도와주며, React Native 프로젝트의 보안을 향상시킵니다.
아래는 서버 측의 main.js에 작성할 예제입니다. React Native 앱에서 REST를 통해 호출할 수 있습니다:
- Back4app CLI: CLI를 설치하고, 계정 키를 구성한 후 b4a deploy를 실행하세요.
- 대시보드: 또한 Cloud Code > Functions,에 가서 코드를 main.js,에 붙여넣고 배포를 클릭하세요.
React Native 앱에서 REST API를 직접 사용하세요:
이 유연성은 비즈니스 로직을 통합할 수 있게 하여 클라이언트에 민감한 세부정보를 노출하지 않고도 더 효율적인 풀스택 개발자가 되도록 합니다.
Back4App은 Parse User 클래스를 사용하여 사용자 인증을 관리합니다. React Native에서 Parse SDK를 사용하지 않더라도 직접 HTTP 요청을 사용하여 등록, 로그인 또는 로그아웃할 수 있습니다.
사용자 등록 (REST):
로그인 (REST):
이 요청은 사용자 세션을 관리하기 위해 React Native 앱에 저장할 수 있는 세션 토큰을 반환합니다. 이는 당신이 하는 각 요청이 인증될 수 있도록 보장하여 안전한 모바일 경험을 구축합니다.
Back4App는 전문화된 흐름을 통해 소셜 로그인을 지원합니다 (Google, Facebook, Apple). OAuth 앱을 구성하려면 소셜 로그인 문서를 따라야 하며, 적절한 토큰을 Back4App에 전송해야 합니다.
Back4App는 React Native 앱을 위한 파일을 저장할 수 있습니다. 파일을 객체에 첨부하거나 직접 업로드할 수 있습니다. REST를 사용하고 있으므로, 아래는 파일을 업로드하는 예시입니다 (Base64 인코딩):
응답은 데이터베이스에 저장할 수 있는 URL을 반환합니다. React Native 앱에서 fetch를 사용하여 파일을 blob 또는 폼 데이터로 전송할 수 있습니다.
무단 업로드를 방지하기 위해, fileUpload 옵션을 Parse Server 설정에서 구성하십시오. 예를 들어, 인증된 사용자만 업로드를 허용할 수 있습니다. 이는 파일 저장을 포함한 서비스가 보호되도록 보장합니다.
이메일 소유권 확인은 안전한 사용자 흐름을 구현하는 데 핵심입니다. Back4App는 이메일 확인 및 비밀번호 재설정을 위한 내장 도구를 제공합니다.
- 앱 설정 열기.
- 이메일 설정에서 이메일 확인 활성화.
- 비밀번호 재설정 및 확인 메시지의 템플릿 사용자 정의.
비밀번호를 잊어버린 사용자는 재설정 요청을 트리거할 수 있습니다:
Back4App은 사용자에게 비밀번호 재설정 이메일을 보냅니다. 이 편리함은 React Native 앱에서 별도의 메일 서버를 설정하는 수고를 덜어줍니다.
클라우드 작업은 데이터 정리 또는 일일 보고서 전송과 같은 반복 작업을 자동화하는 데 도움을 줍니다. 아래는 main.js:의 예제 작업입니다.
이 코드를 배포한 후 서버 설정 > 백그라운드 작업으로 가서 예약하세요. 이렇게 하면 수동 개입 없이 iOS 및 Android 플랫폼에서 데이터를 신선하게 유지할 수 있습니다.
웹훅은 백엔드가 이벤트가 발생할 때 외부 서비스에 알릴 수 있도록 합니다. 예를 들어, 새로운 Todo를 생성할 때 Slack이나 결제 게이트웨이에 알릴 수 있습니다.
- Back4App 대시보드에서 더보기 > 웹훅으로 이동합니다.
- 원하는 외부 엔드포인트를 가리키는 새 웹훅 추가합니다.
- React Native 앱 데이터 변경 시 웹훅을 트리거할 조건을 설정합니다.
Cloud Code 트리거 내에서 웹훅을 코딩할 수도 있으며, 이를 통해 HTTP 요청을 게시하거나 서드파티 API와 통합할 수 있습니다. 이는 백엔드 기능을 다양한 외부 서비스로 확장합니다.
“Back4App 관리 패널”은 비기술적인 개인이 데이터를 관리할 수 있는 사용자 친화적인 인터페이스입니다. 제품 소유자, 클라이언트 대표 또는 데이터 모델에 직접 접근해야 하는 지원 직원에게 특히 유용합니다.
- 관리 앱 활성화을 위해 앱 대시보드 > 더보기 > 관리 앱으로 가세요.
- 관리 사용자 생성 (사용자 이름/비밀번호).
- 하위 도메인 선택으로 빠르고 코드 없는 데이터베이스 접근을 제공합니다.
로그인 후, 사용자나 팀은 코드를 작성하지 않고도 기록을 보고, 편집하거나 삭제할 수 있습니다. 이 접근 방식은 더 빠른 데이터 관리와 협업을 지원합니다.
이 가이드에서는 React Native 애플리케이션을 위해 Back4App을 사용하여 백엔드를 구축하는 방법을 배웠습니다. 여기에는 다음이 포함됩니다:
- React Native 앱을 위한 안전한 백엔드를 생성하고 크로스 플랫폼 호환성을 구현합니다.
- REST 및 GraphQL API를 사용하여 데이터 관리를 설정합니다.
- 민감한 데이터를 보호하기 위해 ACL 및 CLP를 구성합니다.
- 서버 측 논리를 위한 클라우드 코드를 작성합니다.
- 사용자 인증 및 이메일 확인을 처리합니다.
- 직접 업로드를 통해 파일 저장소를 관리합니다.
- 클라우드 작업으로 백그라운드 작업을 예약합니다.
- 웹훅을 사용하여 외부 서비스를 통합합니다.
- 쉬운 데이터베이스 관리를 위한 Back4App 관리 패널을 탐색합니다.
이 도구와 기능을 통해 귀하의 React Native 프로젝트는 신뢰할 수 있고 확장 가능한 풀 스택 솔루션으로 성장할 수 있습니다. 이제 실시간 데이터, 사용자 보안 및 모바일 애플리케이션의 다른 중요한 측면을 처리할 수 있는 준비가 되었습니다. Back4App 문서를 계속 탐색하여 기술을 다듬고 iOS 및 Android 플랫폼에서 강력한 모바일 경험을 만드세요.
- React Native 앱 강화 고급 보안 및 역할 기반 접근 제어로.
- 실시간 업데이트 실험 실시간 애플리케이션을 위한 라이브 쿼리를 사용하여 (필요한 경우).
- 외부 API 통합 결제 게이트웨이나 소셜 로그인 등을 포함한 서비스.
- 성능 향상 캐싱 또는 클라우드 기능 최적화를 통해.