이 글에서는 웹 개발자들이 가장 많이 사용하는 비동기 통신 방법인 fetch와 Axios를 비교해보고, 각각의 장단점과 사용법을 초급자도 쉽게 이해할 수 있도록 정리했습니다.
지금까지 fetch를 써봤다면, 왜 Axios가 자주 쓰이는지 궁금하셨을 거예요. 중급으로 가는 중요한 다리, 지금부터 함께 건너보시죠!
💡 비동기 통신이란?
비동기 통신은 웹 페이지가 새로고침 없이 서버와 데이터를 주고받는 방식입니다.
Ajax, fetch, Axios 모두 이 비동기 통신을 위한 기술이에요.
🧪 fetch 사용법
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("에러 발생:", error));
✔ 기본 내장 함수이므로 설치 필요 없음
✔ 코드가 다소 길고 에러 처리도 수동으로 해야 함
⚙️ Axios 사용법
// npm install axios 후 사용
import axios from "axios";
axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then(response => console.log(response.data))
.catch(error => console.error("에러 발생:", error));
✔ 설치 필요하지만, 짧고 직관적인 코드
✔ 설치하지 않고 CDN 사용 가능
- jsDelivr CDN 사용하기 : <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- unpkg CDN 사용하기 : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
✔ 자동 JSON 변환, 에러 핸들링도 편리
📊 fetch vs Axios 비교표
| 항목 | fetch | Axios |
|---|---|---|
| 설치 | 필요 없음 | npm 설치 필요 |
| 사용법 | 상대적으로 복잡 | 간단하고 직관적 |
| JSON 처리 | 수동으로 .json() 호출 | 자동 변환 |
| 에러 핸들링 | 상태코드 확인 필요 | 자동 예외 처리 |
| 지원 기능 | 기본적인 기능만 | 인터셉터, 요청 취소 등 다양한 기능 |
🎯 어떤 걸 써야 할까?
- 가볍고 기본적인 작업만 필요하다면 fetch
- 실무에서 유지보수성과 편의성을 중시한다면 Axios
중급 이상의 프로젝트에서는 대부분 Axios를 사용하는 경우가 많습니다.
📌 정리
fetch는 가볍고 기본적인 비동기 처리용, Axios는 실무에 최적화된 편리한 라이브러리입니다.
다음 강좌에서는 Axios 인스턴스 생성 및 인터셉터 활용 방법을 통해 좀 더 고급스럽게 API를 관리하는 법을 배워볼 거예요!
📚 다음 글 예고
Axios 인스턴스를 만들어서 공통 API를 구성하고, 인터셉터로 요청/응답을 통합 처리하는 고급 기술을 배워볼게요. 실무에 꼭 필요한 내용입니다!