🟨 2-10. Axios 완전 정복 — fetch보다 강력한 HTTP 클라이언트 사용법과 실무 패턴

---

1. Axios란 무엇인가

Axios는 Promise 기반의 HTTP 클라이언트로,
브라우저와 Node.js 양쪽 환경에서 사용할 수 있다.

설치:

npm install axios

가져오기:

import axios from "axios";

✅ 특징 요약

항목 Axios fetch

자동 JSON 파싱	✅ 있음	❌ 직접 .json() 호출
요청/응답 인터셉터	✅ 지원	❌ 없음
기본 헤더 설정	✅ 있음	❌ 직접 작성
요청 취소(CancelToken)	✅ 지원	❌ 없음
에러 응답 처리	자동으로 상태 코드 기반	수동 처리 필요

---

2. 기본 사용법

1️⃣ GET 요청

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));

res.data 에 바로 JSON 객체가 담긴다.
(fetch처럼 .json() 호출 필요 없음)

---

2️⃣ async/await 버전

async function getPost() {
  try {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
    console.log(res.data);
  } catch (err) {
    console.error("요청 실패:", err.message);
  }
}

getPost();

✅ Axios 응답 구조

{
  data: {...},       // 서버에서 받은 실제 데이터
  status: 200,       // HTTP 상태 코드
  statusText: "OK",  // 상태 텍스트
  headers: {...},    // 응답 헤더
  config: {...},     // 요청 설정
}

---

3. POST 요청

async function createPost() {
  try {
    const res = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "Axios로 보낸 글",
      body: "fetch보다 편하다!",
      userId: 1,
    });
    console.log("✅ 새 게시글:", res.data);
  } catch (err) {
    console.error("❌ 전송 실패:", err);
  }
}
createPost();

✅ 자동으로 Content-Type: application/json 헤더 설정
✅ body 대신 객체 그대로 전달 가능

---

4. PUT / PATCH / DELETE 요청

// PUT - 전체 수정
await axios.put("https://jsonplaceholder.typicode.com/posts/1", {
  title: "수정된 제목",
  body: "본문 수정됨",
});

// PATCH - 일부 수정
await axios.patch("https://jsonplaceholder.typicode.com/posts/1", {
  title: "일부 수정",
});

// DELETE
await axios.delete("https://jsonplaceholder.typicode.com/posts/1");

✅ REST API에서 CRUD 작업 모두 동일한 형태로 가능.

---

5. 기본 설정 (기본 URL, 헤더)

Axios 인스턴스를 만들어두면 프로젝트 전체에서 재사용 가능하다.

import axios from "axios";

const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" },
});

export default api;

이제 요청할 때는 간단하게 👇

const res = await api.get("/posts");

✅ baseURL: 모든 요청에 기본 경로 자동 적용
✅ timeout: 일정 시간 안에 응답이 없으면 자동 중단
✅ headers: 공통 헤더 지정

---

6. 요청/응답 인터셉터 (Interceptor)

인터셉터는 요청 전후로 자동으로 실행되는 미들웨어 같은 기능이다.
인증 토큰 추가나, 응답 전처리 시 매우 유용하다.

api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      alert("로그인이 필요합니다.");
    }
    return Promise.reject(error);
  }
);

✅ request interceptor — 요청 전 실행 (토큰, 헤더 등 추가)
✅ response interceptor — 응답 후 실행 (에러 처리, 재로그인 등)

---

7. 에러 처리 패턴

Axios는 에러 시 자동으로 상태 코드 기반 예외를 던진다.

try {
  const res = await axios.get("/invalid-url");
} catch (error) {
  if (error.response) {
    console.error("서버 오류:", error.response.status);
  } else if (error.request) {
    console.error("응답 없음:", error.request);
  } else {
    console.error("요청 설정 오류:", error.message);
  }
}

✅ error.response → 서버가 응답했지만 4xx/5xx 오류
✅ error.request → 요청은 갔지만 응답 없음
✅ error.message → 코드 오류나 네트워크 문제

---

8. 요청 취소 (CancelToken)

네트워크 요청 중 사용자가 빠르게 페이지를 이동할 경우,
이전 요청을 취소하는 기능이 필요하다.

const controller = new AbortController();

axios
  .get("https://jsonplaceholder.typicode.com/posts", { signal: controller.signal })
  .then((res) => console.log(res.data))
  .catch((err) => {
    if (axios.isCancel(err)) console.log("요청이 취소되었습니다.");
  });

// 일정 시간 후 요청 취소
setTimeout(() => controller.abort(), 100);

✅ React에서 탭 전환, 검색 자동완성 등에서 필수 기능이다.

---

9. 병렬 요청 — axios.all

여러 API를 동시에 요청할 때 유용하다.

const [users, posts] = await Promise.all([
  axios.get("https://jsonplaceholder.typicode.com/users"),
  axios.get("https://jsonplaceholder.typicode.com/posts"),
]);

console.log("유저 수:", users.data.length);
console.log("게시글 수:", posts.data.length);

✅ 병렬 처리로 로딩 속도를 크게 단축할 수 있다.

---

10. 실무 예시 — 사용자 인증 로직

// login.js
async function login(email, password) {
  const res = await api.post("/auth/login", { email, password });
  const { token } = res.data;
  localStorage.setItem("token", token);
}

// user.js
async function getUserInfo() {
  const res = await api.get("/user");
  console.log("사용자 정보:", res.data);
}

✅ 인터셉터를 활용해 자동으로 토큰을 붙여 요청 가능.
✅ 보통 이런 로직이 Axios 인스턴스 + React Query 같은 훅으로 확장된다.

---

11. fetch vs Axios 요약 비교

항목 fetch Axios

문법	기본 내장	외부 라이브러리 필요
응답 파싱	수동 (res.json())	자동
에러 처리	수동	자동 (HTTP 상태 기반)
요청 취소	제한적	완전 지원
인터셉터	없음	있음
설정 관리	직접 작성	인스턴스로 중앙 관리 가능

결론적으로,

• 작은 프로젝트 → fetch로 충분
• 실무/규모 있는 프로젝트 → Axios 권장

---

12. 정리

개념 설명

Axios	Promise 기반 HTTP 클라이언트
장점	JSON 자동 파싱, 에러 처리, 인터셉터, 취소 지원
인스턴스	공통 설정 재사용
인터셉터	요청/응답 전후 미들웨어
실무 패턴	로그인 토큰, 글로벌 에러 핸들링, API 모듈화

---

13. 마무리

이제 fetch와 Axios 둘 다 자유롭게 다룰 수 있게 됐다.
Axios를 익히면 더 이상 “API 요청”이 아니라
“데이터 관리” 수준으로 사고할 수 있다.

Axios는 단순한 요청 도구가 아니라,
프론트엔드 애플리케이션의 혈관이다.