ReactJS
Real Time
React를 위한 Parse 쿼리 훅의 설치 및 실시간 동기화
8 분
parse react 훅을 사용하여 실시간 업데이트 시작하기 소개 parse/back4app을 javascript 기반 프로젝트에 통합하는 가장 쉬운 방법은 parse javascript sdk 이 라이브러리는 nodejs, reactjs, vuejs, angularjs, react native와 같은 여러 javascript 환경에서 작동하며 back4app 기능에 접근할 수 있습니다 parse react의 훅 목표는 최소한의 구성과 코드 재사용성을 제공하는 가벼운 사용층을 제공하여 reactjs 개발자에게 이 경험을 더욱 향상시키는 것입니다 이 패키지를 사용하면 자격 증명 설정, http 요청, 실시간 동기화, 오프라인 우선 상호작용과 같은 항목이 자동으로 react 앱에서 사용 가능해집니다 이 라이브러리는 parse javascript sdk , 위에 완전히 typescript로 작성되었으며 현재 alpha 버전입니다 이 초기 가이드에서는 react 프로젝트에 @parse/react @parse/react 라이브러리를 설치하고 설정합니다 @parse/react @parse/react 는 현재 alpha 버전입니다 이 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다 여러분의 피드백은 매우 감사하게 생각하며, 라이브러리를 사용하고 질문이나 첫 인상을 community\@back4app com으로 이메일로 보내주시면 좋습니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 앱 생성 ; 라이브 쿼리 활성화 튜토리얼을 따르세요 npm 또는 yarn이 설치되어 있어야 합니다 npx 패키지 실행기가 설치되어 있어야 합니다 1 설치 다음 명령어로 @parse/react @parse/react 및 그 동등한 의존성 parse parse 를 react 애플리케이션에 설치하세요 2 애플리케이션 설정 앱이 back4app 서버에 안전하게 연결되도록 하려면, app js app js (또는 app tsx app tsx ) 파일에 앱의 자격 증명을 parse javascript sdk에 제공해야 합니다 라이브 쿼리를 수행하도록 앱을 활성화할 때 생성한 back4app 서브도메인을 사용해야 합니다 app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); 다음 사항에 유의하십시오 initializeparse initializeparse 메서드는 일반적인 parse initialize parse initialize 메서드를 대체합니다 앱 id 앱 id 와 javascript 키 javascript 키 자격 증명은 대시보드 대시보드 를 열어 확인할 수 있습니다 back4app 웹사이트 https //www back4app com/ 에서 코어 설정 코어 설정 , 서버 설정 서버 설정 을 클릭하십시오 3 첫 번째 쿼리 만들기 다음으로, 첫 번째 쿼리를 작성하고 앱에 표시합니다 @parse/react @parse/react 라이브러리는 useparsequery useparsequery 훅을 내보내므로 오프라인 지원, 실시간 변경 사항 등의 기능을 구현하는 방법을 찾는 데 시간을 낭비할 필요가 없습니다 이것은 parse query parse query 를 사용하고 쿼리에서 반환된 데이터에 접근하는 데 사용할 수 있는 몇 가지 속성을 가진 객체를 반환합니다 app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23	 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } 쿼리를 훅에 전달할 때, 먼저 저장했을 수 있는 캐시된 결과를 찾습니다 그런 다음, 자동으로 동기화되는 back4app livequery 서버와 통신하기 위해 websocket 연결을 생성합니다 다시 말해, 오프라인 우선 접근 방식과 실시간 변경 사항이 기본적으로 활성화됩니다 쿼리 상태를 확인하려면 다음을 사용하십시오 props props 훅에서 반환된 islive islive 만약 true true , 쿼리가 실시간 업데이트를 구독하고 있음을 나타냅니다 isloading isloading 만약 true true , 쿼리가 결과를 가져오고 있습니다 issyncing issyncing 만약 true true , 쿼리가 back4app 서버에서 업데이트된 결과를 가져오고 있습니다 results results 이것은 쿼리에서 반환된 데이터입니다 count count 쿼리와 일치하는 객체의 수를 나타냅니다 error error 쿼리에 문제가 발생하면 오류를 반환합니다 reload reload 쿼리 결과를 다시 로드합니다 자세한 설정 및 사용 방법은 전체 문서 를 참조하세요 @parse/react @parse/react 라이브러리 4 앱 훅 테스트 이제 react 앱을 실행하고 결과를 볼 수 있어야 합니다 앱에서 항목을 보려면 back4app 프로젝트에 데이터를 추가해야 한다는 점을 명심하세요 완료되었습니다! 이 시점에서, 당신은 프로젝트에 @parse/react @parse/react 를 설치하고, back4app과의 연결을 구성했으며, 첫 번째 쿼리를 작성했습니다 다음 가이드에서는 이 라이브러리의 주요 기능 중 하나인 샘플 라이브 채팅 앱을 만드는 방법을 볼 것입니다