회원가입
페이로드
페이로드(payload)는 전송되는 데이터를 의미합니다. 데이터를 전송할 때, 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 됩니다.
이 때, 보내고자 하는 데이터 자체를 의미하는 것이 바로 페이로드입니다. 우리가 택배 배송을 보내고 받을 때, 택배 물건이 페이로드이고, 송장이나 박스, 뾱뾱이와 같은 완충재 등등은 부가적인 것이기 때문에 페이로드가 아닙니다.
json으로 보는 실제 데이터에서의 payload는 아래의 json에서 “data”입니다. 그 이외의 데이터들은 전부 통신을 하는데 있어 용이하게 해주는 부차적인 정보들입니다.
{
"status" :
"from": "localhost",
"to": "http://melonicedlatte.com/chatroom/1",
"method": "GET",
"data":{ "message" : "There is a cutty dog!" }
}https://www.notion.so/d61112fa19984e28b36bcd2fdad2064f
비밀번호를 test001로 하고 회원가입 버튼을 누르니 payload 에러가 났다.
고객의 비밀번호(password) 유효성검사에서 최소 8자를 넘어야했는데 나온 에러였고 8자 이상으로 해주니 페이로드가 잘 넘어간다.
클레이풀 서버에 요청을 보내고 요청을 다 처리한 후(회원가입을 시킨 후)
reponse를 받아왔다.
var Customer = Clayful.Customer;
var payload = {
email: 'email',
password: 'password',
};
console.log("payload",payload); //30번째 줄
Customer.createMe(payload, function(err, result) {
if (err) {
// Error case
console.log(err.code);
}
var data = result.data;
console.log(data); //41번째 줄
});언제 만들어졌는지, 이메일은 무엇인지 등, response를 받아온 것.
회원가입 이후에 로그인 페이지 이동
react-router-dom에서 제공하는 useNavigate Hooks 사용한다.
useNavigate를 연결해준다.
import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import clayful from 'clayful/client-js'
function RegisterPage() {
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");navigate("/가려고하는페이지");로 연결해주면 회원가입 성공하면 로그인 페이지로 이동한다.
중복된 이메일이라서 에러가 나는 경우이다.
회원가입 성공 후 로그인 페이지로 잘 이동한다.
로그인
로그인 UI는 회원가입과 거의 유사해서 가져다 사용하였고 마찬가지로 useState를 사용한다.
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import clayful from 'clayful/client-js'
function LoginPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleEmailChange = (event) => {
setEmail(event.target.value);
}
const handlePasswordChange = (event) => {
setPassword(event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
var Customer = clayful.Customer;
var payload = {
email,
password
};
Customer.authenticate(payload, function(err, result) {
if (err) {
// Error case
console.log(err.code);
}
var data = result.data;
console.log(data);
});
}
return (
<div className='auth-wrapper'>
<h1>로그인.</h1>
<form onSubmit={handleSubmit}>
<input
onChange={handleEmailChange}
placeholder='Apple ID'
type="email"
name="email"
value={email}
/>
<input
onChange={handlePasswordChange}
placeholder='암호'
type="password"
name="password"
value={password}
/>
<p>
Apple ID는 아이튠즈, 앱스토어, 아이클라우드에 로그인할 때 필요하니 꼭 만들어주세요요~!
</p>
<button type='submit' className='btn-register'>로그인</button>
<Link to="register" style={{ color: "gray", textDecoration: "none" }}>
{""}
Apple ID가 없으신가요? 지금 생성.
</Link>
</form>
</div>
)
}
export default LoginPage로그인에 성공하는 경우 고객의 로그인을 필요로 하는 API(*ForMe 시리즈)들에 사용할 수 있는 고객 인증 토큰(token)이 반환된다.
{
"customer": "XJUMY4ZD4PKY",
"token": "<customer-auth-token>",
"expiresIn": 604800
}**customer:** 고객의 고유 ID가 반환된다.**expiresIn**: 인증 토큰이 몇 초 후에 만료되는지 전달된다.**token:** 고객 인증 토큰이 반환된다.
로컬스토리지에 토큰 보관
토큰은 실제로 유저가 로그인이 되어있는지, 유효한 유저인지 , 요청을 날려도 되는지 판단하는 토큰이다. 요청을 날릴 때 사용하므로 브라우저에 토큰을 보관해줄 수 있다.
var data = result.data;
localStorage.setItem("customerUid", data.customer);
localStorage.setItem("accessToken", data.token);
console.log(data);이렇게 로컬스토리지에 저장해줄 코드를 작성해주고 다시 로그인하면 key&value 형태로 저장된다.
로그인 성공 시,main 페이지로 이동
Customer.authenticate(payload, function(err, result) {
if (err) {
// Error case
console.log(err.code);
return; //return이 있어야 아래로 내려가지 않고 멈춘다.
}
var data = result.data;
localStorage.setItem("customerUid", data.customer);
localStorage.setItem("accessToken", data.token);
// console.log(data);
navigate("/"); //메인으로 이동
});회원가입 창과 똑같이 useNavigate Hooks를 이용해 로그인 버튼을 누르면 메인 페이지로 이동하게 해준다.
성공 200~!
