TIL.37 fetch() 함수로 로그인하기

출저

• 위코드 수업자료

fetch() 함수

• 백앤드로부터 데이터를 받아오기 위해 api를 호출하고 데이터를 응답받는다. 이때 js 안에서 쓰는 함수가 fetch()함수 이다.
• 아래는 Signup.json 이라는 mock data를 임의로 만들어서 fetch()로 갖고올때 쓴 코드.

fetch("/data/Signup.json", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          policies: res.policies,
        });
      });

• data폴더 안에 있는 Singup.json 파일을 받아 온다.
• method 에는 get 와 post 가 있는데, get이 default method 이기 때문에 생략해도 무방하지만, 협업하는 convention을 따르도록 한다. 그리고, method는 백엔드 개발자가 만든것. get인지 post인지 모르면 백엔드에게 물어봐야한다.
• fetch() 라는 함수는 비동기 함수이다. 보통은 순서대로 실행되지만 fetch()라는 함수는 응답을 받아야하는 역할때문에 기본적으로 시간이 걸리므로 컴퓨터가 fetch()를 만나자마자 다음 함수로 넘어가게 된다. 이를 비동기라고 한다.
• 하지만, fetch() 안에서는 response를 기다렸다가 then 메서드가 실행되는데 이를 비동기의 동기화라고 한다.

직접 사용해본 fetch()

fetch(`${API}/account/signin`, {
        method: "POST",
        body: JSON.stringify({
          email: this.state.id,
          password: this.state.pw,
        }),
      })
        .then((response) => response.json())
        .then((result) => {
          if (result.message === "SUCCESS") {
            this.props.history.push("/Main-haiin");
            localStorage.setItem("Token", result.Authorization);
          } else {
            alert("다시 입력하세요.");
          }
        });

• API 라는 변수에 주소를 할당하고 가져와서 쓴다.
• 백엔드에서 처리하는 키값을 확인하고 body안에 동일하게 적어준다.
• fetch() 의 return 값은 response 이고 이것을 .then()의 인자로 들어가서 json 형태로 바꿔준다.
• 위의 형태를 result라는 이름으로 받고 정보안에서 키값을 message로 갖고 있는 아이의 값이 success 라면 아래 코드를 실행하게 한다.

참고
access token 저장하기
Local Storage: 해당 도메인에 영구 저장한다.
Session Storage: 해당 도메인의 한 세션에서만 저장한다. 닫으면 data가 날라간다.
Cookie: 해당 도메인에 설정한 날짜까지만 저장한다.