fetch 🐾

목차
1. fetch()
2. fetch함수를 사용해 backend API붙이기

Ajax의 포스팅은 요기에서 🐙

두근두근 +_+ !
오늘은 backend분들이 만든 데이터 모델을 fetch함수를 통해 내가 만든 위스타그램 로그인창에서 유효성 체크를 해보는 시간을 가졌다. 그리고 유효한 값을 넘기면 받을 수 있는 귀여운 토큰들도 받았다!

1. fetch() ??

1-1. fetch의 기능

• 서버가 응답할 때 까지 다른일을 할 수 있도록 도와주는 메서드
• fetch()안에 들어가는 인자값만 서버 응답이 끝난 후 실행되고, 나머지 요소들은 서버응답과 상관없이 실행한다.
  -> 그렇다! 비동기(Asynchronous)이다!

기본 문법

let promise = fetch(url, [options])

response / request header부분은 별도로 다루지 않겠다.

함수 설명

• GET 이외의 요청을 보내려면 추가 옵션을 사용해야 한다.

• method : GET, POST, PATCH 등 http method를 입력한다.

• body : 문자열(예 : JSON)

• 통신을 할 때는 string 형태의 JSON으로 보내야 하기 때문에 JSON.stringify()라는 메서드를 활용해서 포맷을 기존의 Object에서 String으로 변환해준다.

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

2. fetch함수를 사용해 backend API불러오기

backend에서 작업한 데이터 모델이 들어있는 서버 주소를 API라는 변수로 지정해두고😃, fetch함수를 사용해 통신을 시작한다.

아래 코드에서
첫 번째 then에서는 server에서 보내준 response를 Object 형태로 변환해주고
두 번째 then에서는 object로 변환한 response를 console.log로 확인한다.
여기서 원하는 로직을 구현하면 된다!
fetch함수 내 body부분의 항목은 backend에서 지정한 key와 일치해야한다.(데이터 type확인 유의!!)

위의 Authorization은 상대 backend분의 key값과 일치하면 우선 나의 local storage에 담기게 되는데 미처 그것까지 확인하지 못하여 첫 토큰들을 다 캡쳐해버렸다...😄

콘솔창에 찍힌 값들이 뭐라고.. 왜이렇게 귀엽니!! 너희들🥲   앞으로 안전하게 보관해줄게💛

전달받은 토큰들을 안전하게 관리할 수 있도록 JWT(존맛탱 아님)에 대해서도 학습할 예정이다!