TIL 25 | 로그인 & 회원가입 - Fetch 함수

Soojeong Lee·2021년 7월 1일

Fetch

fetch 함수를 이용한 회원가입 & 로그인 구현

: 프론트엔드와 백엔드는 데이터를 주고 받지 않을 때는 완전하지 않다. 따라서 데이터를 주고 받는 것에 대해 React에서 어떻게 처리할까?

1. 전체적인 흐름

onChange를 통해 변화한 value를 입력한다.
state(defualt 값)에서 변화한 value를 setSate를 통해 업데이트 한다.
1번 반복
2번 반복
onClick 이벤트 발생
fetch 함수를 통해 서버로 input에 받은 정보(value)를 Request 한다.
서버에서 Respopnse 한다.
서버에서 Response 한 값에 따라 메인페이지 이동 혹은 alert 를 띄운다.

2. fetch 함수 기본 형태

fetch 함수는 HTTP 통신을 할 때 사용되는 함수이다.

첫 번째 인자는 API 주소, 두 번째 인자는 HTTP 통신을 할 때 활용되는 내용이다.

//기본 형식
fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

// 아래는 더 구체적인 예시 !
     //⬇️첫번째 인자   ⬇️ 두번째 인자(오브젝트)
fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id, // 변경 가능
        password: this.state.pw, // 변경 가능
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result)); // console.log의 위치에 실행하고 싶은 함수를 적어두면 된다 :)

1. method

GET : 서버에서 데이터를 불러올 때
➡️ fetch() 함수에서 default method는 get
POST : 프론트에서 서버에게 처리해야 할 데이터를 전송해야 할 때

2. JSON.stringify()
: Object에서 String 형태로 변환해주는 메소드이다.
: http를 통해 데이터를 주고 받을 때는 string 형태로 바꿔야 한다.

3. .then()
통신은 다른 로직에 비해 오래 걸리기 때문에 비동기 처리돼서 then 메서드를 사용한다.

➡️ then((response) => response.json())
: 서버에서 보내준 response를 Object 형태로 변환한다.
: 첫 번째 then 함수에 전달된 인자 response는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다. Response Object라고 부른다
➡️ .then((result) => console.log("결과: ", result));
: console.log의 위치에 실행하고 싶은 함수를 적어두면 된다.

❗️ 백앤드에서 응답 body를 안 주는 경우도 많다. 출처: 예리님 블로그

설명: 유저를 저장한다.
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: "권한이 없습니다"
       }

fetch ⬇️

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