백엔드와 처음으로 같이 한 실습!

그동안 혼자서 열심히 삽질하며 만든 로그인 페이지를 백엔드분들과 함께 서버에 연결하여 실습해보는 시간을 가졌다!
⭐️ Front(웹 페이지 UI) + Back(데이터)

📌 학습목표

주어진 자료를 바탕으로 Front↔Back이 직접 소통하면서 화면에서 id/pw를 입력하여 로그인을 성공시킨다!

🔥 실습 순서

화면에 id, pw 입력하는 input이 있다.
입력 후 "로그인" 버튼을 누르면 Back-End 로그인 API를 호출한다.
👇
<로그인 성공의 경우>
Back : 정상 id/pw 경우에만 access token을 보낸다.
Front : alert로 로그인 완료 메시지를 보여주고 localStorage에 저장한다.
👇
<로그인 실패의 경우>
Back : 어떤 실패인지 msg를 전달한다.
Front : 받은 메시지를 alert로 보여준다.

📌 사전 준비 사항

• 🚀 Front
  • React로 로그인 화면 완료하기
  • 로그인 버튼 누르면, id/pw value로 API 호출할 수 있도록 준비해놓기
• 🚀 Back
  • Django로 로그인 API 구현 완료하기
  • 로그인 성공하면 access token을 response 할 수 있도록

나는 프론트이기 때문에 백엔드분을 만나기 전에 미리 JSON 파일에 연결하는 fetch 함수를 구현해 놓았다! (몹시 중요!! 이번 실습의 핵심 부분)

👇🏻 주어진 fetch 함수 기본 양식

fetch("back-End API주소", {
  method: "POST",
  body: JSON.stringify({
    email: this.state.id,
    password: this.state.pw,
    }),
  })
    .then((response) => response.json())
    .then((result) => console.log("결과: ", result));

이걸 사용해서 Front쪽에서 Back쪽 서버에 연결한다!

👇🏻 나의 fetch 함수

// 화원가입 성공 여부
  signUpFetch = () => {
    fetch('http://10.58.5.217:8000/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        nick_name: 'zzzyk',
        name: '이윤경',
        email: this.state.userId,
        password: this.state.userPw,
        phone_number: '01000000000',
        gender: 'female',
        birth_date: '1999-12-12',
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.token !== undefined) {
          alert('로그인 성공');
          localStorage.setItem('access_token :', result.token);
        } else {
          alert('로그인 실패');
        }
        console.log('결과: ', result);
      });
  };

이 함수를 button부분에 onClick으로 넣었다!

⛱ 내가 겪은 Error

나는 백엔드에 신재님과 짝꿍이 되어 실습을 진행했다!!
멘토님께서 여러가지 에러를 겪어보는 것이 중요하다고 말씀해주셔서 우리가 겪은 에러를 정리해보았다!

⛵️ 로그인 ERROR

신재님이 만들어오신 데이터로 로그인을 해보았다! 그런데 에러가 발생하였다. 띠-용
에러를 하나씩 해결해보았다.

❗️ 404 (Not Found)

API 주소를 잘못 설정한 것이었다ㅠㅠ 앞에 http://를 붙여주니까 해결 완료!

❗️ SyntaxError : unexpected token < in JSON at position 0

 if (result.token === true)  {

데이터 타입이 일치하지 않아서 생기는 에러라고 한다!
(token 값을 boolean이랑 비교하니까 당연히 안될수밖에,,ㅎㅎ)
그래서

if (result.token !== undefined) {

로 변경해주니까 해결 완료!

하지만 이게 끝이 아니었다.

❗️ 400 (Bad Request) KEY-ERROR

이건 내가 value name을 맞춰주지 않아서 생긴 에러였다ㅠㅠ

body: JSON.stringify({
  email: this.state.⭐️userId,
  password: this.state.⭐️userPw, 
}),

fetch 안에 body 부분의 value name을 맞춰주니까 해결 완료!

⛵️ 회원가입 ERROR

❗️ 400 (Bad Request) ALREADY_USER

이건 신재님이 회원가입이 안되는 조건을 걸어두셔서 생긴 에러였다!

<회원 가입이 안되는 조건>

• 핸드폰 번호 중복
• 비밀번호 8자 미만
• 핸드폰 번호가 10-11자리가 아니거나 숫자가 아닐 때

를 걸어 두셨다고 한다!
핸드폰 번호를 다르게 해서 가입하니까 해결 완료!

⛱ access token response

localStorage.setItem('access_token :', result.token);

console.log('결과: ', result);

이 두 줄의 코드로 token 값을 확인해볼 수 있다.

로그인을 성공하면

console창에 저렇게 token 값이 나온다!

⛱ 소감

정말 넘넘 재미있었다!