Axios란 무엇인가

Axios란?

Axios는 Promise 기반의 HTTP 비동기 통신 라이브러리입니다.
프론트엔드에서 외부 API와 데이터를 주고받을 때 가장 많이 사용되는 도구 중 하나입니다.

주요 특징

• Promise 기반으로 .then(), .catch() 혹은 async/await 방식으로 비동기 처리 가능
• 요청(Request)과 응답(Response)에 대한 인터셉터 제공
• 요청을 자동으로 JSON으로 직렬화, 응답도 JSON으로 파싱
• 브라우저뿐만 아니라 Node.js 환경에서도 사용 가능
• fetch보다 사용자 친화적이며 코드가 간결

🤔 그럼 fetch는 뭐가 다른가요?

자바스크립트의 내장 함수인 fetch()도 비동기 HTTP 통신을 수행하지만, Axios에 비해 다음과 같은 차이가 있습니다:

항목	fetch	Axios
기본 제공 여부	브라우저 내장	외부 라이브러리 설치 필요
응답 데이터 처리	res.json() 등 수동 파싱 필요	자동으로 JSON 변환
요청 취소	지원 안함 (AbortController 사용해야 함)	axios.CancelToken 사용 가능
타임아웃 설정	직접 구현 필요	기본 지원
에러 처리	status 400~599도 .then()으로 들어감	자동으로 .catch()로 감지

👉 즉, fetch는 저수준 API, Axios는 고수준 추상화된 라이브러리!!

비동기 통신은 왜 Promise 기반인가요?

HTTP 요청은 시간이 걸리는 작업이기 때문에 결과가 나올 때까지 기다리지 않고 다음 코드를 실행할 수 있도록 Promise를 사용합니다.

// Promise 기반 비동기 처리 예시
axios.get("/api/data")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));

// 혹은 async/await로 더 깔끔하게
const fetchData = async () => {
  try {
    const res = await axios.get("/api/data");
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
};

Axios 인스턴스화는 왜 하나요?

문제 상황:

axios.get("https://api.themoviedb.org/3/movie/latest?api_key=XXX&language=en-US");
axios.get("https://api.themoviedb.org/3/movie/123?api_key=XXX&language=en-US");

이렇게 매번 중복되는 baseURL, api_key, language를 입력한다면?

-> 해결책: 인스턴스화
Axios에서 공통 설정을 모듈처럼 만들 수 있습니다.

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
  params: {
    api_key: process.env.NEXT_PUBLIC_API_KEY,
    language: "en-US",
  },
});

이제부터는 이렇게 간결하게 사용할 수 있습니다:

instance.get("/movie/latest");
instance.get(/movie/${movieId});

장점
1. 코드 간결화
2. 공통 파라미터 또는 헤더 유지
3. 인증 토큰, 인터셉터 등 공통 로직 주입 가능
4. 유지보수성 향상

결론

• HTTP 통신은 필수! fetch나 axios를 사용함
• 복잡한 프로젝트일수록 Axios + 인스턴스화 조합이 강력함
• 비동기 처리는 Promise 기반 (async/await 적극 활용!)
• Axios 인스턴스로 코드 재사용성과 일관성을 확보할 수 있음