React 프로젝트에 Parse SDK 통합하기: 빠른 시작 가이드

빠른 시작 소개 이 섹션에서는 react를 사용하여 기존 프로젝트 또는 새 프로젝트로 back4app을 시작하는 방법을 배웁니다 parse sdk parse sdk 를 설치하고, 앱 키 앱 키 를 사용하여 parse를 초기화하고, back4app에서 데이터 객체를 저장하고 읽는 첫 번째 api 호출을 수행합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 앱 생성 ; 최신 버전의 node js , yarn yarn 과 npx npx 1 react 프로젝트 생성 이미 작동하는 react 프로젝트가 있다면 다음 단계로 건너뛸 수 있습니다 프로젝트를 저장할 디렉토리에서 다음 명령을 실행하고, 이 경우 프로젝트 이름도 알려줍니다 back4app guide react back4app guide react node js가 제대로 구성되었다면, 터미널 프롬프트에서 프로젝트가 생성되는 것을 볼 수 있어야 합니다 완료 후, 프로세스가 성공적으로 완료되었다는 메시지를 볼 수 있습니다 좋아하는 코드 편집기에서 프로젝트를 열고 parse 통합을 시작해 봅시다 2 의존성 설치 이제 앱을 back4app 서버와 통합하기 위해 필요한 유일한 의존성인 parse javascript sdk parse javascript sdk 를 설치합시다 프로젝트 루트 디렉토리에서 다음 명령어를 실행하세요 3 앱 키 가져오기 back4app에서 앱을 생성한 후, 앱의 대시보드로 가서 앱 설정 >보안 및 키 앱 설정 >보안 및 키 아래에서 앱 키를 가져옵니다 (아래 이미지를 확인하세요) back4app과 연결하기 위해 항상 두 개의 키가 필요하다는 점에 유의하세요 애플리케이션 id 애플리케이션 id 와 자바스크립트 키 자바스크립트 키 입니다 4 parse 초기화 및 back4app에 연결하기 당신의 app js app js 로 가서 parse sdk parse sdk 를 초기화하세요 application id application id 와 javascript key 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 personcomponent js 라는 이름의 새 파일을 src 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', '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 \<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 addperson method creates a new parse object parse object representing a person person class, sets its properties then saves it on the back4app cloud data store the method fetchperson fetchperson retrieves a parse object parse object which has the attribute name name equals to john john when the query resolves, you will be able to access the person’s attributes using the get get method 이 구성 요소의 인터페이스 요소도 주목하십시오 이들은 메서드를 호출하는 두 개의 버튼과 가져온 데이터를 검색하는 두 개의 단락으로 구성됩니다 사람 사람 상태 변수를 통해 이제 이 구성 요소를 가져와서 주 app js app js 파일에서 사용해야 합니다 귀하의 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 yarn start 앱이 실행되면서 빌드가 완료되면 브라우저가 열립니다 먼저 사람 사람 을 추가하는 버튼을 클릭한 다음, 같은 사람 사람 을 가져오는 버튼을 클릭합니다 back4app에서 데이터 객체를 저장하고 검색했습니다 또한 앱 대시보드 에서 데이터를 확인하고 person 클래스를 클릭할 수 있습니다 다음에 할 일 보시다시피, back4app을 react 프로젝트에 통합하는 가장 쉬운 방법은 parse javascript sdk https //www npmjs com/package/parse 를 사용하는 것입니다 parse sdk는 최소한의 구성과 코드 재사용성을 제공하는 가볍고 사용하기 쉬운 레이어를 통해 훌륭한 개발 경험을 제공합니다