axios VS ky 장단점과 에러 처리특징과 차이

웹 개발에서 HTTP 요청 처리는 필수적인 부분입니다. 오늘날 많은 개발자들이 이를 위해 외부 라이브러리를 사용하고 있으며, 그 중에서도 axios와 ky가 특히 인기를 끌고 있습니다. 이 두 라이브러리는 각각 고유한 특징과 장단점을 가지고 있어, 프로젝트의 요구사항에 따라 선택할 수 있습니다. 이 글에서는 axios와 ky의 사용 방법, 코드 예시, 그리고 각 라이브러리의 장단점을 자세히 살펴보겠습니다. 이를 통해 여러분의 프로젝트에 가장 적합한 HTTP 클라이언트 라이브러리를 선택하는 데 도움이 되길 바랍니다.

axios VS ky

1. axios 사용 예시

import axios from 'axios';

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST 요청
axios.post('https://api.example.com/data', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

코드 설명

1. axios를 import합니다.
2. GET 요청: axios.get() 메서드를 사용하여 지정된 URL로 GET 요청을 보냅니다.
   • then() 메서드로 성공적인 응답을 처리합니다. response.data에 서버로부터 받은 데이터가 들어있습니다.
   • catch() 메서드로 오류를 처리합니다.
3. POST 요청: axios.post() 메서드를 사용하여 POST 요청을 보냅니다.
   • 두 번째 인자로 전송할 데이터 객체를 전달합니다.
   • 응답 처리 방식은 GET 요청과 동일합니다.

axios 장점

1. 브라우저와 Node.js 환경 모두에서 사용 가능합니다. 이는 프론트엔드와 백엔드에서 동일한 코드를 사용할 수 있게 해줍니다.
2. JSON 데이터를 자동으로 변환해줍니다. 별도의 파싱 과정 없이 바로 데이터를 사용할 수 있어 편리합니다.
3. 요청과 응답에 대한 인터셉터를 제공합니다. 이를 통해 요청이나 응답을 보내기 전에 가로채서 수정할 수 있습니다.
4. 요청 취소 기능을 제공합니다. 불필요한 네트워크 트래픽을 줄일 수 있습니다.

axios 단점

1. 외부 라이브러리이므로 프로젝트에 추가로 설치해야 합니다. 이는 프로젝트 의존성을 증가시킬 수 있습니다.
2. 번들 크기가 상대적으로 큽니다. 이는 웹 애플리케이션의 초기 로딩 시간을 늘릴 수 있습니다.

---

2. ky 사용 예시

import ky from 'ky';

// GET 요청
ky.get('https://api.example.com/data')
  .json()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST 요청
ky.post('https://api.example.com/data', {
  json: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .json()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

코드 설명

1. ky를 import합니다.
2. GET 요청: ky.get() 메서드로 GET 요청을 보냅니다.
   • json() 메서드를 호출하여 응답을 JSON으로 파싱합니다.
   • then() 메서드로 파싱된 데이터를 처리합니다.
   • catch() 메서드로 오류를 처리합니다.
3. POST 요청: ky.post() 메서드로 POST 요청을 보냅니다.
   • json 옵션을 사용하여 전송할 데이터를 지정합니다.
   • 응답 처리 방식은 GET 요청과 동일합니다.

ky 장점

1. 번들 크기가 작습니다. 이는 웹 애플리케이션의 로딩 속도를 향상시킬 수 있습니다.
2. 현대적인 브라우저 API인 fetch를 기반으로 합니다. 이는 최신 웹 표준을 따르며, 브라우저 호환성이 좋습니다.
3. API 디자인이 간결합니다. 이로 인해 코드가 더 읽기 쉽고 이해하기 쉬워집니다.
4. 자동 재시도 기능을 제공합니다. 네트워크 오류 발생 시 자동으로 요청을 재시도하여 안정성을 높입니다.

ky 단점

1. 주로 브라우저 환경에 최적화되어 있습니다. Node.js에서 사용하려면 추가 설정이 필요하여 서버 사이드 개발에는 불편할 수 있습니다.
2. axios에 비해 제공하는 기능이 상대적으로 적습니다. 복잡한 요구사항이 있는 프로젝트에서는 부족할 수 있습니다.

두 라이브러리 모두 Promise 기반으로 작동하여 비동기 HTTP 요청을 쉽게 처리할 수 있게 해줍니다. axios는 더 많은 기능과 넓은 호환성을 제공하여 복잡한 요구사항이 있는 프로젝트에 적합할 수 있습니다. 반면 ky는 더 가볍고 현대적인 API를 제공하여 간단한 웹 애플리케이션이나 성능이 중요한 프로젝트에 적합할 수 있습니다. 프로젝트의 특성과 요구사항을 고려하여 적절한 라이브러리를 선택하는 것이 중요합니다.

---

에러 처리

에러 처리 관점에서 axios와 ky의 주요 차이점을 살펴보겠습니다. 두 라이브러리 모두 Promise 기반으로 작동하지만, 에러를 처리하는 방식에 차이가 있습니다.

axios의 에러 처리

axios는 요청이 실패하면 reject된 Promise를 반환하며, 에러 객체에 상세한 정보를 포함합니다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 서버가 2xx 범위를 벗어나는 상태 코드로 응답한 경우
      console.error('Server responded with an error:', error.response.status);
      console.error('Response data:', error.response.data);
    } else if (error.request) {
      // 요청이 전송되었지만 응답을 받지 못한 경우
      console.error('No response received:', error.request);
    } else {
      // 요청 설정 중에 오류가 발생한 경우
      console.error('Error setting up the request:', error.message);
    }
    console.error('Error config:', error.config);
  });

axios의 에러 객체는 다음과 같은 속성을 포함합니다:

• error.response: 서버 응답이 있는 경우 (상태 코드가 2xx 범위 밖)
• error.request: 요청은 전송되었지만 응답이 없는 경우
• error.message: 요청 설정 중 오류가 발생한 경우
• error.config: 요청 설정 정보

이러한 상세한 에러 정보를 통해 개발자는 다양한 오류 상황에 대해 세밀하게 대응할 수 있습니다.

ky의 에러 처리

ky는 Fetch API를 기반으로 하며, HTTP 에러 응답을 자동으로 reject하지 않습니다. 대신 HTTPError 클래스를 사용하여 에러를 처리합니다.

import ky from 'ky';

ky.get('https://api.example.com/data')
  .json()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error instanceof ky.HTTPError) {
      // HTTP 에러 (4xx, 5xx 상태 코드)
      console.error('HTTP Error Response:', error.response);
      error.response.text().then(text => {
        console.error('Error response text:', text);
      });
    } else {
      // 네트워크 오류 등 다른 종류의 에러
      console.error('An error occurred:', error.message);
    }
  });

ky의 에러 처리 특징:

• HTTPError 인스턴스를 통해 HTTP 에러를 처리합니다.
• error.response를 통해 응답 객체에 접근할 수 있습니다.
• 응답 본문은 비동기적으로 처리해야 합니다 (예: error.response.text() 또는 error.response.json()).

ky는 더 간결한 API를 제공하지만, 에러 처리 시 개발자가 직접 더 많은 로직을 구현해야 할 수 있습니다.

주요 차이점

1. 상세도: axios는 더 상세한 에러 정보를 제공하며, 다양한 에러 상황을 쉽게 구분할 수 있습니다. ky는 더 간단한 에러 객체를 제공합니다.
2. 에러 타입: axios는 모든 HTTP 에러를 자동으로 reject하지만, ky는 개발자가 HTTPError를 확인하여 처리해야 합니다.
3. 응답 처리: axios는 에러 객체에 응답 데이터를 직접 포함하지만, ky는 응답 본문을 비동기적으로 처리해야 합니다.
4. 유연성: ky는 개발자에게 더 많은 제어권을 제공하여 에러 처리를 더 유연하게 할 수 있지만, 이는 추가적인 코드 작성을 필요로 할 수 있습니다.

 

특성	axios	ky
장점	- 브라우저와 Node.js 환경 모두에서 사용 가능 - 자동 JSON 데이터 변환 - 요청과 응답 인터셉터 제공 - 요청 취소 기능 - 넓은 브라우저 호환성 (IE11 포함)	- 매우 가벼움 (약 9.12 kB, gzip 시 3.23 kB) - 현대적인 Fetch API 기반으로 설계 - 간결하고 직관적인 API - 자동 재시도 기능 내장 - 요청 및 응답 훅 제공
단점	- 번들 크기가 상대적으로 큼 (57 kB, gzip 시 21.8 kB) - 일부 개발자들은 에러 처리 방식이 복잡하다고 느낌	- 브라우저 환경에 최적화 (Node.js에서는 추가 설정 필요) - axios에 비해 상대적으로 적은 기능 - IE11과 같은 구형 브라우저 지원 안 함

 

결론적으로, axios는 더 상세하고 즉시 사용 가능한 에러 정보를 제공하여 복잡한 에러 처리 시나리오에 적합할 수 있습니다. 반면 ky는 더 간결하고 유연한 접근 방식을 제공하여, 개발자가 필요에 따라 에러 처리 로직을 커스터마이즈하기 쉽습니다.

프론트엔드 개발 시 axios와 ky 중 선택할 때 각각의 장단점을 고려해야 합니다.

 

선택 시 고려사항:

1. 프로젝트의 성능 요구사항: ky가 더 가벼워 성능에 민감한 프로젝트에 적합
2. 브라우저 호환성: 구형 브라우저 지원이 필요하다면 axios가 유리
3. 기능 요구사항: 고급 기능이 많이 필요하다면 axios, 기본적인 HTTP 요청만 필요하다면 ky
4. 학습 곡선: ky가 더 간단하고 현대적인 API를 제공하여 학습이 쉬움