React에서 Parse로 사용자 등록하기: 회원가입 컴포넌트 구현
Parse를 사용한 React의 회원가입 페이지
소개
많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다. Parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 Parse.User라는 전문화된 사용자 클래스를 제공합니다.
이 가이드에서는 Parse.User 클래스를 사용하여 Parse JS SDK로 React 앱의 사용자 등록 기능을 만드는 방법을 배웁니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
- 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 Ant Design 라이브러리를 설정해야 합니다.
목표
React 앱을 위한 Parse를 사용하여 사용자 등록 기능을 구축하는 것입니다.
1 - 회원가입 메서드 이해하기
Parse 사용자 관리는 Parse.User 객체 유형을 사용하며, 이는 기본 ParseObject 유형을 확장하면서 current 및 getUsername, 같은 고유한 도우미 메서드를 포함하여 앱 전반에 걸쳐 사용자 데이터를 검색하는 데 도움을 줍니다. Parse.User 객체에 대해 더 읽으려면 여기 공식 문서에서 확인하세요.
이 가이드에서는 signUp 메서드를 사용하여 새 유효하고 고유한 Parse.User 객체를 로컬 및 서버에서 생성하는 방법을 배우게 됩니다. 이 메서드는 유효한 username 및 password 값을 인수로 사용합니다.
2 - 사용자 등록 구성 요소 만들기
이제 기능 구성 요소를 만들어 보겠습니다. 이 구성 요소는 우리 앱에서 signUp 메서드를 호출할 것입니다. 먼저, src 디렉토리에 UserRegistration.js라는 새 파일을 생성하세요 (UserRegistration.tsx TypeScript를 사용하는 경우) 그리고 필요한 입력 요소(username 및 password 입력을 추가하세요), useState 를 사용하여 상태 훅을 통해 데이터를 관리하세요:
1 import React, { useState, FC, ReactElement } from 'react';
2 import './App.css';
3 import { Button, Divider, Input } from 'antd';
4 const Parse = require('parse/dist/parse.min.js');
5
6 export const UserRegistration: FC<{}> = (): ReactElement => {
7 // State variables
8 const [username, setUsername] = useState('');
9 const [password, setPassword] = useState('');
10
11 return (
12 <div>
13 <div className="header">
14 <img
15 className="header_logo"
16 alt="Back4App Logo"
17 src={
18 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
19 }
20 />
21 <p className="header_text_bold">{'React on Back4App'}</p>
22 <p className="header_text">{'User Registration'}</p>
23 </div>
24 <div className='container'>
25 <h2 className="heading">{'User Registration'}</h2>
26 <Divider />
27 <div className="form_wrapper">
28 <Input
29 value={username}
30 onChange={(event) => setUsername(event.target.value)}
31 placeholder="Username"
32 size="large"
33 className="form_input"
34 />
35 <Input
36 value={password}
37 onChange={(event) => setPassword(event.target.value)}
38 placeholder="Password"
39 size="large"
40 type="password"
41 className="form_input"
42 />
43 </div>
44 <div className="form_buttons">
45 <Button
46 onClick={() => doUserRegistration()}
47 type="primary"
48 className="form_button"
49 color={'#208AEC'}
50 size="large"
51 >
52 Sign Up
53 </Button>
54 </div>
55 </div>
56 </div>
57 );
58 };3 - 가입 기능 만들기
이제 signUp 메서드를 호출할 가입 기능을 만들 수 있습니다:
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 try {
6 // Since the signUp method returns a Promise, we need to call it using await
7 const createdUser: Parse.User = await Parse.User.signUp(usernameValue, passwordValue);
8 alert(
9 `Success! User ${createdUser.getUsername()} was successfully created!`,
10 );
11 return true;
12 } catch (error: any) {
13 // signUp can fail if any parameter is blank or failed an uniqueness check on the server
14 alert(`Error! ${error}`);
15 return false;
16 };
17 };참고: 새로운 사용자를 생성하는 것은 signUp 을 사용하여 현재 로그인된 사용자로 만들기 때문에 사용자가 앱을 계속 사용하기 위해 다시 로그인할 필요가 없습니다.
이 함수를 UserRegistration 컴포넌트 안에, return 호출 직전에 삽입하여 호출하고 테스트할 수 있도록 하세요. 양식의 가입 버튼 onClick 동작을 () => doUserRegistration(). 이제 컴포넌트는 다음과 같아야 합니다:
1 import React, { useState, FC, ReactElement } from 'react';
2 import './App.css';
3 import { Button, Divider, Input } from 'antd';
4 const Parse = require('parse/dist/parse.min.js');
5
6 export const UserRegistration: FC<{}> = (): ReactElement => {
7 // State variables
8 const [username, setUsername] = useState('');
9 const [password, setPassword] = useState('');
10
11 // Functions used by the screen components
12 const doUserRegistration = async function (): Promise<boolean> {
13 // Note that these values come from state variables that we've declared before
14 const usernameValue: string = username;
15 const passwordValue: string = password;
16 try {
17 // Since the signUp method returns a Promise, we need to call it using await
18 const createdUser: Parse.User = await Parse.User.signUp(usernameValue, passwordValue);
19 alert(
20 `Success! User ${createdUser.getUsername()} was successfully created!`,
21 );
22 return true;
23 } catch (error: any) {
24 // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25 alert(`Error! ${error}`);
26 return false;
27 };
28 };
29
30 return (
31 <div>
32 <div className="header">
33 <img
34 className="header_logo"
35 alt="Back4App Logo"
36 src={
37 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
38 }
39 />
40 <p className="header_text_bold">{'React on Back4App'}</p>
41 <p className="header_text">{'User Registration'}</p>
42 </div>
43 <div className='container'>
44 <h2 className="heading">{'User Registration'}</h2>
45 <Divider />
46 <div className="form_wrapper">
47 <Input
48 value={username}
49 onChange={(event) => setUsername(event.target.value)}
50 placeholder="Username"
51 size="large"
52 className="form_input"
53 />
54 <Input
55 value={password}
56 onChange={(event) => setPassword(event.target.value)}
57 placeholder="Password"
58 size="large"
59 type="password"
60 className="form_input"
61 />
62 </div>
63 <div className="form_buttons">
64 <Button
65 onClick={() => doUserRegistration()}
66 type="primary"
67 className="form_button"
68 color={'#208AEC'}
69 size="large"
70 >
71 Sign Up
72 </Button>
73 </div>
74 </div>
75 </div>
76 );
77 };또한 레이아웃 스타일을 완전히 렌더링하기 위해 다음 클래스를 App.css 파일에 추가하세요:
1 html {
2 box-sizing: border-box;
3 outline: none;
4 overflow: auto;
5 }
6
7 *,
8 *:before,
9 *:after {
10 margin: 0;
11 padding: 0;
12 box-sizing: inherit;
13 }
14
15 h1,
16 h2,
17 h3,
18 h4,
19 h5,
20 h6 {
21 margin: 0;
22 font-weight: bold;
23 }
24
25 p {
26 margin: 0;
27 }
28
29 body {
30 margin: 0;
31 background-color: #fff;
32 }
33
34 .container {
35 width: 100%;
36 max-width: 500px;
37 margin: auto;
38 padding: 20px 0;
39 text-align: left;
40 }
41
42 .header {
43 align-items: center;
44 padding: 25px 0;
45 background-color: #208AEC;
46 }
47
48 .header_logo {
49 height: 55px;
50 margin-bottom: 20px;
51 object-fit: contain;
52 }
53
54 .header_text_bold {
55 margin-bottom: 3px;
56 color: rgba(255, 255, 255, 0.9);
57 font-size: 16px;
58 font-weight: bold;
59 }
60
61 .header_text {
62 color: rgba(255, 255, 255, 0.9);
63 font-size: 15px;
64 }
65
66 .heading {
67 font-size: 22px;
68 }
69
70 .form_wrapper {
71 margin-top: 20px;
72 margin-bottom: 10px;
73 }
74
75 .form_input {
76 margin-bottom: 20px;
77 }
78
79 .form_button {
80 width: 100%;
81 }이제 귀하의 앱은 다음과 같아야 합니다:
원하는 사용자 자격 증명을 제공한 후, 가입하기 버튼을 눌렀을 때 모든 것이 성공적이었다면 이 메시지를 볼 수 있습니다:
이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다:
비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다:
결론
이 가이드의 끝에서, React에서 새로운 Parse 사용자를 등록하는 방법을 배웠습니다. 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다.