---
title: Quickstart
slug: docs-kr/react-native/parse-sdk/react-native-sdk
description: React Native에 Parse SDK를 설치하고 Back4App 연결 가이드입니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T11:17:49.274Z
---
## 소개
이 가이드는 새로운 프로젝트 또는 기존 프로젝트에서 Back4App을 설정하고 사용하는 데 도움을 줄 것입니다. **React Native CLI**를 사용합니다. `Parse SDK`, 앱 키로 초기화하고, Back4App에서 데이터를 저장하고 검색하기 위한 첫 번째 API 호출을 생성합니다.
## 전제 조건
:::hint{type="info"}
**이 튜토리얼을 완료하려면 다음이 필요합니다:**
- Back4App에서 [앱 생성](https://www.back4app.com/docs/get-started/new-parse-app)이 필요합니다.
- [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)에 따라 선택하세요.
:::ExpandableHeading
**리액트 네이티브 CLI**
지침은 개발 운영 체제와 iOS 또는 Android용 개발을 시작할 것인지에 따라 다릅니다. 자세한 내용은 공식 문서를 확인하세요 [여기](https://reactnative.dev/docs/environment-setup).
:::
::::ExpandableHeading
**엑스포**
**엑스포 CLI를 전역에 설치합니다**
:::BlockQuote
npm install -g expo-cli
:::
**새로운 리액트 네이티브 프로젝트를 생성합니다**
:::BlockQuote
expo init B4aProject
cd B4aProject
expo start
:::
:::BlockQuote
:::
::::
## 2 - 의존성 설치
리액트 네이티브 프로젝트에서 `Parse Javascript SDK` 및 `AsyncStorage`를 설치하려면 다음을 실행하세요:
:::BlockQuote
npm install parse @react-native-async-storage/async-storage --save
:::
- **Parse Javascript SDK **- Back4app 서버와 앱을 통합하기 위해.
- **리액트 네이티브 Async Storage **- Parse SDK를 사용하려면 AsyncStorage 핸들러가 필요합니다.
iOS의 경우, 네이티브 AsyncStorage 지원도 추가하세요:
:::BlockQuote
cd ios & pod install
:::
## 3 - 앱 키 가져오기
Back4App에서 앱을 만든 후, **앱 설정 > 보안 및 키** 아래에서 앱 키를 찾으세요. 연결하려면 **애플리케이션 ID**와 **JavaScript KEY**가 필요합니다.
## 4 - Parse 초기화 및 Back4App에 연결
`index.tsx`를 열고 `애플리케이션 ID`와 `JavaScript KEY`로 Parse를 초기화하세요:
:::CodeblockTabs
index.tsx
```typescript
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에서 데이터를 저장하고 가져오세요.
```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);
}
}
```
## 6 - 앱 테스트
1. 프로젝트의 터미널을 엽니다.
2. 프로젝트를 실행합니다.
:::ExpandableHeading{isOpen="true"}
**리액트 네이티브 CLI**
다음 명령어를 실행합니다: `npx react-native run-android` 또는 `npx react-native run-ios` 를 사용하여 대상 플랫폼에서 애플리케이션을 엽니다.
:::
:::ExpandableHeading{isOpen="true"}
**엑스포**
다음 명령어를 실행합니다: `expo start`, 그리고 브라우저나 장치에서 앱을 보려면 지침을 따릅니다.
:::
## 문제 해결
일반적인 문제와 해결책:
### 메트로에서 오류가 발생했습니다: 모듈 “idb-keyval”을 파일에서 해결하는 중
해결책: `metro.conf.js` 파일로 가서 다음과 같이 변경합니다:
```javascript
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` 이 줄을 변경합니다:
:::BlockQuote
var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
:::
다음과 같이 변경합니다:
:::BlockQuote
import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
:::
같은 파일에서 `EventEmitter.js`, 다음 행을 변경하세요:
:::BlockQuote
module.exports = EventEmitter;
:::
이것으로:
:::BlockQuote
export default EventEmitter;
:::
### 바벨 문제
바벨에서 문제가 발생하는 경우, 다음과 같이 `babel.config.js`를 업데이트하는 것을 고려하세요:
:::BlockQuote
module.exports = function (api) \{
api.cache(true);
return \{
presets: \['babel-preset-expo'],
plugins: \[
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
};
};
:::
## 다음 단계
이 가이드는 Back4App을 사용한 기본 설정 및 데이터 저장을 다룹니다. 데이터 저장, 실시간 기능, 로컬 데이터 저장, 클라우드 함수, 인증 및 파일 저장을 포함한 Parse 기능을 탐색하세요.