리액트 네이티브에서 Parse 클라우드 함수 및 컨텍스트 활용

리액트 네이티브 앱에서 클라우드 함수 검증기 사용하기 소개 이 가이드에서는 리액트 네이티브 앱에서 parse cloud code 함수 검증기와 컨텍스트 사용법을 배우게 됩니다 클라우드 함수에 구현된 검증기의 예시, 서로 다른 함수 간의 컨텍스트 사용법, 그리고 이러한 개선된 함수를 사용하여 back4app에서 리액트 네이티브 컴포넌트를 구현하는 방법을 확인할 수 있습니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 생성된 리액트 네이티브 앱과 back4app에 연결된 다음 방법을 이해해야 합니다 클라우드 함수 배포하기 back4app에서 이 가이드의 예제 애플리케이션을 실행하려면 다음을 설정해야 합니다 react native paper react native paper 라이브러리 목표 리액트 네이티브 앱에서 back4app의 검증기 및 컨텍스트 사용으로 parse cloud code 함수를 실행합니다 1 클라우드 코드 함수 검증기 이해하기 애플리케이션에서 클라우드 코드 함수 클라우드 코드 함수 를 사용하면 코드의 유연성이 크게 향상되어 재사용 가능한 메서드를 앱에서 분리하고 그 동작을 더 잘 제어할 수 있습니다 우리의 클라우드 함수 시작 가이드 https //www back4app com/docs/get started/cloud functions 를 통해 사용하는 방법을 확인하거나 검토할 수 있습니다 이 클라우드 함수에 전송된 데이터는 예기치 않은 오류를 피하기 위해 검증되어야 하며, parse cloud code(버전 4 4 0부터)는 완전한 통합된 검증기 검증기 , 이를 객체 객체 로 전달하거나 다른 함수로 전달할 수 있습니다 이러한 테스트는 함수 내의 코드를 실행하기 전에 호출되므로, 검증기가 데이터를 수락하면 데이터가 유효하다고 항상 가정할 수 있습니다 다음 클라우드 함수를 예로 들어보겠습니다 이 함수는 특정 영화 평점의 평균을 계산합니다 영화 이름은 필수입니다( 영화 영화 ), 따라서 다음 객체를 사용하여 전달되도록 할 수 있습니다 영화 매개변수가 전달되지 않으면 함수는 “검증 실패 영화를 위한 데이터를 지정해 주세요 ”라는 메시지를 포함한 오류를 반환합니다 1 parse cloud define('getmovieaveragerating', async (request) => { 2 const query = new parse query("review"); 3 query equalto("movie", request params movie); 4 const results = await query find(); 5 let sum = 0; 6 for (let review of results) { 7 sum += review\ get("rate"); 8 } 9 return { 10 result sum / results length, 11 }; 12 },{ 13 fields \['movie'], 14 }); 또한 검증기 검증기 , 예를 들어 함수를 호출하는 사용자가 인증되었는지 확인하는 requireuser requireuser 플래그와 같은 더 고급 옵션을 전달할 수 있습니다 또 다른 유용한 추가 사항은 매개변수 값의 유효성을 검증하는 조건을 추가하는 것입니다 예를 들어, 영화 영화 값이 문자열이고 최소 3자 이상인지 확인하는 것입니다 1 parse cloud define('getmovieaveragerating', async (request) => { 2 const query = new parse query("review"); 3 query equalto("movie", request params movie); 4 const results = await query find(); 5 let sum = 0; 6 for (let review of results) { 7 sum += review\ get("rate"); 8 } 9 return { 10 result sum / results length, 11 }; 12 },{ 13 fields { 14 movie { 15 required true, 16 type string, 17 options val => { 18 return val length >= 3; 19 }, 20 error 'movie must have at least 3 characters' 21 } 22 }, 23 }); 전체 유효성 검사 유효성 검사 옵션 목록은 parse 문서 https //docs parseplatform org/cloudcode/guide/#implementing cloud function validation 에서 확인할 수 있습니다 2 클라우드 코드 함수 컨텍스트 이해하기 클라우드 코드(버전 4 3 0부터)를 사용하여 애플리케이션에서 저장 트리거를 사용할 때, 컨텍스트 컨텍스트 사전을 parse object save parse object save 메서드에 전달할 수 있으며, 또한 beforesave beforesave 핸들러에서 aftersave aftersave 핸들러로 전달할 수 있습니다 이는 데이터 일관성을 보장하거나 객체를 성공적으로 저장한 후에만 수행할 수 있는 비동기 작업을 수행하는 데 사용될 수 있습니다 다음 클라우드 함수 트리거를 예로 들어보겠습니다 여기서 리뷰 리뷰 객체가 저장되며, 객체 저장 호출이 애플리케이션에서 이루어졌는지 대시보드에서 이루어졌는지를 구분하고자 합니다 이는 애플리케이션 코드에서 객체를 저장하기 전에 컨텍스트를 설정하여 달성할 수 있습니다 1 const review = new parse object('review'); 2 review\ set('text', 'great movie!'); 3 review\ set('rate', 5); 4 review\ set('movie', 'mission very possible'); 5&#x9; 6 const context = { fromapplication true }; 7 const savedreview = await review\ save(null, {context context}); 여기 저장 트리거 함수가 있습니다 두 함수 모두에서 요청에서 컨텍스트 객체에 직접 접근할 수 있습니다 1 parse cloud beforesave('review', async (request) => { 2 // try to get context 3 try { 4 const context = request context; 5 if (context fromapplication === true) { 6 // set a flag in the object before saving 7 request object set('fromapplication', true); 8 } 9 } catch(error){} 10&#x9; 11 const text = request object get('text'); 12 if (text length > 20) { 13 // truncate and add a 14 request object set('text', text substring(0, 17) + ' '); 15 } 16 }); 17&#x9; 18 parse cloud aftersave('review', async (request) => { 19 // try to get context 20 try { 21 const context = request context; 22 if (context fromapplication === true) { 23 // do something when coming from application, like sending a notification or email 24 console log('got context fromapplication when saving review object'); 25 } 26 } catch(error){} 27 }); 3 react native 컴포넌트에서 검증된 클라우드 코드 사용하기 이제 마지막 가이드 https //www back4app com/docs/react native/parse sdk/cloud functions/react native cloud functions 에서 동일한 컴포넌트 예제를 기반으로 사용하고, 이제 검증자와 컨텍스트를 사용하는 함수를 강조하기 위해 몇 가지 변경 사항을 추가하겠습니다 1단계와 2단계에서 보여준 클라우드 함수를 배포하는 것을 잊지 말고, 그 후에 “리뷰” 객체 생성 함수를 다음과 같이 변경하여 save 메서드에 컨텍스트 인수를 추가하세요 javascript 1 const createreview = async function () { 2 try { 3 // this values come from state variables linked to 4 // the screen form fields 5 const reviewtextvalue = reviewtext; 6 const reviewratevalue = number(reviewrate); 7&#x9; 8 // creates a new parse object instance 9 let review = new parse object('review'); 10&#x9; 11 // set data to parse object 12 // simple title field 13 review\ set('text', reviewtextvalue); 14&#x9; 15 // simple number field 16 review\ set('rate', reviewratevalue); 17&#x9; 18 // set default movie 19 review\ set('movie', 'mission very possible'); 20&#x9; 21 // after setting the values, save it on the server 22 try { 23 // add 24 const context = {fromapplication true}; 25 await review\ save(null, {context context}); 26 // success 27 alert alert('success!'); 28 // updates query result list 29 doreviewquery(); 30 rungetmovieaveragerating(); 31 return true; 32 } catch (error) { 33 // error can be caused by lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 } 37 } catch (error) { 38 // error can be caused by lack of field values 39 alert alert('error!', error message); 40 return false; 41 } 42 };1 const createreview = async function () promise\<boolean> { 2 try { 3 // this values come from state variables linked to 4 // the screen form fields 5 const reviewtextvalue string = reviewtext; 6 const reviewratevalue number = number(reviewrate); 7&#x9; 8 // creates a new parse object instance 9 let review parse object = new parse object('review'); 10&#x9; 11 // set data to parse object 12 // simple title field 13 review\ set('text', reviewtextvalue); 14&#x9; 15 // simple number field 16 review\ set('rate', reviewratevalue); 17&#x9; 18 // set default movie 19 review\ set('movie', 'mission very possible'); 20&#x9; 21 // after setting the values, save it on the server 22 try { 23 const context = {fromapplication true}; 24 await review\ save(null, {context context}); 25 // success 26 alert alert('success!'); 27 // updates query result list 28 doreviewquery(); 29 rungetmovieaveragerating(); 30 return true; 31 } catch (error) { 32 // error can be caused by lack of internet connection 33 alert alert('error!', error message); 34 return false; 35 } 36 } catch (error) { 37 // error can be caused by lack of field values 38 alert alert('error!', error message); 39 return false; 40 } 41 }; 영화 평균 계산 함수 검증기를 강조하기 위해, “me”라는 영화를 쿼리하는 새로운 함수를 추가하고 이를 호출하는 또 다른 버튼을 추가하세요 우리의 검증기는 영화 이름 길이 때문에 요청이 실패하게 만들 것임을 기억하세요 여기 새로운 함수 코드가 있습니다 javascript 1 const createreview = async function () { 2 try { 3 // this values come from state variables linked to 4 // the screen form fields 5 const reviewtextvalue = reviewtext; 6 const reviewratevalue = number(reviewrate); 7&#x9; 8 // creates a new parse object instance 9 let review = new parse object('review'); 10&#x9; 11 // set data to parse object 12 // simple title field 13 review\ set('text', reviewtextvalue); 14&#x9; 15 // simple number field 16 review\ set('rate', reviewratevalue); 17&#x9; 18 // set default movie 19 review\ set('movie', 'mission very possible'); 20&#x9; 21 // after setting the values, save it on the server 22 try { 23 // add 24 const context = {fromapplication true}; 25 await review\ save(null, {context context}); 26 // success 27 alert alert('success!'); 28 // updates query result list 29 doreviewquery(); 30 rungetmovieaveragerating(); 31 return true; 32 } catch (error) { 33 // error can be caused by lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 } 37 } catch (error) { 38 // error can be caused by lack of field values 39 alert alert('error!', error message); 40 return false; 41 } 42 };1 const createreview = async function () promise\<boolean> { 2 try { 3 // this values come from state variables linked to 4 // the screen form fields 5 const reviewtextvalue string = reviewtext; 6 const reviewratevalue number = number(reviewrate); 7&#x9; 8 // creates a new parse object instance 9 let review parse object = new parse object('review'); 10&#x9; 11 // set data to parse object 12 // simple title field 13 review\ set('text', reviewtextvalue); 14&#x9; 15 // simple number field 16 review\ set('rate', reviewratevalue); 17&#x9; 18 // set default movie 19 review\ set('movie', 'mission very possible'); 20&#x9; 21 // after setting the values, save it on the server 22 try { 23 const context = {fromapplication true}; 24 await review\ save(null, {context context}); 25 // success 26 alert alert('success!'); 27 // updates query result list 28 doreviewquery(); 29 rungetmovieaveragerating(); 30 return true; 31 } catch (error) { 32 // error can be caused by lack of internet connection 33 alert alert('error!', error message); 34 return false; 35 } 36 } catch (error) { 37 // error can be caused by lack of field values 38 alert alert('error!', error message); 39 return false; 40 } 41 }; 새로운 전체 구성 요소 코드가 이렇게 배치되어 있습니다 리뷰가 애플리케이션에서 생성되었는지 여부를 보여주는 목록 항목의 제목에 새 줄이 있다는 점에 유의하세요 javascript 1 import react, {usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 textinput as papertextinput, 8 button as paperbutton, 9 text as papertext, 10 } from 'react native paper'; 11&#x9; 12 export const movieratings = () => { 13 // state variable 14 const \[queryresults, setqueryresults] = usestate(null); 15 const \[ratingsaverage, setratingsaverage] = usestate(''); 16 const \[reviewtext, setreviewtext] = usestate(''); 17 const \[reviewrate, setreviewrate] = usestate(''); 18&#x9; 19 const rungetmovieaveragerating = async function () { 20 try { 21 const params = { 22 movie 'mission very possible', 23 }; 24 let resultobject = await parse cloud run( 25 'getmovieaveragerating', 26 params, 27 ); 28 // set query results to state variable using state hook 29 setratingsaverage(resultobject result tofixed(1)); 30 return true; 31 } catch (error) { 32 // error can be caused by lack of internet connection 33 // or by not having an valid review object yet 34 alert alert( 35 'error!', 36 'make sure that the cloud function is deployed and that the review class table is created', 37 ); 38 return false; 39 } 40 }; 41&#x9; 42 const rungetmemovieaveragerating = async function () { 43 try { 44 const params = { 45 movie 'me', 46 }; 47 let resultobject = await parse cloud run( 48 'getmovieaveragerating', 49 params, 50 ); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 // or by not having an valid review object yet 55 alert alert('error!', json stringify(error message)); 56 return false; 57 } 58 }; 59&#x9; 60 const doreviewquery = async function () { 61 // create our query 62 let parsequery = new parse query('review'); 63 try { 64 let results = await parsequery find(); 65 // set query results to state variable 66 setqueryresults(results); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const createreview = async function () { 76 try { 77 // this values come from state variables linked to 78 // the screen form fields 79 const reviewtextvalue = reviewtext; 80 const reviewratevalue = number(reviewrate); 81&#x9; 82 // creates a new parse object instance 83 let review = new parse object('review'); 84&#x9; 85 // set data to parse object 86 // simple title field 87 review\ set('text', reviewtextvalue); 88&#x9; 89 // simple number field 90 review\ set('rate', reviewratevalue); 91&#x9; 92 // set default movie 93 review\ set('movie', 'mission very possible'); 94&#x9; 95 // after setting the values, save it on the server 96 try { 97 const context = {fromapplication true}; 98 await review\ save(null, {context context}); 99 // success 100 alert alert('success!'); 101 // updates query result list 102 doreviewquery(); 103 rungetmovieaveragerating(); 104 return true; 105 } catch (error) { 106 // error can be caused by lack of internet connection 107 alert alert('error!', error message); 108 return false; 109 } 110 } catch (error) { 111 // error can be caused by lack of field values 112 alert alert('error!', error message); 113 return false; 114 } 115 }; 116&#x9; 117 return ( 118 <> 119 \<view style={styles header}> 120 \<image 121 style={styles header logo} 122 source={ {uri 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png',} } 123 /> 124 \<papertext style={styles header text}> 125 \<papertext style={styles header text bold}> 126 {'react native on back4app '} 127 \</papertext> 128 {' cloud code movie ratings'} 129 \</papertext> 130 \</view> 131 \<scrollview style={styles wrapper}> 132 \<view> 133 \<title>{'mission very possible reviews'}\</title> 134 \<papertext>{`ratings average ${ratingsaverage}`}\</papertext> 135 {/ query list /} 136 {queryresults !== null && 137 queryresults !== undefined && 138 queryresults map((result) => ( 139 \<list item 140 key={result id} 141 title={`review text ${result get('text')}`} 142 description={`rate ${result get('rate')}\nfrom app ${ 143 result get('fromapplication') !== undefined ? 'yes' 'no' 144 }`} 145 titlestyle={styles list text} 146 style={styles list item} 147 /> 148 ))} 149 {queryresults === null || 150 queryresults === undefined || 151 (queryresults !== null && 152 queryresults !== undefined && 153 queryresults length <= 0) ? ( 154 \<papertext>{'no results here!'}\</papertext> 155 ) null} 156 \</view> 157 \<view> 158 \<title>action buttons\</title> 159 \<paperbutton 160 onpress={() => rungetmovieaveragerating()} 161 mode="contained" 162 icon="search web" 163 color={'#208aec'} 164 style={styles list button}> 165 {'calculate review average'} 166 \</paperbutton> 167 \<paperbutton 168 onpress={() => rungetmemovieaveragerating()} 169 mode="contained" 170 icon="search web" 171 color={'#208aec'} 172 style={styles list button}> 173 {'calculate me movie review average'} 174 \</paperbutton> 175 \<paperbutton 176 onpress={() => doreviewquery()} 177 mode="contained" 178 icon="search web" 179 color={'#208aec'} 180 style={styles list button}> 181 {'query reviews'} 182 \</paperbutton> 183 \</view> 184 \<view> 185 \<title>add new review\</title> 186 \<papertextinput 187 value={reviewtext} 188 onchangetext={text => setreviewtext(text)} 189 label="text" 190 mode="outlined" 191 style={styles form input} 192 /> 193 \<papertextinput 194 value={reviewrate} 195 onchangetext={text => setreviewrate(text)} 196 keyboardtype={'number pad'} 197 label="rate (1 5)" 198 mode="outlined" 199 style={styles form input} 200 /> 201 \<paperbutton 202 onpress={() => createreview()} 203 mode="contained" 204 icon="plus" 205 style={styles submit button}> 206 {'add'} 207 \</paperbutton> 208 \</view> 209 \</scrollview> 210 \</> 211 ); 212 }; 213&#x9; 214 // these define the screen component styles 215 const styles = stylesheet create({ 216 header { 217 alignitems 'center', 218 paddingtop 30, 219 paddingbottom 50, 220 backgroundcolor '#208aec', 221 }, 222 header logo { 223 height 50, 224 width 220, 225 resizemode 'contain', 226 }, 227 header text { 228 margintop 15, 229 color '#f0f0f0', 230 fontsize 16, 231 }, 232 header text bold { 233 color '#fff', 234 fontweight 'bold', 235 }, 236 wrapper { 237 width '90%', 238 alignself 'center', 239 }, 240 list button { 241 margintop 6, 242 marginleft 15, 243 height 40, 244 }, 245 list item { 246 borderbottomwidth 1, 247 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 248 }, 249 list text { 250 fontsize 15, 251 }, 252 form input { 253 height 44, 254 marginbottom 16, 255 backgroundcolor '#fff', 256 fontsize 14, 257 }, 258 submit button { 259 width '100%', 260 maxheight 50, 261 alignself 'center', 262 backgroundcolor '#208aec', 263 }, 264 });1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 textinput as papertextinput, 8 button as paperbutton, 9 text as papertext, 10 } from 'react native paper'; 11&#x9; 12 export const movieratings fc<{}> = ({}) reactelement => { 13 // state variable 14 const \[queryresults, setqueryresults] = usestate(null); 15 const \[ratingsaverage, setratingsaverage] = usestate(''); 16 const \[reviewtext, setreviewtext] = usestate(''); 17 const \[reviewrate, setreviewrate] = usestate(''); 18&#x9; 19 const rungetmovieaveragerating = async function () promise\<boolean> { 20 try { 21 const params {movie string} = { 22 movie 'mission very possible', 23 }; 24 let resultobject {result number} = await parse cloud run( 25 'getmovieaveragerating', 26 params, 27 ); 28 // set query results to state variable using state hook 29 setratingsaverage(resultobject result tofixed(1)); 30 return true; 31 } catch (error) { 32 // error can be caused by lack of internet connection 33 // or by not having an valid review object yet 34 alert alert( 35 'error!', 36 'make sure that the cloud function is deployed and that the review class table is created', 37 ); 38 return false; 39 } 40 }; 41&#x9; 42 const rungetmemovieaveragerating = async function () promise\<boolean> { 43 try { 44 const params {movie string} = { 45 movie 'me', 46 }; 47 let resultobject object = await parse cloud run( 48 'getmovieaveragerating', 49 params, 50 ); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 // or by not having an valid review object yet 55 alert alert('error!', json stringify(error message)); 56 return false; 57 } 58 }; 59&#x9; 60 const doreviewquery = async function () promise\<boolean> { 61 // create our query 62 let parsequery parse query = new parse query('review'); 63 try { 64 let results \[parse object] = await parsequery find(); 65 // set query results to state variable 66 setqueryresults(results); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const createreview = async function () promise\<boolean> { 76 try { 77 // this values come from state variables linked to 78 // the screen form fields 79 const reviewtextvalue string = reviewtext; 80 const reviewratevalue number = number(reviewrate); 81&#x9; 82 // creates a new parse object instance 83 let review parse object = new parse object('review'); 84&#x9; 85 // set data to parse object 86 // simple title field 87 review\ set('text', reviewtextvalue); 88&#x9; 89 // simple number field 90 review\ set('rate', reviewratevalue); 91&#x9; 92 // set default movie 93 review\ set('movie', 'mission very possible'); 94&#x9; 95 // after setting the values, save it on the server 96 try { 97 const context = {fromapplication true}; 98 await review\ save(null, {context context}); 99 // success 100 alert alert('success!'); 101 // updates query result list 102 doreviewquery(); 103 rungetmovieaveragerating(); 104 return true; 105 } catch (error) { 106 // error can be caused by lack of internet connection 107 alert alert('error!', error message); 108 return false; 109 } 110 } catch (error) { 111 // error can be caused by lack of field values 112 alert alert('error!', error message); 113 return false; 114 } 115 }; 116&#x9; 117 return ( 118 <> 119 \<view style={styles header}> 120 \<image 121 style={styles header logo} 122 source={ { 123 uri 124 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 125 } } 126 /> 127 \<papertext style={styles header text}> 128 \<papertext style={styles header text bold}> 129 {'react native on back4app '} 130 \</papertext> 131 {' cloud code movie ratings'} 132 \</papertext> 133 \</view> 134 \<scrollview style={styles wrapper}> 135 \<view> 136 \<title>{'mission very possible reviews'}\</title> 137 \<papertext>{`ratings average ${ratingsaverage}`}\</papertext> 138 {/ query list /} 139 {queryresults !== null && 140 queryresults !== undefined && 141 queryresults map((result parse object) => ( 142 \<list item 143 key={result id} 144 title={`review text ${result get('text')}`} 145 description={`rate ${result get('rate')}\nfrom app ${ 146 result get('fromapplication') !== undefined ? 'yes' 'no' 147 }`} 148 titlestyle={styles list text} 149 style={styles list item} 150 /> 151 ))} 152 {queryresults === null || 153 queryresults === undefined || 154 (queryresults !== null && 155 queryresults !== undefined && 156 queryresults length <= 0) ? ( 157 \<papertext>{'no results here!'}\</papertext> 158 ) null} 159 \</view> 160 \<view> 161 \<title>action buttons\</title> 162 \<paperbutton 163 onpress={() => rungetmovieaveragerating()} 164 mode="contained" 165 icon="search web" 166 color={'#208aec'} 167 style={styles list button}> 168 {'calculate review average'} 169 \</paperbutton> 170 \<paperbutton 171 onpress={() => rungetmemovieaveragerating()} 172 mode="contained" 173 icon="search web" 174 color={'#208aec'} 175 style={styles list button}> 176 {'calculate me movie review average'} 177 \</paperbutton> 178 \<paperbutton 179 onpress={() => doreviewquery()} 180 mode="contained" 181 icon="search web" 182 color={'#208aec'} 183 style={styles list button}> 184 {'query reviews'} 185 \</paperbutton> 186 \</view> 187 \<view> 188 \<title>add new review\</title> 189 \<papertextinput 190 value={reviewtext} 191 onchangetext={text => setreviewtext(text)} 192 label="text" 193 mode="outlined" 194 style={styles form input} 195 /> 196 \<papertextinput 197 value={reviewrate} 198 onchangetext={text => setreviewrate(text)} 199 keyboardtype={'number pad'} 200 label="rate (1 5)" 201 mode="outlined" 202 style={styles form input} 203 /> 204 \<paperbutton 205 onpress={() => createreview()} 206 mode="contained" 207 icon="plus" 208 style={styles submit button}> 209 {'add'} 210 \</paperbutton> 211 \</view> 212 \</scrollview> 213 \</> 214 ); 215 }; 216&#x9; 217 // these define the screen component styles 218 const styles = stylesheet create({ 219 header { 220 alignitems 'center', 221 paddingtop 30, 222 paddingbottom 50, 223 backgroundcolor '#208aec', 224 }, 225 header logo { 226 height 50, 227 width 220, 228 resizemode 'contain', 229 }, 230 header text { 231 margintop 15, 232 color '#f0f0f0', 233 fontsize 16, 234 }, 235 header text bold { 236 color '#fff', 237 fontweight 'bold', 238 }, 239 wrapper { 240 width '90%', 241 alignself 'center', 242 }, 243 list button { 244 margintop 6, 245 marginleft 15, 246 height 40, 247 }, 248 list item { 249 borderbottomwidth 1, 250 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 251 }, 252 list text { 253 fontsize 15, 254 }, 255 form input { 256 height 44, 257 marginbottom 16, 258 backgroundcolor '#fff', 259 fontsize 14, 260 }, 261 submit button { 262 width '100%', 263 maxheight 50, 264 alignself 'center', 265 backgroundcolor '#208aec', 266 }, 267 }); 렌더링 및 쿼리 함수 중 하나로 쿼리한 후 컴포넌트가 어떻게 보여야 하는지입니다 결론 이 가이드의 끝에서, parse cloud code 함수 검증기 및 컨텍스트를 사용하는 방법을 배웠습니다 다음 가이드에서는 parse에서 사용자와 작업하는 방법을 배울 것입니다