회원가입 및 로그인 시 사용자가 입력한 값을 서버에 보내려면 POST 요청을 보내야 한다.
로그인 버튼 클릭 시(form submit 시) 실행되는 함수에 fetch 함수를 넣어주어 input에 입력받은 id와 password를 서버로 보낸다.

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

fetch 함수

fetch(API 주소, HTTP 통신에 관한 내용)

fetch 함수는 인자를 2가지 받는다.

1. 첫 번째 인자: API 주소
   API 주소는 백엔드 측에서 전달받아야 한다.
   http:// , IP주소 , 포트번호 , 엔드포인트
   ex) http://10.58.8.116:8000/users/signup

2. 두 번째 인자: HTTP 통신에 관한 내용

{
  method: "POST",
  body: JSON.stringify({
    email: id,
    password: pw,
  }),
}

• method에는 GET, POST, PATCH 등 HTTP method를 입력한다.
  • fetch() 함수에서 default method는 GET이다. 즉 method를 입력하지 않으면 GET 요청을 보낸다.
• body에는 JSON 형태로 주고 받을 데이터를 넣는다.
  통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에 JSON.stringify() 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환해준다.

HTTP 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기로 처리한다. JS에서 비동기를 처리하는 문법으로 Promise 객체가 있다. fetch 함수는 Promise 객체를 리턴한다. then() 메서드는 Promise 객체에 사용할 수 있는 메서드이다. 위 예제 코드를 보면, then() 메서드를 fetch 함수의 실행 결과에 체이닝하고 있는데, 이는 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메서드의 액션을 실행하라는 의미이다.

즉, fetch() 함수는 서버에서 전달받은 Promise 객체를 리턴하고, 리턴된 객체를 then 메서드에서 인자로 받는다.

.then((response) => response.json())

첫 번째 then에서는 서버에서 보내준 response를 Object 형태로 변환한다.

.then((result) => console.log("결과: ", result));

두 번째 then에서는 object로 변환한 response를 console.log로 확인한다.

then() 메서드에서의 분기 처리

첫 번째 then()

백엔드에서 응답 body를 안 주는 경우도 많다. 응답 body로 JSON 데이터를 주지 않는데 프론트에서 Response Object의 json()을 호출하면 에러가 난다.
다음과 같은 상황을 생각해보면 된다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
    2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
        {
            success: false,
            message: "권한이 없습니다"
        }

이런 경우에는 첫 번째 then()에서 분기 처리해서 필요한 경우에만 json()을 호출한다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "seoltang",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

두 번째 then()

json()을 호출한 다음에 필요한 분기 처리는 두 번째 then()에서 한다.
서버의 Response message에 따라 사용자에게 알려줄 수 있도록 분기 처리하는 것이 좋다.

fetch("API 주소", {
  method: "POST",
  body: JSON.stringify({
    email: id,
    password: pw,
  }),
})
  .then((response) => response.json())
  .then((result) => {
    if(result.message === 'EMAIL_ALREADY_EXISTS') {
      alert('이미 있는 계정입니다.');
    } else if (result.message === 'INVALID_PASSWORD') {
      alert('비밀번호를 확인해 주세요.');
    } else {
      navigate('/main');
    }
  })