How to Build a Backend for React Native?

소개 이 튜토리얼에서는 react native의 백엔드를 구축하는 방법 을 배울 것입니다 우리는 크로스 플랫폼 호환성에 중점을 두고 데이터 관리, 사용자 인증 및 실시간 데이터에 대한 필수 back4app 기능을 통합하는 방법을 설명할 것입니다 rest 및 graphql api를 활용하여 ios 및 android 플랫폼 모두에서 실행되는 react native 프로젝트를 개발할 수 있으며, 네이티브 구성 요소와 모바일 애플리케이션 간의 원활한 경험을 보장합니다 안전한 사용자 로그인 구현, 작업 예약 및 실시간 애플리케이션 사용은 전체 스택 개발자 여정을 더 쉽게 만들어 줄 것입니다 또한 back4app의 환경이 호스팅, 데이터베이스 및 보안 계층을 포함한 서비스 설정에 필요한 시간을 줄일 수 있는 방법을 알게 될 것입니다 마지막에는 react native 앱을 지원하고 대규모 모바일 솔루션 구축을 위한 길을 열어주는 강력한 백엔드 구조를 갖추게 될 것입니다 이 가이드를 완료한 후에는 고급 기능으로 앱을 확장하거나, 타사 서비스를 통합하거나, 프로젝트를 프로덕션 준비 플랫폼으로 전환할 준비가 될 것입니다 back4app과 react native를 사용하여 현대 모바일 앱 개발에 뛰어들어 보겠습니다! 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정과 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으면 무료로 가입하세요 그런 다음 가이드를 따라 프로젝트를 준비하세요 기본 react native 개발 환경 을 사용하여 react native cli 빠른 시작 https //reactnative dev/docs/environment setup 또는 expo cli https //docs expo dev/get started/installation/ node js가 설치되어 있는지 확인하세요 node js (버전 14 이상) 설치 npm 패키지를 설치하고 로컬 개발 서버를 실행하려면 node js가 필요합니다 node js 설치하기 https //nodejs org/en/download/ javascript 및 기본 react native 개념에 대한 이해 react native 공식 문서 https //reactnative dev/ react native 개발이 처음이라면 문서나 초보자 튜토리얼을 먼저 검토하세요 시작하기 전에 이러한 전제 조건이 준비되어 있는지 확인하세요 back4app 프로젝트를 생성하고 로컬 react native 환경을 구성하면 원활한 프로세스를 보장할 수 있습니다 1단계 – back4app에서 새 프로젝트 만들기 및 연결하기 새 프로젝트 만들기 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과 안전하게 통신할 수 있도록 보장합니다 2단계 – 데이터베이스 설정 back4app은 react native 앱을 위한 다양한 백엔드 옵션을 제공하며, 강력한 데이터 관리 기능을 포함하고 있습니다 대시보드를 통해 클래스를 생성하고, 필드를 추가하며, 관계를 정의할 수 있습니다 실시간 애플리케이션을 구축하든 간단한 crud 앱을 만들든, back4app 대시보드는 데이터를 쉽게 저장하고 구성하는 데 도움을 줍니다 데이터 모델 만들기 “데이터베이스” 섹션으로 이동하세요 back4app 대시보드에서 새 클래스를 생성하세요 (예 “todo”) 그리고 title (문자열) 및 iscompleted (부울)과 같은 관련 열을 추가하세요 back4app은 다양한 데이터 유형을 지원합니다 문자열 , 숫자 , 부울 , 객체 , 날짜 , 파일 , 포인터 , 배열 , 관계 , 지오포인트 , 및 다각형 또한 새로운 데이터를 보낼 때 parse가 자동으로 필드를 생성하도록 할 수 있습니다 ai 에이전트를 사용한 데이터 모델 만들기 원하신다면 back4app ai 에이전트를 사용할 수 있습니다 ai 에이전트 열기 당신의 앱 대시보드에서 데이터 모델 설명하기 간단한 언어로 (예 “제목과 iscompleted 필드가 있는 todo 클래스를 만드세요 ”) ai 에이전트에게 스키마 생성하기 당신을 위해 이것은 react native 프로젝트의 초기 단계에서 시간을 절약할 수 있습니다 rest api를 사용한 데이터 읽기 및 쓰기 일반적인 react native 개발을 위해, 네이티브 fetch api 또는 axios 와 같은 서드파티 라이브러리를 사용하여 rest api를 처리할 수 있습니다 아래는 curl을 사용한 예시로, fetch 에 맞게 조정할 수 있습니다 post (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 get (todos 가져오기) 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 react native 앱에서 fetch 를 사용하여 동일한 작업을 수행할 수 있습니다 async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } graphql api를 사용한 데이터 읽기 및 쓰기 graphql을 선호하는 경우, back4app은 graphql 엔드포인트를 제공합니다 아래는 새 레코드를 생성하기 위한 예제 뮤테이션입니다 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } graphql 쿼리는 apollo client 와 같은 라이브러리나 간단한 fetch 호출을 사용하여 실행할 수 있습니다 async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } 실시간 쿼리 작업하기 (선택 사항) 실시간 데이터의 경우, back4app은 실시간 쿼리를 제공하지만 일반적으로 parse sdk가 필요합니다 이 튜토리얼에서는 rest 호출에 중점을 두고 있으므로, 나중에 사용할 계획이 있다면 앱의 서버 설정에서 실시간 쿼리를 활성화할 수 있습니다 실시간 데이터는 리액트 네이티브 앱에서 사용자를 즉시 업데이트하는 데 도움이 될 수 있습니다 더 간단한 접근 방식으로는 자신의 간격으로 서버를 폴링하거나 서드파티 도구에 의존할 수 있습니다 3단계 – acl 및 clp로 보안 적용하기 간략한 개요 back4app은 acls (액세스 제어 목록) 및 clps (클래스 수준 권한) ,으로 백엔드를 보호합니다 이를 통해 객체 및 클래스 수준에서 데이터를 보호할 수 있습니다 이는 프로덕션 등급 모바일 앱 개발에서 안전한 사용자 권한을 구현하는 데 필수적입니다 단계별 클래스 수준 권한 (clps) 앱의 데이터베이스 섹션으로 가서, 어떤 클래스를 열고 “보안 및 권한”으로 전환합니다 다양한 사용자 역할 또는 공개 액세스를 위한 읽기/쓰기 권한을 조정합니다 acls rest 요청에 acl 필드를 포함하여 객체별 액세스 제어를 적용할 수 있습니다 예를 들어 자세한 내용은 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 확인하세요 4단계 – 클라우드 코드 함수 작성 클라우드 코드의 이유 클라우드 코드는 유효성 검사, 트리거 및 외부 api 호출 처리와 같은 작업을 위해 back4app에서 서버 측 스크립트를 실행할 수 있게 해줍니다 이는 클라이언트에서 숨겨져야 하는 논리를 제어할 수 있도록 도와주며, react native 프로젝트의 보안을 향상시킵니다 예제 함수 다음은 서버 측의 main js 에 작성할 예제입니다 rest를 통해 react native 앱에서 호출할 수 있습니다 // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); 배포 back4app cli cli를 설치하고, 계정 키를 구성한 후 b4a deploy 를 실행하세요 대시보드 또한 cloud code > functions , 에 가서 코드를 main js , 에 붙여넣고 배포 를 클릭할 수 있습니다 함수 호출하기 (rest를 통해) react native 앱에서 rest api를 직접 사용하세요 async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } 이 유연성은 비즈니스 로직을 통합할 수 있게 해주어, 클라이언트에 민감한 세부정보를 노출하지 않고도 더 효율적인 풀스택 개발자가 될 수 있게 합니다 5단계 – 인증 구성하기 사용자 인증 활성화 또는 설정 back4app은 parse user 클래스를 사용하여 사용자 인증을 관리합니다 react native에서 parse sdk를 사용하지 않더라도 직접 http 요청을 사용하여 등록, 로그인 또는 로그아웃할 수 있습니다 사용자 등록 (rest) 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" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users 로그인 (rest) 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=secretpassword' \\ https //parseapi back4app com/login 이 요청은 사용자 세션을 관리하기 위해 react native 앱에 저장할 수 있는 세션 토큰을 반환합니다 이는 당신이 하는 각 요청이 인증될 수 있도록 보장하여 안전한 모바일 경험을 구축합니다 소셜 로그인 back4app는 전문화된 흐름을 통해 소셜 로그인을 지원합니다 (google, facebook, apple) oauth 앱을 구성하려면 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 를 따라야 하며, 적절한 토큰을 back4app에 전송해야 합니다 6단계 – 파일 저장 처리 파일 저장 설정 back4app는 react native 앱을 위한 파일을 저장할 수 있습니다 파일을 객체에 첨부하거나 직접 업로드할 수 있습니다 rest를 사용하고 있으므로, 아래는 파일을 업로드하는 예시입니다 (base64 인코딩) 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 file png' \\ https //parseapi back4app com/files/image png 응답은 데이터베이스에 저장할 수 있는 url을 반환합니다 react native 앱에서 fetch 를 사용하여 파일을 blob 또는 폼 데이터로 전송할 수 있습니다 보안 고려사항 무단 업로드를 방지하기 위해, fileupload 옵션을 parse server 설정 에서 구성해야 합니다 예를 들어, 인증된 사용자만 업로드를 허용할 수 있습니다 이는 파일 저장을 포함한 서비스가 보호되도록 보장합니다 7단계 – 이메일 확인 및 비밀번호 재설정 개요 이메일 소유권 확인은 안전한 사용자 흐름을 구현하는 데 핵심입니다 back4app는 이메일 확인 및 비밀번호 재설정을 위한 내장 도구를 제공합니다 back4app 대시보드 구성 앱 설정 열기 이메일 설정에서 이메일 확인 활성화 비밀번호 재설정 및 확인 메시지의 템플릿 사용자 정의 코드/구현 비밀번호를 잊어버린 사용자는 재설정 요청을 트리거할 수 있습니다 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 '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4app은 사용자에게 비밀번호 재설정 이메일을 보냅니다 이 편리함은 react native 앱에서 별도의 메일 서버를 설정하는 수고를 덜어줍니다 8단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업의 기능 클라우드 작업은 데이터 정리 또는 일일 보고서 전송과 같은 반복 작업을 자동화하는 데 도움을 줍니다 아래는 main js 의 예제 작업입니다 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); 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); 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); } }); 이 코드를 배포한 후, 서버 설정 > 백그라운드 작업 으로 가서 예약하세요 이렇게 하면 수동 개입 없이 ios 및 android 플랫폼에서 데이터를 신선하게 유지할 수 있습니다 9단계 – 웹훅 통합 정의 웹훅은 백엔드가 이벤트가 발생할 때 외부 서비스에 알릴 수 있도록 합니다 예를 들어, 새로운 todo를 생성할 때 slack이나 결제 게이트웨이에 알릴 수 있습니다 구성 back4app 대시보드에서 더보기 > 웹훅 으로 이동합니다 원하는 외부 엔드포인트를 가리키는 새 웹훅 추가 react native 앱 데이터 변경 시 웹훅을 트리거할 조건을 설정합니다 cloud code 트리거 내에서 웹훅을 코딩할 수도 있으며, 이를 통해 http 요청을 게시하거나 서드파티 api와 통합할 수 있습니다 이는 백엔드 기능을 다양한 외부 서비스로 확장합니다 10단계 – back4app 관리 패널 탐색 어디에서 찾을 수 있나요? “ back4app 관리 패널 ”은 비기술적인 개인이 데이터를 관리할 수 있는 사용자 친화적인 인터페이스입니다 제품 소유자, 클라이언트 대표 또는 데이터 모델에 직접 접근해야 하는 지원 직원에게 특히 유용합니다 기능 관리 앱 활성화 을 위해 앱 대시보드 > 더보기 > 관리 앱 으로 가세요 관리 사용자 생성 (사용자 이름/비밀번호) 하위 도메인 선택 으로 빠르고 코드 없는 데이터베이스 접근을 제공합니다 로그인 후, 사용자 또는 팀은 코드를 작성하지 않고도 기록을 보고, 편집하거나 삭제할 수 있습니다 이 접근 방식은 더 빠른 데이터 관리와 협업을 지원합니다 결론 이 가이드에서는 react native 애플리케이션을 위해 back4app을 사용하여 백엔드를 구축하는 방법을 배웠습니다 여기에는 다음이 포함됩니다 react native 앱을 위한 안전한 백엔드를 생성하고 크로스 플랫폼 호환성을 구현합니다 rest 및 graphql api를 사용하여 데이터 관리를 설정합니다 민감한 데이터를 보호하기 위해 acl 및 clp를 구성합니다 서버 측 논리를 위한 클라우드 코드를 작성합니다 사용자 인증 및 이메일 확인을 처리합니다 직접 업로드를 통해 파일 저장소를 관리합니다 클라우드 작업으로 백그라운드 작업을 예약합니다 웹훅을 사용하여 외부 서비스를 통합합니다 쉬운 데이터베이스 관리를 위해 back4app 관리 패널을 탐색합니다 이 도구와 기능을 통해 귀하의 react native 프로젝트는 신뢰할 수 있고 확장 가능한 풀 스택 솔루션으로 성장할 수 있습니다 이제 실시간 데이터, 사용자 보안 및 모바일 애플리케이션의 다른 중요한 측면을 처리할 수 있는 준비가 되었습니다 back4app 문서 https //www back4app com/docs/ 를 계속 탐색하여 기술을 다듬고 ios 및 android 플랫폼에서 강력한 모바일 경험을 만드세요 다음 단계 react native 앱 강화 고급 보안 및 역할 기반 접근 제어로 실시간 업데이트 실험 실시간 애플리케이션을 위한 라이브 쿼리를 사용하여 (필요한 경우) 외부 api 통합 결제 게이트웨이나 소셜 로그인 등을 포함한 서비스 성능 향상 캐싱 또는 클라우드 기능 최적화를 통해 더 깊이 파고들기 back4app의 공식 문서 https //www back4app com/docs/ 를 통해 추가 기능을 잠금 해제하세요