인증과 인가에 대한 개념을 배우고 어떻게 백엔드와 프론트엔드가 서로 소통하고 data를 주고 받는지에 대한 이론을 배우고 막연하게만 이해하고 있었던 와중,, 드디어 오늘 로그인 & 회원가입 실습 프로젝트를 했다.
처음으로 백엔드와 발을 맞춰보는 시간이라 매우 설렜다,,🥰
😎 프로젝트 목표
프론트-백엔드가 직접 소통하여 화면에서 id/pw를 입력하여 회원가입을 성공시킨다.
또한 로그인 API 주소로 변경 후 방금 가입한 id/pw로 로그인을 성공시킨다.
로그인 성공 후 백엔드로부터 토큰을 전달받아 local storage에 저장한다.
📗 준비사항
👉 프론트 엔드 : 로그인 폼, ip주소 요청 및 응답 받아오는 코드 작성
👉 백엔드 : ip 주소 및 적절한 형식의 data, access token
총 세명(프론트엔드 두명, 백엔드 한명)으로 팀을 구성하여 실습을 진행하였다.
🚀 실습 진행되는 과정
- 유저가 이메일을 입력. Email input의 onChange이벤트 핸들러에 연결된 함수 실행
- 함수에서 email input의 value를 setLoginInfo 함수를 통해 업데이트 한다.
- 유저가 비밀번호를 입력. Password Input의 onChange 이벤트 핸들러에 연결된 함수 실행
- 함수에서 password input의 value를 setLoginInfo 함수를 통해 업데이트 한다.
- Button을 클릭하면 폼에 있는 onSubmit 이벤트 핸들러에 연결된 함수 실행
- 함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보낸다.
- server에서 인증/인가 과정을 거친 후의 결과를 응답(Response)으로 보내준다.
- 응답의 결과에 따라 Main 페이지로 이동하거나 에러 메세지를 띄운다.
✒️ 기본적인 코드 틀
fetch("API 주소", {
method: "POST",
body: JSON.stringify({
email: id,
password: pw,
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));내가 작성한 코드
회원가입
const createUser = () =>{
fetch('http://10.58.2.11:8000/users/signup', {
method : 'POST',
body : JSON.stringify({
name : name,
number : number,
email : id,
passwrd : password,
})
})
.then(res =>{
if(res.ok) alert('회원가입 성공!')
throw new Error('네트워크 오류입니다.')
return res.json()}
.then(result => console.log(result)}
.cathc((error) => console.error(error.message)));
회원가입 후 로그인 할 경우(인증)
// Login Handling - go to the main page when logged in
const submitLoginInfo = ()=> {
// get user's info
fetch('http://10.58.2.11:8000/users/signin', {
method: 'POST',
body: JSON.stringify({
email: id,
password: password,
}),
})
.then(res => {
if(res.ok){if (window.confirm('로그인 하시겠습니까?')) { navigate('../Hyojeong/main', { replace: false });} else {
throw new Error('네트워크 오류입니다.')
return res.json()})
.then(result => {
if (result.access_token) {
localStorage.setItem('wtw-token', result.access_token);
}
}
})
.catch(() => console.error(error.message)));
};
로그인 후 다른 활동하기 (인가)
로그인 후 게시글을 올린다고 가정
👉 정보 요청을 할 때 header에 보유하고 있던 access token도 묶어서 함께 보여줘야함!
const createPost = () => {
fetch('http://10.58.1.132:8000/post/posting', {
method: 'post',
headers: {
Authorization: localStorage.getItem('wtw-token'),
},
body: JSON.stringify({
post: post.post_content,
image_url: post.image_url,
}),
}).then(res => {
if (res.ok) {
alert('등록완료');
navigator('/main-hyojeong');
}else {
alert('네트워크 오류');
}).catch(() => console.error(error.message));
};🚨 에러 처리하기
처음에는 무엇때문인지 오류가 계속 났다.
오류가 나면 일단 당황하지 말고 console.log(result)를 적어줌으로써 정확히 어떤 오류인지 파악을 해주어야한다.
👉 백엔드가 상황에 따라 설정해준 오류가 뜨면 (key값 오타 혹은 username, password 타입오류) 400 Error,
👉 상황 밖의 오류가 떴지만 server상의 문제일 경우 500 Error,
👉 애초에 fetch 자체를 실패하면(API 주소 기입 오류, 네트워크 오류 등) 404 Error 등이 뜬다.
이 때 프론트와 백 사이의 각각의 문제점 등을 파악해주면서 에러를 해결해나갈 수 있다.
++ 추가로 에러메세지 띄워주기!
if (result.message === 'fail') console.error(`Error : ${result.message})
에러 시 checklist
404 Error의 경우(연결 자체가 안될 때)
✔️ 동일한 WIFI 를 사용하고 있는지 확인.
✔️ fetch 함수가 실행이 되는지 확인.
✔️ API 주소에 http://10.58.8.116:8000/users/signup 과 같이 http:// , IP주소 , 포트번호 , 엔드포인트 다 작성이 잘 되었는지 확인.
✔️ 백엔드 IP 주소 재확인.
✔️ 백엔드 서버가 열려 있는지 확인.
401Error, 500 Error 혹은 그 외의 경우들 (연결은 되었지만, 원하는 응답이 오지 않고 에러가 날 때.)
✔️ fetch 함수의 syntax 확인.
✔️ body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.
✔️ body 에 key 값이 올바르게 들어갔는지 확인.
처음에 로그인 후 fetch로 정보를 받았을 때 key를 실수로 잘못 입력해서 오류가 났다. 그 이후로는 server쪽에서의 타입 오류 등의 실수로 인해 계속 오류가 뜨다가 콘솔로그로 계속 오류 찍어보면서 확인하고 나서 겨우 성공 했다고 한다,,,⭐️
로그인 성공 후 토큰 받기!
위의 코드에
if (result.access_token) {
localStorage.setItem('wtw-token', result.access_token);}라고 적힌 부분이 있는데, 로그인을 성공하고 나면 백엔드 내에서 data 내에 저장해준 token을 user에게 보내준다. token을 받으면 바로 localStorage에 저장을 해줌으로써 로그인을 다시 하지 않아도 되게끔 해준다!
🍯 마무리
늘 Mock data 가져와서 가상으로 백엔드와의 작업을 홀로 해보다가 처음으로 백엔드와 합을 맞춰보니 아 정보가 이렇게 오고가는구나 신기하고 재밌었다. 다음 주 프로젝트도,, 좀 더 upgrade 된 버전으로 잘 할 수 있기를,,, 화이또,,,,⭐️
