Data 호출을 위한 fetch() 사용

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다.
Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수로 현업에서는 axios를 많이 사용한다.

fetch() 함수 기본

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

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

• 위 코드에서 변수의 scope는 각 함수이므로 첫 번째 then와 두 번째 then 안에 있는 res 값은 서로 다르다.

fetch() - method 'get'

• fetch() 함수의 default method는 get이다.

//api 명세
설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

// 호출하기
fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

• api 주소를 상황에 맞게 유동적으로 바꿔야 할 경우

import React, { useEffect } from 'react';

function User(props) {
  useEffect(() => {
      const { userId } = props;
	    fetch(`https://api.google.com/user/${userId}`)
	      .then(res => res.json())
	      .then(res => {
	        if (res.success) {
	            console.log(`${res.user.name}` 님 환영합니다);
	        }
	    });      
    }, []);
  ...
}

fetch() - method 'post'

• fetch() post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 한다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "kayoung",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

1. 두 번째 인자에 method 와 body를 보내준다.
2. method는 post
3. body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환한다.

• fetch 함수는 post로 데이터를 보낼 때 JSON.stringfy를 해주어야 하는 반면, axios는 객체를 그대로 작성해도 되는 장점이 있다. 이렇듯 axios는 소소한 편의성을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수도 있습니다.

fetch() - method 'get'에 parameter 전달

• path parameter가 아닌 query string으로 넘겨줘야 할 경우, api 주소 뒤에 붙여준다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

fetch('https://api.google.com/user?id=3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

res.json()

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "kayoung",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

• 첫 번째 then 함수에 전달된 인자(res)는 http 통신 요청과 응답에서 '응답'의 정보를 담고 있는 객체로, Response Object라고 한다.
• 응답으로 받은 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야하는데, 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있다.

에러 처리 - 첫 번째 then 함수에 로직 추가

설명: 유저를 저장한다.
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('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "kayoung",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })