fetch

서버랑 통신을할때 이용하는 함수.
서버랑 통신할때 필요한것

데이터를 보낼때는 JSON.stringify() // JSON을 쓴다.

요청(Request) 우리가 보내는것
응답(Response) 우리가 받는것

동기적(Synchronous)
어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식

비동기적(Asynchronous)
어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식

fetch("http://10.58.52.236:8000/users/login",{
method:"POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
email : userid,
password : userpw,
}),
})
.then((res)=>{return res.json()})
.then((data)=>{console.log(data)})

기본적인 예시이다.

fetch 제가배운것중 로그인과 회원가입 화면의 데이터를 받기위해'POST' 방식을 선택하였고 POST는 주고 받는다라는 것으로 알고있다.

  const loginButton = () => {
    fetch("http://10.58.52.127:8000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify({
        email: userid,
        password: userpw,
      }),
    })
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
      });

    navigate("/main");
  };

로그인 버튼이라는 함수에 fetch를 넣어놧고 JSON을 활용하여 js문법으로 변환을 해준다 까지 이해했고 loginButton 이라는 함수가 실행됬을때
email,pssword 라는 키값의 담아 데이터를 넘겨준다 구현하였다.
데이터가 넘어가는것까지 확인하였다

느낀점:첫 연결을 해보았고 여러가지 상황을 생각해보아야겠다. 예를들어서
비밀번호or아이디 틀릴때 사용자한테 알려주는상황, 로그인이 성공했을때 다음구현 상황 navigate를 사용해서 넘겨준다던가 백엔드분과 어떤 키값으로 넘겨주실지 여러가지 상황들이 너무 많아지는거를 확인할수있어고 소통이 굉장히 중요해서 그 가운데 지점을 잘찾아서 맞쳐 가야겠다는 생각을 하였다.