fetch web APIs & Axios library 차이점

브라우저 상에서 fetch라는 웹 API 중에 하나인 것을 사용하면 간단하게 네트워크 통신을 할 수가 있다.

긴 URL을 query params를 섞어서 하고 또 받은 response를 JSON으로 변환하는 것들을 일일이 했어야 했다.

 

Axios에 대해서 살펴보자.

cmder창에서 추가할려고 하는 패키지를 쓴다. 라이브러리를 추가하고 VScode에서 확인하면 package.json파일에 axios 라이브러리가 추가된 것를 볼 수 있다.

yarn add axios

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

axios github로 검색해서 보면 fetch 대응으로 쓸 수 있는 것이다. 다른 브라우저 상에서 호환이 잘 되도록 만들어져 있다. fetch같은 경우는 IE에서 동작을 안하지만 라이브러리 같은 경우는 예전 브라우저라면 XMLHttpRequest라는 오브젝트를 쓰고 최신이라면 fetch를 이용하는 것을 해준다.

 

또 fetch를 쓸 때는 다 반응을 받아서 JSON으로 일일이 변환을 했다. 라이브러리를 쓰면 변환하지 않아도 되게 도와준다.

  async mostPopular() {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${this.key}`,
      this.getRequestOptions
    );
    const result = await response.json();
    return result.items;
  }

fetch와 axios에 차이점을 명확하게 보기 위해서 youtube.js를 복사해서 원래 youtube.js파일을 youtube-fetch.js로 바꿔주고 youtube.js파일이라고 새로 파일을 만들어서 두 개를 만들어 놓는다.

 

youtube.js에 code를 작성한다. npm, yarn을 쓰기 때문에 라이브러리를 추가하는 것이 간단하다.

import axios from 'axios';

class Youtube {
	constructor(key) {
    	this.key = key;
    	this.getRequestOptions = {
      	method: 'GET',
      	redirect: 'follow',
      };
    }
    
=>

baseURL을 설정해주고 유튜브와 통신하는 베이스 유튜브 클라이언트를 만들어준다.

mostPopular부분과 search부분에서 fetch는 전체적인 url을 작성했던 반면에 아래코드를 작성하면 params파트를 나눠서 해 볼수가 있다.

 

mostPopular()부분에서 fetch와 같이 JSON으로 변환하지 않아도 라이브러리 자체에서 JSON으로 변환 해주기 때문에 그 부분이 생략이 된다.

async mostPopular() {
    const response = await this.youtube.get('videos', {
      params: {
        part: 'snippet',
        chart: 'mostPopular',
        maxResults: '25',
      }
    });
return response.data.items;

search부분도 같은 형식으로 바꿔준다.

  async search(query) {
    const response = await this.youtube.get('search', {
      params: {
        part: 'snippet',
        maxResults: 25,
        type: 'video',
        q: query,
      },
    });
  return response.data.items.map(item=>({ ...item, id: item.id.videoId }));

즉 결론적으로 fetch를 이용하면 params를 url로 해야하니까 가독성이 조금 떨어진다. 그리고 JSON으로 변환 해야되는거 두 가지 코드상에서 차이점이 있다. 그리고 axios는 이전 브라우저와 호환이 된다.

fetch는 can i use에서 보면 오래된 버전에서는 지원이 되지 않는다. 라이브러리는 라이브러리 자체에서 예전 버전까지 지원이 된다. 즉 XMLHttpRequest를 쓰는 것이다. 

Fetch는 예전 버전에서 쓰이지 않는다.

axios 라이브러리는 예전버전과 호환이 된다.

그리고 dependency injection을 깔끔하게 하고싶으면(유튜브라는 클래스에서는 어떻게 이용해서 통신을 하는지 모르게 하기 위해서는) key를 전달하지 않고 단순하게 httpClient를 받아서 정말 아무것도 모르게 만들어 놓고 httpClient 받아 온 것을 할당만 해주는 식으로 만들면 되고 

//youtube.js

class Youtube {
  constructor(httpClient) {
    this.youtube = httpClient;
}

실제로 쓰는 index.js에서 dependenct를 injection 해 주면 된다. httpClient는 아래와 같이 해준 다음에 key를 전달받게 해준다.

이렇게 해서 youtube에서는 어떤 거 쓰는지 axios라는 이것을 전혀 모르는 상태로 즉 youtube라는 것은 외부 라이브러리를 쓰던지 fetch를 쓰던지 상관없이 받아온 것에 get을 이용해서 쓸 수 있도록 만들고 제공하는 사용자가 axios를 import해서 제공해주면 된다.

// index.js


import axios from 'axios';
const httpClient = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
});

const youtube = new Youtube(httpClient);

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc