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

10 분

빠른 시작 소개 이 섹션에서는 react를 사용하여 기존 프로젝트 또는 새 프로젝트로 back4app을 시작하는 방법을 배웁니다 \parse sdk\ 를 설치하고, \앱 키\ 를 사용하여 parse를 초기화하고, back4app에서 데이터 객체를 저장하고 읽는 첫 번째 api 호출을 수행합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 앱 생성 https //www back4app com/docs/get started/new parse app ; 최신 버전의 node js https //nodejs org/ , \yarn \ 과 \npx\ 1 react 프로젝트 생성 이미 작동하는 react 프로젝트가 있다면 다음 단계로 건너뛸 수 있습니다 프로젝트를 저장할 디렉토리에서 다음 명령을 실행하고, 이 경우 프로젝트 이름도 알려줍니다 \back4app guide react\ npx create react app back4app guide react node js가 제대로 구성되었다면, 터미널 프롬프트에서 프로젝트가 생성되는 것을 볼 수 있어야 합니다 완료 후, 프로세스가 성공적으로 완료되었다는 메시지를 볼 수 있습니다 좋아하는 코드 편집기에서 프로젝트를 열고 parse 통합을 시작해 봅시다 2 의존성 설치 이제 앱을 back4app 서버와 통합하기 위해 필요한 유일한 의존성인 \parse javascript sdk\ 를 설치합시다 프로젝트 루트 디렉토리에서 다음 명령어를 실행하세요 yarn add parse 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', '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 \{`name ${person get('name')}`}\ 44 \{`email ${person get('email')}`}\ 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에서 데이터 객체를 저장하고 검색했습니다 또한 앱 대시보드 https //parse dashboard back4app com/apps/ 에서 데이터를 확인하고 person 클래스를 클릭할 수 있습니다 다음에 할 일 보시다시피, back4app을 react 프로젝트에 통합하는 가장 쉬운 방법은 parse javascript sdk https //www npmjs com/package/parse 를 사용하는 것입니다 parse sdk는 최소한의 구성과 코드 재사용성을 제공하는 가볍고 사용하기 쉬운 레이어를 통해 훌륭한 개발 경험을 제공합니다