Quickstart

소개 이 가이드는 새로운 프로젝트 또는 기존 프로젝트에서 back4app을 설정하고 사용하는 데 도움을 줄 것입니다 react native cli 를 사용합니다 parse sdk , 앱 키로 초기화하고, back4app에서 데이터를 저장하고 검색하기 위한 첫 번째 api 호출을 생성합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 앱 생성 이 필요합니다 npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm 또는 yarn이 설치되어 있어야 합니다 npx https //www npmjs com/package/npx 패키지 러너가 설치되어 있어야 합니다 1 react native 프로젝트 생성 react native 프로젝트를 생성하는 주요 방법은 두 가지입니다 react native cli 와 expo 개발 환경과 대상 플랫폼(ios 또는 android)에 따라 선택하세요 리액트 네이티브 cli 지침은 개발 운영 체제와 ios 또는 android용 개발을 시작할 것인지에 따라 다릅니다 자세한 내용은 공식 문서를 확인하세요 여기 엑스포 엑스포 cli를 전역에 설치합니다 새로운 리액트 네이티브 프로젝트를 생성합니다 2 의존성 설치 리액트 네이티브 프로젝트에서 parse javascript sdk 및 asyncstorage 를 설치하려면 다음을 실행하세요 parse javascript sdk back4app 서버와 앱을 통합하기 위해 리액트 네이티브 async storage parse sdk를 사용하려면 asyncstorage 핸들러가 필요합니다 ios의 경우, 네이티브 asyncstorage 지원도 추가하세요 3 앱 키 가져오기 back4app에서 앱을 만든 후, 앱 설정 > 보안 및 키 아래에서 앱 키를 찾으세요 연결하려면 애플리케이션 id 와 javascript key 가 필요합니다 4 parse 초기화 및 back4app에 연결 index tsx 를 열고 애플리케이션 id 와 javascript key 로 parse를 초기화하세요 index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 데이터 저장 및 검색 parse가 초기화되면, index tsx 에 두 개의 함수를 만들어 back4app에서 데이터를 저장하고 가져오세요 // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } 6 앱 테스트 프로젝트의 터미널을 엽니다 프로젝트를 실행합니다 리액트 네이티브 cli 다음 명령어를 실행합니다 npx react native run android npx react native run android 또는 npx react native run ios npx react native run ios 를 사용하여 대상 플랫폼에서 애플리케이션을 엽니다 엑스포 다음 명령어를 실행합니다 expo start expo start , 그리고 브라우저나 장치에서 앱을 보려면 지침을 따릅니다 문제 해결 일반적인 문제와 해결책 메트로에서 오류가 발생했습니다 모듈 “idb keyval”을 파일에서 해결하는 중 해결책 metro conf js metro conf js 파일로 가서 다음과 같이 변경합니다 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; 모듈 ‘eventemitter’를 해결할 수 없습니다 해결책 파일로 가세요 node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js 이 줄을 변경합니다 다음과 같이 변경합니다 같은 파일에서 eventemitter js eventemitter js , 다음 행을 변경하세요 이것으로 바벨 문제 바벨에서 문제가 발생하는 경우, 다음과 같이 babel config js 를 업데이트하는 것을 고려하세요 다음 단계 이 가이드는 back4app을 사용한 기본 설정 및 데이터 저장을 다룹니다 데이터 저장, 실시간 기능, 로컬 데이터 저장, 클라우드 함수, 인증 및 파일 저장을 포함한 parse 기능을 탐색하세요