---
title: 당신의 React Native Expo 프로젝트를 미리 만들어진 템플릿을 사용하여 시작하세요
slug: docs-kr/react-native/parse-sdk/react-native-template
description: Parse Server SDK를 React Native 앱에 연결하는 방법을 4단계로 알아봅니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T11:17:56.151Z
---
## 소개
이 섹션에서는 **React Native**를 사용하여 **Expo** 템플릿으로 시작하는 방법과 Back4App에 연결하는 방법을 4단계로 배울 것입니다.
## 전제 조건
:::hint{type="info"}
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Back4App 백엔드 앱.
- 참고: [새 Parse 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
- [NPM ](https://www.npmjs.com/get-npm?utm_source=house\&utm_medium=homepage\&utm_campaign=free%20orgs\&utm_term=Install%20npm) 또는 [YARN ](https://classic.yarnpkg.com/en/docs/install)이 시스템에 설치되어 있어야 합니다.
- 다음 가이드를 따라 Expo CLI를 설치하세요: [이 가이드](https://docs.expo.io/get-started/installation/?redirected).
:::
## 1 - 템플릿 가져오기
템플릿 프로젝트를 가져오려면, 소스 코드를 다운로드하고 압축을 푼 후 [GitHub 저장소](https://github.com/templates-back4app/react-native-template)에 저장하세요.
다음 명령어를 실행하여 CURL을 사용해 템플릿을 다운로드하고 추출하세요:
:::BlockQuote
curl -LOk https\://github.com/templates-back4app/react-native-template/archive/master.zip && unzip master.zip
:::
또는
다음 명령어를 실행하여 GIT을 사용해 템플릿을 클론하세요:
:::BlockQuote
git clone https\://github.com/templates-back4app/react-native-template
:::
## 2 - 앱의 의존성 다운로드
1. 시스템에 `npm` 또는 `yarn`이 설치되어 있는지 확인하세요.
:::hint{type="info"}
[npm 설치하기](https://docs.npmjs.com/getting-started) 또는 [yarn 설치하기](https://classic.yarnpkg.com/en/docs/install#windows-stable) 가이드를 참조하여 더 많은 정보를 얻으세요.
:::
2\. 터미널에서 `cd react-native-template-master`를 실행하고 프로젝트의 루트 디렉토리를 엽니다.
3\. `npm install`을 실행하여 의존성을 설치합니다.
이 튜토리얼에서는 *npm*을 사용하여 의존성을 관리하지만 *yarn*을 대신 사용할 수도 있습니다.
## 3 - 앱의 자격 증명 설정
앱이 Back4App 서버에 안전하게 연결할 수 있도록 하려면 Parse JavaScript SDK에 앱의 자격 증명을 제공해야 합니다.
1. 다음 위치에서 `앱 ID` 및 `자바스크립트 키` 자격 증명을 찾으세요. `대시보드` > `앱 설정` > `보안 및 키`.
프로젝트의 루트 디렉토리에서 다음 파일을 엽니다: `app/(tabs)/index.tsx`.
파일은 다음과 같아야 합니다:
:::CodeblockTabs
index.tsx
```typescript
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 데이터베이스로 가져오는 함수가 있습니다.
:::CodeblockTabs
index.tsx
```typescript
// 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);
}
}
```
:::
앱 연결을 실행하고 테스트하려면:
1. 프로젝트의 터미널을 엽니다.
2. 다음 명령어를 실행합니다: `npm run android` 또는 `npm run ios` 또는 `npm run start`를 실행하여 대상 플랫폼에서 애플리케이션을 엽니다.
## 완료되었습니다!
이 시점에서 Back4app에 연결된 React Native 애플리케이션을 실행하는 방법을 배웠습니다.