[TIL]fetch 함수

access token(접근권한이 있는 값)

API를 호출하는 주체인 프론트에서 호출하면 백엔드는 요청에 따른 데이터를 반환해준다. HTTP 통신의 특성 중 하나인 stateless(이전 통신의 상태를 기억하지 못한다) 때문에 유저가 페이지를 전환할때마다 프론트는 백엔드에게 요청을 보내기 위해 유저가 현재 로그인을 한 상태인지 아닌지를 알아야한다.

→ 프론트에서 유저의 로그인 유무를 알기 위해 브라우저에 정보를 저장하여 access token으로 관리를 해준다. 프론트에서 아이디, 패스워드 값을 직접적으로 관리하게 되면 해킹의 위험성이 있으므로 access token으로 관리해줘야한다

access token에는 아이디말고 다른 개인정보는 넣으면 안된다.

로그인페이지에서 이벤트가 일어날 경우 데이터 처리 과정

1. 로그인페이지(client)에서 유저가 로그인을 하기 위해 id, pw를 입력하고 login버튼을 누르게 되클릭이벤트가 발생하고 백엔드(server)로 API 통신을 하게 된다.

2. API 호출(fetch함수나 axios 라이브러리 사용)에는 method방식(GET, POST, PUT, DELETE), body(로그인 정보) 등 호출에 필요한 정보를 담아 보낸다. (Request)

3. 백엔드에선 프론트로부터 전달받은 정보를 가지고 데이터베이스에 있는 유저데이터와 일치하는 것이 있는지 확인하고 프론트에게 응답을 보낸다. (Response)

   ✨ 이때 로그인이 성공하면 access token도 함께 전달해준다.

Fetch 함수

fetch함수는 클라이언트에서 서버로 요청을 하기 위해 사용하는 함수로 로그인 요청을 보낼때에는 post method를 사용하여 정보를 전달해준다. 정보는 body 부분에 담아 보내게 되는데 정보노출이 안되기 때문이다. HTTP 규약에 따라 JSON 타입에 담긴 정보는 스트링 형태로 전달되어야 되기 때문에 stringify 메소드를 사용하여 문자열 형태로 전환해준다.

fetch 함수에선 인자로 서버주소, request에 대한 정보(method, header, body)를 담는다.

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