당신의 React Native Expo 프로젝트를 미리 만들어진 템플릿을 사용하여 시작하세요
9 분
소개
이 섹션에서는 React Native를 사용하여 Expo 템플릿으로 시작하는 방법과 Back4App에 연결하는 방법을 4단계로 배울 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Back4App 백엔드 앱.
1 - 템플릿 가져오기
템플릿 프로젝트를 가져오려면, 소스 코드를 다운로드하고 압축을 푼 후 GitHub 저장소에 저장하세요.
다음 명령어를 실행하여 CURL을 사용해 템플릿을 다운로드하고 추출하세요:
curl -LOk https://github.com/templates-back4app/react-native-template/archive/master.zip && unzip master.zip
또는
다음 명령어를 실행하여 GIT을 사용해 템플릿을 클론하세요:
git clone https://github.com/templates-back4app/react-native-template
2 - 앱의 의존성 다운로드
- 시스템에 npm 또는 yarn이 설치되어 있는지 확인하세요.
2. 터미널에서 cd react-native-template-master를 실행하고 프로젝트의 루트 디렉토리를 엽니다.
3. npm install을 실행하여 의존성을 설치합니다.
이 튜토리얼에서는 npm을 사용하여 의존성을 관리하지만 yarn을 대신 사용할 수도 있습니다.
3 - 앱의 자격 증명 설정
앱이 Back4App 서버에 안전하게 연결할 수 있도록 하려면 Parse JavaScript SDK에 앱의 자격 증명을 제공해야 합니다.
- 다음 위치에서 앱 ID 및 자바스크립트 키 자격 증명을 찾으세요. 대시보드 > 앱 설정 > 보안 및 키.
프로젝트의 루트 디렉토리에서 다음 파일을 엽니다: app/(tabs)/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 및 자바스크립트 키를 복사하여 붙여넣으세요.
4 - 연결 테스트
템플릿 프로젝트의 App.js 안에는 Person 객체를 생성하는 함수와 App의 People을 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);
}
}앱 연결을 실행하고 테스트하려면:
- 프로젝트의 터미널을 엽니다.
- 다음 명령어를 실행합니다: npm run android 또는 npm run ios 또는 npm run start를 실행하여 대상 플랫폼에서 애플리케이션을 엽니다.

완료되었습니다!
이 시점에서 Back4app에 연결된 React Native 애플리케이션을 실행하는 방법을 배웠습니다.