Introduce

본 문서는 2021년 1월 20일 에 작성되었습니다.

Axios 는 경량 API 호출 라이브러리 입니다.
하지만 비슷한 기능을 하는 Node-fetch 보다는 살짝 무겁습니다.

1. Axios || ver 0.25.0 / 49 file / 396 kB
2. Node-fetch || ver 3.1.1 / 17 file / 103 kB

자세한 차이가 궁금하시다면 맨 아래의 🤔 Axios vs Node-fetch 를 참고하세요.

Installation

npm i axios

Theory

Axios 사용 방식은 대상 URL 에 양식에 맞는 params 를 보내주는 것이 다이다.

하지만, Node는 싱글 스레드 서버이며 이 부분에서 에러 핸들링은 필수이다.
예전 방식 대로 function().then().catch() 해도 되지만 기왕이면 ES6 의 async await 를 사용하자.
그게 더 이쁘니까!

Old JavaScript

var axios=required("axios");
var BASE_URL="http://yts-proxy.now.sh/";
var API_URL=BASE_URL+"list_movies.json";

module.exports.getData=function(args1, args) {
  var data=axios("API_URL",{
      params: {
        limit, minimum_rating;rating
      }
    }).then(function (response) {
      return response;
    }.catch(function (error) {
      return console.log(error);
    });
  return data;
}

Modern JavaScript

import axios from "axios";
const BASE_URL="https://yts-proxy.now.sh/"
const API_URL=`${BASE_URL}list_movies.json`;

export const getData=async(args1,args2)=>{
  const data=await axios(API_URL, {
    params: {
      limit, minimum_rating:rating
    }
  });
  
  return data;
}

---

🤔 Fetch vs Node-fetch vs Axios

클론 코딩으로 배우면 강력한 장점 하나를 가지게 됩니다.

그것은, 선배 개발자가 어렵게 터득한 노하우, 기술을 빠르게 배우고 굴러가게 만들 수 있다는 점 입니다.
하지만 그 과정이 반복되다 보니, 내가 정말 똑똑하고 대단한 사람인 것 같은 느낌 이 들었습니다.

그래서 내가 배운 것을 되짚다보면, 생각보다 내가 모르는 것 투성이 라는 것을 알 수 있습니다.
그래서 이런 주제를 쓰게 되었습니다.

# Fetch, Node-fetch, Axios 이 친구들이 무슨 차이야?

Fetch 는 변화가 빠른 React Native 와 같은 곳에서
Axios 는 안정성이 추구되는 React 와 같은 곳에서?
정말 이런 기준으로 선택해도 되는건가?

셋의 차이는 무엇이며,
어떤 상황에서 어떠한 기능을 사용하는 것이 옳은가에 대한 고민입니다.
다만, 작성자인 저는 1년차인 학생이며 다음의 게시글들을 참고하였음을 알아주셨으면 합니다.

Slack || Fetch from js VS Node-Fetch from node
Git || See known differences As of v.2.x
Git || See known differences As of v.3.x
Geeks || Difference between Fetch and Axios.js for making http requests
Blog || Performing HTTP Requests: Fetch Vs Axios

---

😒 Fetch vs Node-Fetch ?

위에 Ref 해둔 Slack 게시글을 보면 다음과 같은 질문이 있었습니다.
연도 등은 다르지만, 저와 같이 배운지 얼마 안된 새싹이 둘의 차이가 궁금했다는 내용을 올렸습니다.

대답은 총 2개가 있었습니다.

Node.js does not come with the fetch libriary per default. Fetch API does only exist in webbrowsers under window.fetch. Node-fetch is just a lightweight libriary containing this webbrowser fetch.

That said to install and use fetch in Node.js use following commands:

이 내용을 보고 어제 공부한 Node.JS 교과서 개정 2판 의 내용이 생각났습니다.
해당 교재에서는 브라우저 혹은 Window 내장 함수가 Node 에서는 지원되지 않음 을 알려주었습니다.
하지만, 실제로 코딩을 하다보면 완벽하게 이름이 똑같은 함수들이 있었는데 이는 똑같이 구현했을 뿐 이라는 점이었습니다.

그렇듯,
외부 API 에서 정보를 가져오는 fetch 또한 필요성에 의해 Node 용 모듈 로서 만들어졌다는 것이 아닐까 싶습니다.

두 번째 답변은 생각보다 이해하기가 어려웠습니다.

We can try to fetch the external API from the browser. That can give Cross Origin Resource Sharing (CORS) errors if the endpoint does not want you to access their API from a browser

Then you can write a proxy that accesses the external API from the server, that will be allowed regardless of CORS settings

So accessing an API from NODE will always work (assuming no need for authentication) and fetch from browser may or may not work directly.
NOTE: node-fetch is not native to node

제가 이해한 바로는 외부 API 에서 정보를 가져오는 것은 둘 다 가능 하지만,

fetch 는 코드 실행, 앤드포인트에서 CORS, Cross-Origin Resource Sharing, 교차 리소스 공유 에러 가 발생할 수 있습니다.
하지만 Node 에서 실행되는 node-fetch 는 CORS settings 과 무관 하게 코드를 실행시킬 수 있습니다.

그래서 CORS 는 뭔데?
구글링을 해보니, 다음과 같은 게시글을 발견하였습니다.

[Broswer] CORS 란?

https 서버에 http 가 요청을 보내면 CORS 가 발생할 수 있다.
왜 CORS 가 발생하는 자세한 내용은 본 문서의 범위를 벗어나서 위 포스트를 보면 좋을 것 같습니다.

어찌됐건,
기왕이면 Node-fetch 를 사용하는 것이 좋고 Fetch 를 사용할 것이라면 별도의 처리를 해줘야 한다라는 점을 알게 되었습니다.

---

😒 Node-Fetch vs Axios ?

사실 Node-Fetch 의 설명만 보면 굳이 Axios 가 개발되고 쓸 이유가 없지 않나 라는 생각이 들었다.

하지만, Geeks || Difference between Fetch and Axios.js for making http requests 를 보면 다음과 같은 내용이 있다.

이 내용은 과거 Nomad Corders 의 클론코딩 수업에서도 들은 기억이 있는데,
Node-fetch 는 가볍고 빠르기는 하지만 요청이 잘못되었을 경우 무한 회귀와 같은 현상을 일으킬 수도 있다는 점이었다.

따라서 안정성이 필요한 주요 서비스에서는 Axios를 쓰고 있는 것이다.

그렇다면 정말로 Axios 만 쓰는 것일까?
작성일 시점으로 Node-fetch 는 약 3500만, Axios 는 2200만의 다운로드 수를 기록하고 있다.(weekly)

이 부분은 실제 밴치마킹 결과나 선배들의 경험이 없는 나로써는 이해할 수 없었다.
하지만, 다음의 내용을 보면 내 필요에 맞춰서 선택하면 된다 라는 절이 있다.

Blog || Performing HTTP Requests: Fetch Vs Axios

결국은 내가 실행할 서비스가 프론트 측면에 밀접한가, 백앤드 측면에 밀접한가?
이미 무거워져서 경량화가 필요한가 아닌가 등이 중요하지 않은가 싶다.
하지만 그 기준점을 아는 것은 나로써는 이해할 수 없다.