색감이 예뻐서 갖다 붙인 post box image ㅋㅋㅋ 근데 우리가 쓸 프로그램인 postman은 이렇게 예쁘게 생기진 않았다 투박쓰~
postman 검색하고 다운로드 고고! 분명 지난번에 깔았는데 우분투의 문제인지 뭔지 파일이 보이지 않아서 다시 깔았다 ㅡㅡ 우분투 너이자식… 여튼 postman은 백에서 개발한 api를 테스트하고 프론트 영역으로 넘길 때 활용도가 높은 프로그램이다.
로그인
젤 앞의 탭은 ‘POST’로 설정해주고 백에서 만든 url을 입력 저 url의 end point를 항상 정확하게 입력해야 한다! 기본중의 기본! 여튼 바디에 객체 형식으로 아이디와 비밀번호를 써준다. key값은 백에서 설정한 그 값을 쓰면 된다.
send를 누르면 SUCCESS라는 메시지가 뜨게 된다! 만약에 같은 아이디로 한번 더 시도하게 되면…
오 신기방기 이미 있는 아이디라고 뜬다. 만약에 이 message가 “same ID exists”라면 “존재하는 아이디 입니다. 다른 아이디를 입력해주세요.” 라는 문구가 뜨는 이런 식의 함수를 프론트에서 만들수 있는 거다 ㅋㅋㅋㅋ 넘나 신기!!!
그 밖에도…
- 비번 틀릴때
- 아이디 틀릴때
로그인 성공시 토큰 발행
위의 과정을 거쳐 로그인을 성공하게 되면 토큰이 발급되는데…
다시 로그인 시 토큰의 뒷자리가 바뀜! 토큰을 잘 보면 앞자리는 동일한데 뒤의 어느 구간부터 값이 바뀐다. 뒷부분이 중요하다는 말씀..!
여튼 우리는 이렇게 발급받은 액세스 토큰을 가지고 토큰 해석해주는 사이트에 들어갈 것이다 주소창에 jwt.io 를 치시오. 존맛탱 아님… JWT입니다
좌측에 입력한 토큰 값을 우측에서 해석해주는데 넘나 신기하다 ㅋㅋㅋ 여튼 우리가 만든 토큰인지 남이 만든 토큰인지 확인과정을 거치고 이 정보를 또 저장해야하는데…
만약에 리액트앱에서 토큰을 가지고 있으면, 새로고침시 토큰 정보들도 모두모두 안녕~~~ 일반적으론 브라우저에 저장하는데 세 가지 방법이 있다.
- 로컬스토리지에 저장
- 세션에 저장(창 끄면 사라짐)
- 쿠키(해당 날짜가 지나면 사라짐)
쿠키가 뭣인지도 모르고 주기적으로 쿠키 지우기를 해줬는데..날짜에 따라서 정보를 저장해주는 녀석이였군!!! 세션땐 이런 쏠쏠한 정보들을 알게 될 때마다 넘 뿌듯하다~
로컬스토리지는 다음번에 다시 정리 해보도록 하고..! 이번엔 코멘트도 함 날려보자!
코멘트 보내기
로그인이 성공했다는 전제 하에 진행하는 거라서 Headers에 들어가서 Key에는 Authorization이라고 쓰고, value에는 로그인시 발급받은 액세스 토큰을 입력해준다.
이렇게! 그 담에는 body에 또 객체 형태로 message 남겨본다! 그럼 내가 보낸 이 메시지들이 백으로 넘어가는거다. 넘나 씐기씐기!!!
signup 하기
일단 signup button에 뭔가를 해줘야겠지요?
value = "Register" onClick={}
이런식으로 설정을 해준 다음…
render 전에 signup 함수를 작성해줍니다!
signup = () => {
fetch()
};보통 fetch로 받아오긴 하는데 최신 문법인 비동기로 받아오면 좀 더 편리쓰~ (async, await : 데이터를 받아오는데 언제 올지 모르는 것에 적용 가능한 함수)
signup = async() => {
const response = await fetch('http://10.58.4.72:8000/signup', {
method:'POST',
body:JSON.stringify({
user_id: 'test123',
password: 'good'
})
})
const result = await response.json()
console.log(result)
if (result.message === 'same ID exists') {
alert('이미 존재하는 아이디입니다. 다시 가입해주세요.')
} else if (result.message === "SUCCESS") {
alert('환영합니다. 가입되었습니다!')
this.props.history.push('/login')
}
};세션 들으면서 썼던 코드라 indent가 맘에 안 들긴 하지만 여튼… 이렇게! 위의 코드 마지막줄에 props.history.push가 있는데 props를 선언 안해줘도 되는지가 궁금했는데, class에 기본 변수로 들어오기 때문에 props를 따로 선언 안해줘도 된다고 한다! 넘나 씐기 씐기
Router에서 인자를 어떻게 넘기는지에 대해선 아래의 링크에 잘 나와있다 나의 사랑 우리모두의 사랑 stack overflow ~♬ 내 스택에서만 일어나지 말아라.
여튼 전체 코드를 보자면…
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './Signup.scss';
import Logo from './logo.png';
import {Link} from 'react-router-dom';
class Signup extends Component {
singup = async () => {
const response = await fetch('http://10.58.4.74:8000/signup', {
method: 'POST',
body: JSON.stringify({
user_id: '12341234sdfsdfsfsdfsd',
password: 'good'
})
});
const result = await response.json();
console.log(result)
console.log('sdfsdf')
if (result.message === 'same ID exists') {
alert('이미 있는 아이디 입니다!! 다시 가입 해주세요.')
} else if (result.message === 'SUCCESS') {
alert('환영합니다!! 가입 되었습니다!!!')
this.props.history.push('/login');
}
};
render() {
return (
<div className="signup-page">
<article className="signup-content">
<div className="input-wrap">
<div className="signup-header">
<Link to="/"><img className="signup-logo" src={Logo} alt="logo_img"></img></Link>
</div>
<div className="signup-info">
<div className="signup-title">Register.</div>
<div className="signup-subtitle">Enter your email to create an account.</div>
</div>
<div className="signup-form">
<input type="email" placeholder="Please enter your Email" maxLength="30"/>
<input type="password" placeholder="Your Password" maxLength="8"/>
<input type="password" placeholder="Your Password" maxLength="8"/>
<input
type="button"
className="signup-btn"
value="Register"
onClick={this.singup}
/>
</div>
</div>
</article>
</div>
);
}
}
export default withRouter(Signup);이렇게 signup 함수 간단하게 완성쓰! 코드가 길어서 복잡해 보일수도 있지만 원리만 생각하면 간단하다!
다음 프로젝트 때는 내가 signup page를 맡게 될텐데 그 때가서 헷갈리지 말고 잘 했음 좋겠다!