당신의 React Native Expo 프로젝트를 미리 만들어진 템플릿을 사용하여 시작하세요

소개 이 섹션에서는 react native 를 사용하여 expo 템플릿으로 시작하는 방법과 back4app에 연결하는 방법을 4단계로 배울 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 백엔드 앱 참고 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 npm 또는 yarn 이 시스템에 설치되어 있어야 합니다 다음 가이드를 따라 expo cli를 설치하세요 이 가이드 1 템플릿 가져오기 템플릿 프로젝트를 가져오려면, 소스 코드를 다운로드하고 압축을 푼 후 github 저장소 에 저장하세요 다음 명령어를 실행하여 curl을 사용해 템플릿을 다운로드하고 추출하세요 또는 다음 명령어를 실행하여 git을 사용해 템플릿을 클론하세요 2 앱의 의존성 다운로드 시스템에 npm npm 또는 yarn yarn 이 설치되어 있는지 확인하세요 npm 설치하기 또는 yarn 설치하기 가이드를 참조하여 더 많은 정보를 얻으세요 2\ 터미널에서 cd react native template master cd react native template master 를 실행하고 프로젝트의 루트 디렉토리를 엽니다 3\ npm install npm install 을 실행하여 의존성을 설치합니다 이 튜토리얼에서는 npm 을 사용하여 의존성을 관리하지만 yarn 을 대신 사용할 수도 있습니다 3 앱의 자격 증명 설정 앱이 back4app 서버에 안전하게 연결할 수 있도록 하려면 parse javascript sdk에 앱의 자격 증명을 제공해야 합니다 다음 위치에서 앱 id 앱 id 및 자바스크립트 키 자바스크립트 키 자격 증명을 찾으세요 대시보드 대시보드 > 앱 설정 앱 설정 > 보안 및 키 보안 및 키 프로젝트의 루트 디렉토리에서 다음 파일을 엽니다 app/(tabs)/index tsx app/(tabs)/index tsx 파일은 다음과 같아야 합니다 index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; 당신의 앱 id 앱 id 및 자바스크립트 키 자바스크립트 키 를 복사하여 붙여넣으세요 4 연결 테스트 템플릿 프로젝트의 app js app js 안에는 person 객체를 생성하는 함수와 app의 people을 back4app 데이터베이스로 가져오는 함수가 있습니다 index tsx // 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); } } 앱 연결을 실행하고 테스트하려면 프로젝트의 터미널을 엽니다 다음 명령어를 실행합니다 npm run android npm run android 또는 npm run ios npm run ios 또는 npm run start npm run start 를 실행하여 대상 플랫폼에서 애플리케이션을 엽니다 완료되었습니다! 이 시점에서 back4app에 연결된 react native 애플리케이션을 실행하는 방법을 배웠습니다