리액트 네이티브에서 Parse를 통한 사용자 등록 구현 가이드

리액트 네이티브 사용자 등록 소개 많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다 parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 parse user라는 전문 사용자 클래스를 제공합니다 이 가이드에서는 parse user parse user 클래스를 사용하여 리액트 네이티브 앱을 위한 사용자 등록 기능을 만드는 방법을 배울 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 리액트 네이티브 앱이 생성되고 back4app에 연결됨 목표 리액트 네이티브 앱을 위한 parse를 사용하여 사용자 등록 기능을 구축하는 것입니다 1 가입 방법 이해하기 parse 사용자 관리는 parse user parse user 객체 유형을 사용하며, 이는 기본 parseobject parseobject 유형을 확장하고, current current 및 getusername getusername , 같은 고유한 도우미 메서드를 포함하여 앱 전반에 걸쳐 사용자 데이터를 검색하는 데 도움을 줍니다 parse user parse user 객체에 대해 더 읽으려면 여기에서 공식 문서를 확인하세요 https //parseplatform org/parse sdk js/api/2 18 0/parse user html 이 가이드에서는 signup signup 메서드를 사용하여 새롭고 유효하며 고유한 parse user parse user 객체를 로컬 및 서버에서 생성하는 방법을 배우게 됩니다 이 메서드는 유효한 username username 및 password password 값을 인수로 사용합니다 2 사용자 등록 구성 요소 만들기 이제 기능 구성 요소를 만들어 보겠습니다 이 구성 요소는 우리 앱에서 signup signup 메서드를 호출할 것입니다 먼저, 루트 디렉토리에 userregistration js userregistration js 라는 새 파일을 생성합니다 ( userregistration tsx userregistration tsx typescript를 사용하는 경우) 그리고 필요한 입력 요소( username username 및 password password 입력란을 추가합니다 상태 훅을 사용하여 usestate usestate 를 통해 데이터를 관리합니다 userregistration js 1 import react, { fc, reactelement, usestate } from "react"; 2 import { button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration = () => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 return ( 10 <> 11 \<textinput 12 style={styles input} 13 value={username} 14 placeholder={"username"} 15 onchangetext={(text) => setusername(text)} 16 autocapitalize={"none"} 17 /> 18 \<textinput 19 style={styles input} 20 value={password} 21 placeholder={"password"} 22 securetextentry 23 onchangetext={(text) => setpassword(text)} 24 /> 25 \<button title={"sign up"} onpress={() => {}} /> 26 \</> 27 ); 28 }; 29&#x9; 30 const styles = stylesheet create({ 31 input { 32 height 40, 33 marginbottom 10, 34 backgroundcolor '#fff', 35 }, 36 }); userregistration tsx 1 import react, { fc, reactelement, usestate } from "react"; 2 import { button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration fc<{}> = ({}) reactelement => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 return ( 10 <> 11 \<textinput 12 style={styles input} 13 value={username} 14 placeholder={"username"} 15 onchangetext={(text) => setusername(text)} 16 autocapitalize={"none"} 17 /> 18 \<textinput 19 style={styles input} 20 value={password} 21 placeholder={"password"} 22 securetextentry 23 onchangetext={(text) => setpassword(text)} 24 /> 25 \<button title={"sign up"} onpress={() => {}} /> 26 \</> 27 ); 28 }; 29&#x9; 30 const styles = stylesheet create({ 31 input { 32 height 40, 33 marginbottom 10, 34 backgroundcolor '#fff', 35 }, 36 }); 3 가입 기능 만들기 이제 signup signup 메서드를 호출할 가입 기능을 만들 수 있습니다 javascript 1 const douserregistration = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 // since the signup method returns a promise, we need to call it using await 6 return await parse user signup(usernamevalue, passwordvalue) 7 then((createduser) => { 8 // parse user signup returns the already created parseuser object if successful 9 alert alert( 10 'success!', 11 `user ${createduser getusername()} was successfully created!`, 12 ); 13 return true; 14 }) 15 catch((error) => { 16 // signup can fail if any parameter is blank or failed an uniqueness check on the server 17 alert alert('error!', error message); 18 return false; 19 }); 20 };1 const douserregistration = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 // since the signup method returns a promise, we need to call it using await 6 return await parse user signup(usernamevalue, passwordvalue) 7 then((createduser parse user) => { 8 // parse user signup returns the already created parseuser object if successful 9 alert alert( 10 'success!', 11 `user ${createduser getusername()} was successfully created!`, 12 ); 13 return true; 14 }) 15 catch((error object) => { 16 // signup can fail if any parameter is blank or failed an uniqueness check on the server 17 alert alert('error!', error message); 18 return false; 19 }); 20 }; 참고 새로운 사용자를 생성하는 것은 signup signup 을 사용하여 현재 로그인된 사용자로 만들기 때문에, 사용자가 앱을 계속 사용하기 위해 다시 로그인할 필요가 없습니다 이 함수를 userregistration userregistration 컴포넌트 안에, return return 호출 직전에 삽입하여 호출하고 테스트할 수 있도록 하세요 양식의 가입 버튼 onpress onpress 동작을 () => douserregistration() () => douserregistration() 로 업데이트하고, alert alert 를 react native react native 이제 컴포넌트는 다음과 같아야 합니다 userregistration js 1 import react, { fc, reactelement, usestate } from "react"; 2 import { alert, button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration = () => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 const douserregistration = async function () { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue = username; 12 const passwordvalue = password; 13 // since the signup method returns a promise, we need to call it using await 14 return await parse user signup(usernamevalue, passwordvalue) 15 then((createduser) => { 16 // parse user signup returns the already created parseuser object if successful 17 alert alert( 18 "success!", 19 `user ${createduser get("username")} was successfully created!` 20 ); 21 return true; 22 }) 23 catch((error) => { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert alert("error!", error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 <> 32 \<textinput 33 style={styles input} 34 value={username} 35 placeholder={"username"} 36 onchangetext={(text) => setusername(text)} 37 autocapitalize={"none"} 38 /> 39 \<textinput 40 style={styles input} 41 value={password} 42 placeholder={"password"} 43 securetextentry 44 onchangetext={(text) => setpassword(text)} 45 /> 46 \<button title={"sign up"} onpress={() => douserregistration()} /> 47 \</> 48 ); 49 }; 50&#x9; 51 const styles = stylesheet create({ 52 input { 53 height 40, 54 marginbottom 10, 55 backgroundcolor "#fff", 56 }, 57 }); userregistration tsx 1 import react, { fc, reactelement, usestate } from "react"; 2 import { alert, button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration fc<{}> = ({}) reactelement => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 const douserregistration = async function () promise\<boolean> { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue string = username; 12 const passwordvalue string = password; 13 // since the signup method returns a promise, we need to call it using await 14 return await parse user signup(usernamevalue, passwordvalue) 15 then((createduser parse user) => { 16 // parse user signup returns the already created parseuser object if successful 17 alert alert( 18 "success!", 19 `user ${createduser get("username")} was successfully created!` 20 ); 21 return true; 22 }) 23 catch((error object) => { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert alert("error!", error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 <> 32 \<textinput 33 style={styles input} 34 value={username} 35 placeholder={"username"} 36 onchangetext={(text) => setusername(text)} 37 autocapitalize={"none"} 38 /> 39 \<textinput 40 style={styles input} 41 value={password} 42 placeholder={"password"} 43 securetextentry 44 onchangetext={(text) => setpassword(text)} 45 /> 46 \<button title={"sign up"} onpress={() => douserregistration()} /> 47 \</> 48 ); 49 }; 50&#x9; 51 const styles = stylesheet create({ 52 input { 53 height 40, 54 marginbottom 10, 55 backgroundcolor "#fff", 56 }, 57 }); 4 구성 요소 테스트 마지막 단계는 react native 애플리케이션 내에서 새로운 컴포넌트를 사용하는 것입니다 app js app js 파일 (또는 app tsx app tsx typescript를 사용하는 경우) app js 1 import { userregistration } from " /userregistration"; 2 / 3 your functions here 4 / 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles container}> 9 <> 10 \<text style={styles title}>react native on back4app\</text> 11 \<text>user registration tutorial\</text> 12 \<userregistration /> 13 \</> 14 \</safeareaview> 15 \</> 16 ); 17&#x9; 18 // remember to add some styles at the end of your file 19 const styles = stylesheet create({ 20 container { 21 flex 1, 22 backgroundcolor "#fff", 23 alignitems "center", 24 justifycontent "center", 25 }, 26 title { 27 fontsize 20, 28 fontweight "bold", 29 }, 30 }); app tsx 1 import { userregistration } from " /userregistration"; 2 / 3 your functions here 4 / 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles container}> 9 <> 10 \<text style={styles title}>react native on back4app\</text> 11 \<text>user registration tutorial\</text> 12 \<userregistration /> 13 \</> 14 \</safeareaview> 15 \</> 16 ); 17&#x9; 18 // remember to add some styles at the end of your file 19 const styles = stylesheet create({ 20 container { 21 flex 1, 22 backgroundcolor "#fff", 23 alignitems "center", 24 justifycontent "center", 25 }, 26 title { 27 fontsize 20, 28 fontweight "bold", 29 }, 30 }); 이제 귀하의 앱은 다음과 같아야 합니다 원하는 사용자 자격 증명을 제공한 후, 모든 것이 성공적이라면 가입하기 가입하기 를 누른 후 이 메시지를 볼 수 있습니다 이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다 비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다 결론 이 가이드의 끝에서, react native에서 새로운 parse 사용자를 등록하는 방법을 배웠습니다 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다