1.Flow

1. 유저가 이메일을 입력한다.
   Email Input의 onChange 함수가 실행된다.
2. onChange 함수에서 Email Input의 value를 setState를 통해 업데이트 한다.
3. 유저가 비밀번호를 입력합니다.
   Password Input의 onChange 함수가 실행된다.
4. onChange 함수 안에서 Password Input의 value를 setState를 통해 업데이트한다.
5. Button을 클릭하면 onClick 함수가 실행된다.
6. onClick 함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보낸다.
7. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내준다.
8. 응답의 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄운다.

2. fetch 함수

2-1. fetch 함수의 두가지 인자

fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
      })

① api 주소

fetch 함수에서 첫번째 인자는 api주소가 들어가고,

② http 통신에 관한 내용

두번째 인자에는 http 통신에 관한 내용이 들어간다.

• method에는 GET POST PATCH DELETE 등이 들어갈 수 있다.
  ✨ 오늘 해야하는 통신의 경우에는 body에 내용을 담아 전달해야하기 때문에 POST 를 이용해준다.
• 통신을 할 때에는 string 형태의 JSON으로 보내야하기 때문에 JSON.stringify() 라는 method를 활용해서 포맷을 기존의 Object 에서 → string으로 변환해준다.
  
  

2-2. 비동기처리

통신은 다른 로직에 비해 오래 걸리기때문에 비동기처리를 해줘야한다! 🔥

• 첫번째 then 에서는 server에서 보내준 response를 Object 형태로 변환해준다.
  .then((response) => response.json())

• 두번째 then 에서는 object로 변환한 response를 이용해 원하는 로직을 구현해준다.
  .then((result) => this.checkJoinResult(result));

3. 전체코드

회원가입 페이지를 따로 만들지 않아서, 로그인 form 을 활용해 코드를 수정해가며 회원가입과 로그인 통신을 했습니다. 👏🏻

3-1. loginValidate( )

loginValidate = () => {
    fetch("http://10.58.4.000:8000/users", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
        full_name: "saemsol",
        phone_number: "010",
        username: "sam7",
      }),
    })
      .then((response) => response.json())
      .then((result) => this.checkJoinResult(result));
    // .then((result) => this.checkLoginResult(result));
  };

3-2. join 회원가입

checkJoinResult = (result) => {
    console.log(result);
    if (result.message === "ALREADY_SINGUP") {
      alert("이미 우리의 회원입니다! 로그인을 진행해주세요! ✅");
    } else {
      alert("회원가입이 되었습니다 ✨");
    }
  };

3-3. login 로그인

  checkLoginResult = (result) => {
    console.log(result);
    if (result.message === "SUCCESS") {
      localStorage.setItem("token", result.token);
      this.goToMain(); //통신의 응답으로 "SUCCESS" 를 받는다면, 메인페이지로 이동시켜준다! 
    } else {
      alert("우리회원이 아닙니다 🤔");
    }
  };

4. 백엔드와 맞춰야 할 부분

통신이 된다고 해서 바로바로 회원가입과 로그인이 성공하지 못했다.
그래서 계속 콘솔로그로 응답메세지를 확인하면서 프론트와 백엔드 서로가 맞춰주었어야 했던 것들을 수정해가며 통신을 완성시켰다!

ex)

• result.message / result.MESSAGE → 대소문자도!! 똑같아야하고
• If 조건문에서 확인하는 메세지 value 값 도 맞춰야하고
• JSON으로 보내줄때의 key 이름 도 맞춰줘야한다!
• 로그인 할때와 회원가입 할때의 api 주소도 변경해줘야 했다!

5. 회원가입 / 로그인 성공의 순간 💎

5-1. 회원가입

성공적으로 벡엔드 DB에 회원가입 정보가 추가되고, 백엔드에서 "SUCCESS" 메세지를 보내주면 회원가입 성공 알림이 뜬다!

5-2. 같은 정보로 회원가입

방금 가입했던 정보와 똑같이 회원가입을 다시하면, 기존회원이라는 알림이 뜬다!

5-3. 로그인

백엔드 DB와 일치하는 회원정보로 로그인을 하면 메인페이지로 이동할 수 있다! 🥳 🥳 🥳

그리고, 백엔드와 맞춰갔던 과정