---
title: React 프로젝트에 Parse SDK 통합하기: 빠른 시작 가이드
slug: docs-kr/react/quickstart
description: React 프로젝트에 Parse SDK를 설치하고 Back4App에 연결하는 방법을 배워보세요.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-12T20:06:35.283Z
---
# 빠른 시작
## 소개
이 섹션에서는 React를 사용하여 기존 프로젝트 또는 새 프로젝트로 Back4App을 시작하는 방법을 배웁니다. `Parse SDK`를 설치하고, `앱 키`를 사용하여 Parse를 초기화하고, Back4App에서 데이터 객체를 저장하고 읽는 첫 번째 API 호출을 수행합니다.
## 전제 조건
:::hint{type="info"}
- 이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4App에서 [앱 생성](https://www.back4app.com/docs/get-started/new-parse-app);
최신 버전의 [Node.js](https://nodejs.org/), `yarn` 과 `npx`
:::
## 1 - React 프로젝트 생성
이미 작동하는 React 프로젝트가 있다면 다음 단계로 건너뛸 수 있습니다.
프로젝트를 저장할 디렉토리에서 다음 명령을 실행하고, 이 경우 프로젝트 이름도 알려줍니다. `back4app-guide-react`:
:::BlockQuote
npx create-react-app back4app-guide-react
:::
Node.js가 제대로 구성되었다면, 터미널 프롬프트에서 프로젝트가 생성되는 것을 볼 수 있어야 합니다. 완료 후, 프로세스가 성공적으로 완료되었다는 메시지를 볼 수 있습니다.
좋아하는 코드 편집기에서 프로젝트를 열고 Parse 통합을 시작해 봅시다.
## 2 - 의존성 설치
이제 앱을 Back4App 서버와 통합하기 위해 필요한 유일한 의존성인 `Parse JavaScript SDK`를 설치합시다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행하세요:
:::BlockQuote
yarn add parse
:::
## 3 - 앱 키 가져오기
Back4App에서 앱을 생성한 후, 앱의 대시보드로 가서 `앱 설정->보안 및 키` 아래에서 앱 키를 가져옵니다 (아래 이미지를 확인하세요). Back4App과 연결하기 위해 항상 두 개의 키가 필요하다는 점에 유의하세요. `애플리케이션 ID`와 `자바스크립트 키`입니다.
## 4 - Parse 초기화 및 Back4App에 연결하기
당신의 `App.js`로 가서 `Parse SDK` 를 초기화하세요. `Application ID`와 `Javascript KEY`를 사용하세요 (이전 단계를 확인하세요).
```javascript
1 // Import Parse minified version
2 import Parse from 'parse/dist/parse.min.js';
3
4 // Your Parse initialization configuration goes here
5 const PARSE_APPLICATION_ID = 'YOUR_APPLICATION_ID_HERE';
6 const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
7 const PARSE_JAVASCRIPT_KEY = 'YOUR_JAVASCRIPT_KEY_HERE';
8 Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
9 Parse.serverURL = PARSE_HOST_URL;
```
## 5 - 간단한 데이터 객체 저장 및 읽기
귀하의 앱이 초기화되었으며 Back4app 클라우드 서비스에 안전하게 연결할 수 있습니다. 이제 Back4App 데이터베이스에서 데이터를 저장하고 검색하기 위해 두 개의 간단한 기능을 포함하는 구성 요소를 만들어 보겠습니다. `PersonComponent.js`라는 이름의 새 파일을 `src` 디렉토리에 추가하고 다음 코드를 추가하세요:
```javascript
1 import React, { useState } from 'react';
2 import Parse from 'parse/dist/parse.min.js';
3
4 export const PersonComponent = () => {
5 // State variables
6 const [person, setPerson] = useState(null);
7
8 async function addPerson() {
9 try {
10 // create a new Parse Object instance
11 const Person = new Parse.Object('Person');
12 // define the attributes you want for your Object
13 Person.set('name', 'John');
14 Person.set('email', 'john@back4app.com');
15 // save it on Back4App Data Store
16 await Person.save();
17 alert('Person saved!');
18 } catch (error) {
19 console.log('Error saving new person: ', error);
20 }
21 }
22
23 async function fetchPerson() {
24 // create your Parse Query using the Person Class you've created
25 const query = new Parse.Query('Person');
26 // use the equalTo filter to look for user which the name is John. this filter can be used in any data type
27 query.equalTo('name', 'John');
28 // run the query
29 const Person = await query.first();
30 // access the Parse Object attributes
31 console.log('person name: ', Person.get('name'));
32 console.log('person email: ', Person.get('email'));
33 console.log('person id: ', Person.id);
34 setPerson(Person);
35 }
36
37 return (
38
39
40
41 {person !== null && (
42
43
{`Name: ${person.get('name')}`}
44
{`Email: ${person.get('email')}`}
45
46 )}
47
48 );
49 };
```
The `addPerson` method creates a new `Parse.Object` representing a `Person` class, sets its properties then saves it on the Back4App cloud data store. The method `fetchPerson` retrieves a `Parse.Object` which has the attribute `name` equals to `John`. When the query resolves, you will be able to access the person’s attributes using the `get` method.
이 구성 요소의 인터페이스 요소도 주목하십시오. 이들은 메서드를 호출하는 두 개의 버튼과 가져온 데이터를 검색하는 두 개의 단락으로 구성됩니다.`사람` 상태 변수를 통해.
이제 이 구성 요소를 가져와서 주 `App.js` 파일에서 사용해야 합니다. 귀하의 `App.js` 파일은 대부분의 자리 표시자 코드를 제거한 후 다음과 비슷하게 보여야 합니다.
```javascript
1 import './App.css';
2 import Parse from 'parse/dist/parse.min.js';
3 import { PersonComponent } from './PersonComponent';
4
5 // Your Parse initialization configuration goes here
6 const PARSE_APPLICATION_ID = 'YOUR_PARSE_APPLICATION_ID';
7 const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
8 const PARSE_JAVASCRIPT_KEY = 'YOUR_PARSE_JAVASCRIPT_KEY';
9 Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
10 Parse.serverURL = PARSE_HOST_URL;
11
12 function App() {
13 return (
14
15
16
17
18
19 );
20 }
21
22 export default App;
```
## 6 - 앱 테스트하기
1. 프로젝트의 터미널을 엽니다.
2. 다음 명령어를 실행합니다: `yarn start`. 앱이 실행되면서 빌드가 완료되면 브라우저가 열립니다. 먼저 `사람` 을 추가하는 버튼을 클릭한 다음, 같은 `사람`을 가져오는 버튼을 클릭합니다.
3. Back4App에서 데이터 객체를 저장하고 검색했습니다. 또한 [앱 대시보드](https://parse-dashboard.back4app.com/apps/)에서 데이터를 확인하고 Person 클래스를 클릭할 수 있습니다.
## 다음에 할 일
보시다시피, Back4App을 React 프로젝트에 통합하는 가장 쉬운 방법은 [Parse Javascript SDK](https://www.npmjs.com/package/parse)를 사용하는 것입니다. Parse SDK는 최소한의 구성과 코드 재사용성을 제공하는 가볍고 사용하기 쉬운 레이어를 통해 훌륭한 개발 경험을 제공합니다.