서버 통신 라이브러리 도입기

Axios란?

브라우저랑 Node.js에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리

Axios의 특징

• 브라우저를 위해 XMLHttpRequest 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

Axios 기본 사용법

HTTP Methods : GET

import axios from 'axios';

axios.get('/api/users')
	.then((res) => {
    	console.log(res.data);	
    })
    .catch((err) => {
    	console.error(err);
    });

---

KY란?

네이티브 Fetch API를 기반으로 하는 가벼운 HTTP 클라이언트 라이브러리

핵심 특징

• Fetch 기반
• 작고 가벼움(4KB)
• 네트워크 실패 시 자동 재시도
• 타입스크립트에 대한 완벽한 타입 지원

KY 기본 사용법

import ky from 'ky';

ky.get('/api/users')
  .json() 
  .then((data) => {
    console.log(data); 
  })
  .catch((err) => {
    console.error(err); 
  });

---

KY vs Axios 차이점

1. 데이터 접근 (res.data vs .json()):
   • Axios: 응답이 오면 자동으로 JSON을 파싱해서 res.data 안에 넣어줌
   • Ky: fetch 기반이므로 응답 객체에서 .json() 메서드를 호출해야 실제 데이터를 얻을 수 있습니다.
     또한, .json() 자체가 Promise를 반환하므로 체이닝이 한 번 더 연결된 형태가 된다.
2. 에러 처리
   • Axios: 4xx, 5xx 상태 코드일 때 자동으로 에러를 발생시킴
   • Ky: 마찬가지로 4xx, 5xx 상태 코드일 때 자동으로 에러를 발생시킴

---

러닝커브 및 생태계 비교

• Axios
  • 가장 널리 쓰이는 표준 라이브러리로 많이 익숙함
  • 레거시 코드에서 Axios 기준으로 작성된 경우가 많아 참고하기 쉬움
• Ky
  • 브라우저 표준 Fetch API를 기반으로 하므로 Fetch 사용 경험이 있다면 러닝커브가 거의 없음
  • .json() 체이닝 등 일부 문법적 차이만 인지하면 즉시 도입 가능

커뮤니티 및 안정성

• Axios
  • 압도적인 다운로드 수 및 방대한 커뮤니티 보유
• Ky
  • Axios 대비 사용자 수는 적음
  • 라이브러리 자체 로직이 복잡하지 않고 웹 표준을 따르므로 라이브러리 자체 버그 리스크가 낮음
  • 공식 문서 간결하고 명확하여 외부 레퍼런스 의존도가 낮음

---

KY vs Axios 테스트

1. 기능 비교 테스트

테스트 항목

1. 기본 GET 요청: 동일한 API 엔드포인트에 요청을 보내고 응답 시간과 데이터 접근 방식을 비교
2. 에러 처리: 존재하지 않는 리소스(404)에 접근하여 에러 처리 방식을 비교
3. POST 요청: 새 리소스를 생성하는 POST 요청의 문법과 사용법 비교
4. 인터셉터/훅: 요청/응답을 가로채서 처리하는 방식 비교
5. 타임아웃 설정: 1ms로 설정하여 타임아웃 처리 방식 비교
6. 요청 취소: AbortController를 사용한 요청 취소 기능 비교

2. 성능 비교 테스트

측정 방법

• 각 테스트를 10회 반복 실행
• performance.now()를 사용하여 정확한 시간 측정
• 평균, 최소, 최대 응답 시간 계산

테스트 항목

1. 단일 GET 요청: 하나의 요청만 보내는 경우의 성능
2. 동시 요청: 10개의 요청을 Promise.all로 동시에 보내는 경우의 성능
3. POST 요청: 데이터를 전송하는 POST 요청의 성능
4. 번들 크기: 실제 번들 크기 정보

테스트 결과

기능 비교 테스트 결과

1. 기능 비교 요약

• 데이터 접근
  • Axios: response.data
  • Ky: response.json() → 바로 객체 접근
• 에러 처리
  • Axios: AxiosError, axios.isAxiosError()
  • Ky: HTTPError, instanceof로 표준 처리
• 요청 설정
  • Axios: baseURL, 인터셉터(interceptors)
  • Ky: prefixUrl, 훅(hooks.beforeRequest / afterResponse)
• 타임아웃 / 요청 취소
  • 두 라이브러리 모두 정상 동작
  • Ky는 Fetch + AbortController 기반

---

2. 성능 테스트 요약 (평균 기준)

• 단일 GET 요청
  • Axios가 약 3% 빠름
• 동시 GET 요청 (10개)
  • Axios가 약 3% 빠름
• POST 요청
  • Ky가 약 3% 빠름 (차이 미미)

→ 실사용에서 체감 가능한 성능 차이는 없음

---

3. 번들 크기 비교

• Axios
  • ~13KB (gzipped)
  • ~50KB (minified)
• Ky
  • ~3KB (gzipped)
  • ~10KB (minified)

→ Ky가 약 4배 더 가벼움

---

4. 종합 결론

KY 라이브러리 사용을 추천

1. 번들 크기

• KY(3KB)가 Axios(13KB)에 비해 약 4배 차이 발생함

  해당 이유로 인해

• 글로벌 프로덕트에서 초기 로딩 속도 개선 가능

• 다국어 지원으로 인해 번역 파일과 함께 로드되므로 번들 크기에 영향을 미침

• 해외의 느린 네트워크 성능에 대해 절약이 가능

2. TS 지원

• TypeScript-first 설계 가능
• 타입 추론 정확

3. Ky의 장점

• Fetch API 기반
• Promise 기반, async/await 친화적
• 체이닝 스타일로 가독성 좋음

4. 성능 차이는 미미

• 단일 GET 요청: Axios가 약 3% 빠름
• POST 요청: Ky가 약 3% 빠름
• 동시 요청: Axios가 약 3% 빠름