📅 2025-11-10

➡️ axios에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 axios

💡 axios란?

• node.js와 브라우저를 위한 Promise기반 HTTP 클라이언트
• HTTP 요청/응답을 간편하게 처리할 수 있으며, fetch보다 에러 처리, 인터셉터, 기본 설정이 편리함

설치

yarn add axios

💡 API 명세 보기

• Plural routes를 보면, 전체 정보나 상세 정보는 path variable로 url을 작성하면 됨
• Filter를 보면 GET요청을 하고자 할때는 query로 보내라고 명시 되어 있음

💡 GET

• get은 서버에 저장된 데이터를 불러올 때 사용

  axios.get(url[, config])

  • url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있음

    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);

💡 POST

• post는 입력한 데이터를 서버에 전송할 때 사용

  axios.post(url[, data[, config]])

  const body = { title: "new todo" };
  const { data: created } = await axios.post(`${BASE_URL}/todos`, body);
  setTodos((prev) => [...prev, created]);

💡 DELETE

• delete는 서버에 저장된 데이터를 삭제할 때 사용

  axios.delete(url[, config])

  const onDelete = async (id) => {
    await axios.delete(`${BASE_URL}/todos/${id}`);
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

💡 PATCH

• 데이터의 일부를 부분 수정할 때 사용 (PUT은 전체 수정, PATCH는 부분 수정)

  axios.patch(url[, data[, config]])

  await axios.patch(`${BASE_URL}/todos/${id}`, { title: "updated title" });

• 실제 서비스에서는 개발자 간 약속에 따라 수정 기능을 POST로 구현하기도 함

---

📌 axios와 fetch의 차이

// fetch
const res = await fetch('/todos');
const data = await res.json();

// axios
const { data } = await axios.get('/todos');

• axios는 fetch와 달리 response.json()을 호출하지 않아도 됨
  • axios가 내부적으로 응답을 JSON으로 자동 변환해주기 때문

항목	fetch	axios
응답 데이터 파싱	수동 (response.json())	자동 (response.data)
반환 값	Response 객체	실제 JSON 데이터
에러 처리	수동으로 상태코드 확인 필요	200~299 외 상태는 자동 reject
브라우저 호환성	일부 구형 브라우저 미지원	호환성 우수

---