처음으로 BE분들과 함께하는 실습.
뭔가 주고 받을 수 있었던게 신기했던 시간들이었다.
해당 실습의 학습목표는 무엇이었는지 살펴보자. ☺️
🚀 학습 목표
- 로그인 과정에서 일어나는 프론트엔드, 백엔드 간 통신 흐름을 설명할 수 있다.
- Access Token 과 JWT의 개념을 이해하고 설명할 수 있다.
- (프론트) 백엔드에서 전달 받은 Access Token을 프론트 단에서 어떻게 관리하는지 설명할 수 있다.
- (프론트) fetch 함수의 구조를 이해하고, 이를 이용하여 서버에 HTTP 요청을 보낼 수 있다.
- (백엔드) 코드를 직접 치기 전에 Postman 을 사용해서 백앤드 API 호출 테스트를 해볼 수 있다.
목표를 파악했다면, 이제 해당 목표를 이루기 위해 진행되어야 할 실습에 대해 알아보자.
🙆♂️🙋♀️ 실습 진행 방식
- 팀을 서로 확인 합니다.
- 만나기 전에 프론트, 백엔드는 각자 로그인 & 회원가입 작업을 할 수 있도록 관련 코드를 준비합니다.
- 프론트-백엔드가 직접 소통하여 화면에서 id / pw 를 입력하여 회원가입을 성공 시킵니다.
- 이번에는, 회원가입 API 주소로 변경 후 방금 가입한 id / pw 로 로그인을 성공 시킵니다.
(해당 사진들은 제가 직접 통신할때 남겨놓은 캡쳐가 없어서 세션 녹화된것을 캡쳐하여 첨부하였음을 알려드립니다.)
우선 로그인 페이지 코드를 준비하고, fetch를 준비시켰다.
우리는 default 값인 GET method가 아닌, POST였기 때문에 body에 들어갈 내용도 채워야 했다.
key, value는 FE에서 임의로 정하는게 아니기 때문에 BE 개발자님으로 부터 emial과 password라는 이야기를 전달 받고나서 body부분을 채울 수 있었다.
처음에는 signin과 singup 두개의 api주소를 알려주셔서, fetch를 두개 만들고 각각하나씩 aip를 주었는데, 사실 하나의 fetch를 만들고 end point만 필요한 순간마다 수작업으로 변경하면 되는 것 이었다.
ID에는 @ 포함, PW에는 특수문자 & 숫자 & 글자 를 포함하여 총 8자 이상이 들어가야한다고 BE개발자님한테 전달을 받고 signup을 하였다.
개발자 도구의 network를 보니, status가 failed이 되었고, BE개발자님도 따로 받은게 없다고 하셔서 어리둥절 했었다. 알고보니 endpoint가 잘못되어 있어서 아예 통신이 안된 경우였다. 흑흑.
그리고 나중에 이 부분을 수정하고 signup을 진행, PW에 들어가야 하는 특수문자 등 해당사항을 지키지 않은채 오류를 내보기도 했는데 그랬더니 역시나 에러!가 떴다. :) 계획대로 되었다!
세번째는 id & pw에 지켜야 할 것들으르 지키고 signupd을 해보았더니 201로 성공!
네번째는 BE분이 주신 계정으로 로그인을 하였고, 성공하였다. 똑같이 201번대를 전달받았다.
마지막으로 우리가 로그인에 성공하면 BE로 부터 받는 token을 가지고 있을 경우, main page로 이동하고
만약 아니라면 '아이디/비밀번호를 다시 입력해주세요!'라는 경고창이 뜨도록 설정하였다.
handleLogin = () => {
fetch('BE로 부터 받은 api주소 입력', {
//주소는 end point가 signup/signin 두개를 받을 예정,
method: 'POST', //default값으로는 GET이며 GET일 경우엔 따로 body요청 없음
body: JSON.stringify({
email: this.state.id, // key: value 가 들어가야하는데 이 부분은 BE와 합의된 것으로 적어야 한다
password: this.state.pw,
}),
})
.then(response => response.json())
// .then((result) => console.log('결과: ', result))
.then(response => {
if (response.token) {
localStorage.setItem('token', response.token);
this.props.history.push('/');
}
else {
alert('아이디/비밀번호를 다시 입력해주세요!');
}
})
}나의 결과물! (첫날 하고 혼자해보고 싶어서 다 지우고 다시 진행해 보았다. 역시 작은 실수로 겔겔거렸지만 짱짱도현님의 매의 눈을 통해 수정 완료하였다.)
