node 에서 서버와 통신을 할 때 주로 사용하는 HTTP 클라이언트를 꼽아보자면 보통 Fetch나 Axios다. Fetch는 브라우저에 내장되어있어서 설치하지 않고 사용할 수 있다는 장점도 있고 문법도 크게 다르지 않은데 왜 Axios를 사용할까 궁금해져서 알아봤다.

Axios

공식 문서에서는 Axios에 대해 이렇게 소개하고 있다. (내가 휘뚜루마뚜루 번역함)

Axios는 Node.js와 브라우저를 위한 Promise 기반 HTTP 통신 클라이언트이다. 동형(브라우저와 Node에서 동일한 형태로 실행 가능)이며, 서버사이드에서는 Node.js의 네이티브 http 모듈을 사용하지만 클라이언트에서는 XMLHttpRequests를 사용한다.

Axios도 Promise API를 사용하기 때문에 response가 Promise 객체로 들어온다.

Axios 사용하기

  1. 설치 (npm 기준) 
    npm install axios

    서드파티이기 때문에 이후 require해주어야 한다. (React에서는 import)

    const axios = require('axios');

    // in React
import axios from 'axios';
  2. 요청 전송 config에 여러 설정값을 넣어서 전송하는 형태이다. 전송받은 response에 대해서 .then()을 통해 처리할 수 있다. ```javascript

// GET 요청 예시 (출처: Axios 공식 문서) axios({ method: ‘get’, url: ‘http://bit.ly/2mTM3nY’, responseType: ‘stream’ }) .then(function (response) { response.data.pipe(fs.createWriteStream(‘ada_lovelace.jpg’)) });

```javascript
// POST 요청 예시 (출처: Axios 공식 문서)
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios.get(), axios.post() 등 요청 메소드 명령어를 제공해주기도 한다.

fetch API

그렇다면 fetch API는 어떨까?

HTTP 통신을 위한 자바스크립트 내장 라이브러리이며 ES6부터 추가되었다. Axios에 비해 기능이 다양하지는 않으나, 성능 자체로는 Axios와 큰 차이가 없다. 문법도 큰 차이가 없으니 예제는 생략한다.

Node.js와 Axios의 차이점

문법도 성능도 큰 차이가 없는데 Axios를 왜 굳이 추가해서 사용하는가를 살펴봤다.

기본적으로 Axios가 에러 핸들링, 보안에서 fetch보다 더 나은 기능을 갖고 있다.

fetch의 장점 & 단점

장점

  1. 추가적인 라이브러리 설치가 필요 없다.
  2. 기본 내장 라이브러리이기 때문에, 업데이트가 잦은 환경에서 안정적으로 사용 가능하다. ( 예를 들어 React Native. 가끔 Axios가 업데이트를 따라잡지 못하는 경우가 있다고 함 )

    단점

  3. 에러 핸들링 시 catch에 걸려도 then 이 실행된다.
  4. 에러 핸들링 시 요청이 완료되지 않은 경우에만 reject가 실행되기 때문에 resolve로 한 번 받고 추가적인 예외처리를 해주어야 한다.
  5. 전달받은 데이터가 string화되어 들어온다. 데이터를 .json()으로 한 번 가공해야 한다.
  6. body를 통해 통신하기 때문에 요청값을 보낼 때도 json.stringify()를 이용한 문자열 파싱이 필요하다.
  7. 브라우저 지원이 Axios에 비해 다소 적다.
  8. 네트워크 에러가 발생해도 response timeout을 제공해주지 않는다.

    Axios의 장점 & 단점

    장점

  9. 객체로 바로 요청을 보낼 수 있다.
  10. 전달받은 데이터 또한 바로 json 형태로 변환되어 들어온다.
  11. response timeout, request 취소 기능을 제공한다.
  12. fetch에 비해 보안이 더 철저하다. CSRF 보호 기능이 있다. (사이트간 요청 위조 공격을 방지)
  13. 데이터 전달시 data를 바로 전달해주기 때문에 좀더 편리하다.
  14. fetch와 달리(fetch 단점 2번 참고) 400, 500대의 에러를 reject로 바로 잡아내 처리할 수 있다.

    단점

  15. 추가 설치가 필요한 서드파티 라이브러리.

정리해놓고 보니, Axios가 여러 모로 빌트인 라이브러리인 fetch의 단점을 개선해 만들려고 한 흔적이 보인다. 대부분의 경우 axios를 사용하겠지만, 좀더 안정적인 작업이 필요할 때는 fetch를 고려해보아야겠다.

참고 레퍼런스