24.07.09

[Next.js에서 axios vs fetch]

튜터님께서 Next.js 사용 시에 axios 보다는 fetch를 쓰라고 하셨던 게
기억은 나는데, 이유가 뭐였더라?

axios

• 장점:

1. Promise 기반
   : axios는 Promise 기반으로 비동기 작업 관리 용이.
2. 인터셉터
   : 요청이나 응답을 가로채서 추가 로직 적용 가능.
3. 자동 JSON 변환
   : 응답 데이터를 자동으로 JSON 변환.
4. 더 나은 오류 처리
   : HTTP 상태 코드에 따라 더 정교한 오류 처리가 가능합니다.

• 단점:

1. 추가 의존성
   : 별도의 라이브러리를 설치해야 합니다.
2. 패키지 크기
   : fetch에 비해 상대적으로 큰 패키지 크기.

fetch

• 장점:

1. 내장 함수
   : 브라우저 내장 함수로 추가 설치가 필요 없습니다.
2. 더 작은 크기
   : 추가 패키지가 없으므로 번들 크기를 줄일 수 있습니다.
3. 유연성
   : 원시 API이므로 다양한 방식으로 커스터마이징이 가능합니다.

• 단점:

1. 복잡한 설정
   : 기본 기능이 적어, 예외 처리, 타임아웃 설정 등을 직접 구현해야 합니다.
2. JSON 변환 필요
   : 응답 데이터를 수동으로 JSON으로 변환해야 합니다.
3. 인터셉터 없음
   : 요청이나 응답을 가로채는 기능이 없습니다.

결론
단순한 프로젝트면 fetch로도 충분하다.
복잡한 요청/응답 처리 필요하면 axios가 더 편리하다.

[Lighthouse]

https://teamsparta.notion.site/React-5-Lighthouse-aca54b0d3c644d4daeea08503ab79515

---

[OpenWeatherMap API]

https://velog.io/@yeonsubaek/JavaScript-%EB%82%A0%EC%94%A8-API-%EC%97%B0%EB%8F%99%EC%9D%B4-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%89%BD%EB%8B%A4%EA%B3%A0-ft.-OpenWeatherMap
https://peter-codinglife.tistory.com/71
https://peter-codinglife.tistory.com/70