기다리고 기다리던 백엔드분들과 교류하는 시간이 왔다!
(tmi 리얼로 제일 기대했던 시간이었다.)

✔ fetch 함수 Check List

✔ 프론트도 통하고 백엔드도 통하는 json 파일로 연락을 해야하는데,
꼭 string화 해주어야 한다 ❗
ex) JSON.stringify() 메서드를 활용하여 js object에서 string화 해주어야한다.
(기억하자 너도나도 통해야 통신이 된다는 것을.)

✔ API 주소가 정확히 맞는지
(다른 집으로 가면 안돼잖아요~😉)

✔ body key 값과 value에 있는 state가 맞는지.

✔ fetch 함수를 잘 작성했는지 (비동기 함수) => 통신을 위한 함수.

✔ 메서드를 상황에 맞게 잘 사용했는지 : body에 정보가 있는 경우로 POST를 사용했다.

간단히 로직을 설명하면 input ID,PW 칸에 onchange event가 실행되면 버튼이 활성화 되고 클릭 했을 때 onClick 이벤트 함수가 실행된다.

바로 이 때 fetch 함수를 통해 sever에 요청을 보낸다.
server에서 인증&인가를 거친 후 결과를 응답 res(response)로 보내주게 되고 그 결과에 따라서 Main 페이지 이동과 그 이외 유저에게 알림창을 띄우게 된다!

첫통신에 성공한 코드이다 :-)

const goMain = () =>{
 fetch('API주소'){
 method:'POST',
 body: JSON.stringify({
   email: inputIdText,
    password: inputPwText,
  }),
})
.then(res => res.json())
 .then(data => { if ('access_token' in data) {
     navigate('/main-seul);
  } else { console.log (data.messate);
  }
 });
};

버튼 클릭시 onClick 이벤트가 발생하고 즉시 goMain이라는 함수가 실행되어 메인으로 이동 시켜준다.
(여기서 문제점은 그 해당 조건에 맞으면 다 메인 페이지로 이동한다 Oops🤦‍♀️)

여기서 인증&인가를 통해 메인 페이지가 이동유무가 결정된다 👍
만약 access 가 되지 않는 경우 그에 따른 state 값을 보여준다.

✍ fetch 함수가 어떻게 쓰이는지 또 어떤 조건을 꼼꼼하게 체크해야 하는지 배웠다.
또한,개발자도구에서 network가 왜 중요한지 몸소 느꼈던 순간이기도 했다.(중요하다고는 배웠지만 실제로 들어간적은 드물어서 .....😒)

그래도 가장 중요하게 배운 것은 백엔드분들과의 소통이었다.
지금은 간단한 로직이지만, 점점 구현되는 것이 많아지고 로직이 복잡해지면 그만큼 처리해야 할 데이터가 많아질 것이다.그 전에 백엔드분들과 많은 대화를 통해 능률을 올리는 것이 중요하다고 생각이 들었다.