React 프로젝트에 Parse SDK 통합하기: 빠른 시작 가이드
빠른 시작
소개
이 섹션에서는 React를 사용하여 기존 프로젝트 또는 새 프로젝트로 Back4App을 시작하는 방법을 배웁니다. Parse SDK를 설치하고, 앱 키를 사용하여 Parse를 초기화하고, Back4App에서 데이터 객체를 저장하고 읽는 첫 번째 API 호출을 수행합니다.
전제 조건
1 - React 프로젝트 생성
이미 작동하는 React 프로젝트가 있다면 다음 단계로 건너뛸 수 있습니다.
프로젝트를 저장할 디렉토리에서 다음 명령을 실행하고, 이 경우 프로젝트 이름도 알려줍니다. back4app-guide-react:
Node.js가 제대로 구성되었다면, 터미널 프롬프트에서 프로젝트가 생성되는 것을 볼 수 있어야 합니다. 완료 후, 프로세스가 성공적으로 완료되었다는 메시지를 볼 수 있습니다.
좋아하는 코드 편집기에서 프로젝트를 열고 Parse 통합을 시작해 봅시다.
2 - 의존성 설치
이제 앱을 Back4App 서버와 통합하기 위해 필요한 유일한 의존성인 Parse JavaScript SDK를 설치합시다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행하세요:
3 - 앱 키 가져오기
Back4App에서 앱을 생성한 후, 앱의 대시보드로 가서 앱 설정->보안 및 키 아래에서 앱 키를 가져옵니다 (아래 이미지를 확인하세요). Back4App과 연결하기 위해 항상 두 개의 키가 필요하다는 점에 유의하세요. 애플리케이션 ID와 자바스크립트 키입니다.
4 - Parse 초기화 및 Back4App에 연결하기
당신의 App.js로 가서 Parse SDK 를 초기화하세요. Application ID와 Javascript KEY를 사용하세요 (이전 단계를 확인하세요).
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 디렉토리에 추가하고 다음 코드를 추가하세요:
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', '[email protected]');
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 <div>
39 <button onClick={addPerson}>Add Person</button>
40 <button onClick={fetchPerson}>Fetch Person</button>
41 {person !== null && (
42 <div>
43 <p>{`Name: ${person.get('name')}`}</p>
44 <p>{`Email: ${person.get('email')}`}</p>
45 </div>
46 )}
47 </div>
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 파일은 대부분의 자리 표시자 코드를 제거한 후 다음과 비슷하게 보여야 합니다.
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 <div className="App">
15 <header className="App-header">
16 <PersonComponent />
17 </header>
18 </div>
19 );
20 }
21
22 export default App;6 - 앱 테스트하기
- 프로젝트의 터미널을 엽니다.
- 다음 명령어를 실행합니다: yarn start. 앱이 실행되면서 빌드가 완료되면 브라우저가 열립니다. 먼저 사람 을 추가하는 버튼을 클릭한 다음, 같은 사람을 가져오는 버튼을 클릭합니다.
다음에 할 일
보시다시피, Back4App을 React 프로젝트에 통합하는 가장 쉬운 방법은 Parse Javascript SDK를 사용하는 것입니다. Parse SDK는 최소한의 구성과 코드 재사용성을 제공하는 가볍고 사용하기 쉬운 레이어를 통해 훌륭한 개발 경험을 제공합니다.