[JS]fetch

📓fetch의 정의

특정 정보가 필요할 때 클라이언트는 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response) 받을 수 있다.
이때 사용되는 메서드가 fetch 메서드이다.
클라이언트는 fetch 메서드로 서버로 데이터를 요청해서 받을 수도 있고, 데이터를 생성, 수정, 삭제 할 수 있다.

📓fetch 요청(request)

fetch 메서드를 호출할 때, 첫 번째 인자로 전달한 API 주소에 정보를 달라고 요청하고 응답을 받는다.
아래의 형태가 fetch 메서드의 기본 구조이다.

// fetch 전문 예시

fetch('api주소', {
  method: '...',
  headers: { 'key': 'value' },
  body: JSON.stringify({ 'key': 'value' }),
})                                      //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                        //응답

fetch 메서드를 호출할 때. 인자 2개를 전달할 수 있다. 첫 번째 인자 자리에는 데이터를 요청할 API 주소를 필수로 넣는다. 두 번째 인자는 요청의 옵션 값들로 필요에 따라 객체 형태로 넣을 수 있는데, method, headers, body, mode, credentials, omit, same-origin, include, cache, redirect, referrer, referrerPolicy, integrity, keepalive, signal등의 key와 각각 해당하는 value를 넣을 수 있다.
여기에서 중요한 건, 클라이언트의 입장에서 서버에게 요청하는 것이다.어디에서 요청하고, 어디에서 응답받는지 방향이 혼동되면 개념 정립에 좀 더 많은 시간이 할애될 수 있다.

fetch는 크게 요청과 응답 부분으로 나눌 수 있는데 여기서는 두 번째 인자로 전달하는 객체의 key중 자주 사용하는 method, headers, 그리고 body가 있는 요청과 body가 없는 요청으로 나눌 수 있다.

📗첫번째 인자(api주소) - 필수

fetch()첫 번째 인자 자리에 정보를 요청할 API 주소를 입력한다. API 주소는 서버에서 받아야 한다.
API 주소는 http:// 혹은 https://, IP 주소(with 포트번호) 혹은 도메인 주소, 엔드 포인트로 구성돼있다.

// 첫번째 인자 예시

fetch('http://10.58.113.116:8000/sign-in');
fetch('https://jsonplaceholder.typicode.com/posts');

📗두번째 인자(method) - 선택사항

어떤 method로 요청할지 적는다.
(GET, POST, PUT, PATCH, DELETE ...)

// method 예시

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
});

📗두번째 인자(headers) - 선택사항

headers 는 서버에 요청할 때 보낼 부가적인 정보를 담는다.
(HOST, user-Agent, Authorization, Content-Type ...)

// headers 예시

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
});

📗두번째 인자(body) - 선택사항

body에는 서버에 요청할 때 보낼 실질적인 정보를 담는다.
여기에서 요청 body가 있는 경우와 없는 경우로 나눌 수 있다.

📖요청 body가 있는 경우

서버에 보낼 정보가 있는 경우, 요청 body에 담아서 보낸다. 그런데 body value를 보면 JSON.stringify라는 메서드에 담아서 보내고 있다.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
});

body에 담긴 정보를 서버로 보낼 때 데이터 형태를 JSON 형태로 보내고 받아야 하는데, JSON으로 형 변환을 해주는 메서드가 JSON.stringify이다.

💡왜 JSON일까 ?
통신 간, 서버와 클라이언트는 같은 언어일 수도 있고, 다른 언어일 수도 있다. 같은 언어라면 문제가 없겠지만 다른 언어라면 주고 받을 수가 없다.
JSON 형태를 사용하면 어떤 언어에서든 원하는 데이터를 주고받을 수 있다. JSON의 형태는 자바스크립트의 객체와 유사하지만, javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능이 대부분 언어에서 제공된다.
그래서 JSON 형태로 통신을 주고받아야 한다. 메서드 사용 방법은 JSON.stringify 메서드 인자에 데이터를 담으면, JSON문자열로 반환된다.

//JSON.stringify로 변환된 body 형태 예시

// object
{
  title: 'update title',
  content: '서버에 요청할때 담아서 보내는 정보',
};

// JSON
{ "title": "update title", "content": "서버에 요청할때 담아서 보내는 정보" }
// JSON.stringify 형 변환 예시

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(
  JSON.stringify([new Number(3), new String('false'), new Boolean(false)])
);
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function () {}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

📖요청 body가 없는 경우

요청 body가 없는 경우는 서버에 전달해 줄 정보 없이 정보만 달라고 요청만 한다.

//body가 없는 요청 예시

fetch('https://jsonplaceholder.typicode.com/users/1', { method: 'GET' });

📓비동기(asynchronous)

console.log(1);
console.log(2);
setTimeout(() => console.log(3), 3000);
console.log(4);

//output
1
2
4
3

위의 코드를 보면 1,2,3,4 로 출력되는 것이 아니라 1,2,4,3으로 출력이 된다.
이유는 setTimeout 메서드가 비동기 함수이기 때문이다.

동기(synchronous)적인 처리 방식은 이전의 작업이 끝나야 다음 작업으로 이어지는 처리 방식이다.
이 방식은 설계가 비교적 간단하고 처리의 순서를 파악하기 용이하다.
다만, 이전 처리가 끝날 때까지 기다려야 해서 연산이 오래 걸리거나, 언제 종료될지 모르는 예측 불가능한 처리 방식에는 아무것도 못하고 기다려야만 하는 단점이 있다.

비동기(asynchronous)적인 처리방식은 이전 작업의 종료 여부와 상관없이 기다리지 않고 다른 작업을 할 수 있다. 동기적인 방식보다는 복잡하다는 단점이 있다.

그래서 통신은 중간에 인터넷 연결이 끊긴다거나, 속도가 느려 언제 통신이 끝날지 예측하기 어렵다.
그래서 통신은 동기적으로 처리하면 화면에 아무것도 출력되지 않은 채 마냥 기다려야 할 수도 있고, 에러 화면이 나오면서 정상적인 접근이 어려울 수도 있다.
그래서 통신과정은 동기적인 처리 순서에 영향을 주지 않도록 비동기로 처리해야 하고, fetch 함수는 그래서 비동기적으로 동작하도록 설계되어 있다.

📓fetch 응답(response)

.then() 메서드는 Promise를 처리할 수 있는 메서드이다.
.then()은 Promise를 리턴하고 두 개의 콜백 함수를 인자로 받는다. 하나는 Promise가 이행됬을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다.
.then() 메서드는 Promise를 리턴 하기 때문에 첫번째 .then()에서 반환된 값을 두번째 .then()에 이어서 처리할 수 있는 메서드 체이닝(chaning)이 가능하다.

.then() 메서드 문법
.then(function onFullfilled, [function onRejected]

요청을 했으면 응답을 받을 차례이다.
아래의 코드를 보면 .then() 메서드가 2번 나온다.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
}) 
                                              //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                              //응답

첫 번째 응답을 반환하는 then의 콜백에 response라는 매개변수를 console.log로 실행해 보면 아래의 값이 반환된다.

📗status code에 따른 첫번째 분기 처리

아래는 response를 console로 출력한 코드이다. response 객체에 여러가지 key가 반환되는데, 여기서 반환된 key를 활용해 그 다음 처리 방법을 판단할 수 있다.
-요청 성공-
-요청 실패-

통신의 성공, 실패 여부를 판단하는 기준은 status이다. status는 statuscode를 의미한다. 통신 성공은 200 - 299일 때 ok값이 true이고, 통신이 실패한 경우 statuscode가 400 - 499 | 500 - 599이고 ok 값은 false로 반환된다.

//첫번째 응답 분기처리 예시

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
})
  .then((response) => {
    if (response.ok === true) {
      return response.json();
    }
    throw new Error('에러 발생!'); //reponse.ok가 true가 아닐 경우 error를 throw
  })
  .catch((error) => console.log(error)); //throw된 error를 받아서 console에 출력

통신은 성공과 실패 여부를 예측하기 어렵기 때문에 첫 번째 응답받은 status 코드에 따라 처리 방법을 나눌 수 있다. 통신에 성공하면 response의 body를 객체로 만드는 메서드를 호출하고, 통신에 실패하면 console에 메시지를 출력하는 예시이다. 만약 실패하면 원인을 찾아 수정한다.

여기서 통신에 성공하면 응답받은 response 객체 중 body의 값은 JSON 형태이다.
JSON은 자바스트립ㅇ트의 문법으로 처리할 수 없다. 자바스크립트 데이터 타입으로 만들어야 데이터를 가공할 수 있다.
첫 번째 then에서 response.json()메서드가 JSON 형태를 자바스크립트 객체로 변환해주는 메서드이다. 이렇게 첫번째 then에서 JSON에서 객체로 변했고, 리턴된 객체는 두번째 then() 메서드로 넘겨진다.

📗첫 번째 응답에서 반환된 객체로 두번째 응답에서 분기 처리

통신에 성공해서 JSON을 객체로 변환했다면, 변환된 객체를 활용해서 분기 처리할 수 있다.

//두번째 응답 분기처리 예시

fetch('로그인 API', {
  method: 'post',
  body: JSON.stringify({
    id: 'qawsedrf',
    password: '123456',
  }),
})
  .then((response) => {
    if (response.ok === true) {
      return response.json();
    }
    throw new Error('에러 발생!');
  })
  .catch((error) => console.log(error))
  .then((data) => {
    if (data.message === 'login success') {
      localStorage.setItem('TOKEN', data.token);
      alert('로그인 성공');
    } else {
      alert('로그인 실패');
    }
  });

//data 예시
  data: {
    message: 'login success',
    token:    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo1fQ.Dy3PPHIOFFe3ScGTb8x3hewItnpOcgC9YDdW7v27XHg',
  },