🗂️ Axios 란?

Axios

브라우저와 서버 간에 HTTP 요청을 보내기 위한 자바스크립트 라이브러리
쉽게 말해: 프론트엔드 → 백엔드(API 서버) 로 데이터를 보내거나 받아올 때 쓰는 도구이다.

Axios vs fetch

두개 모두 HTTP요청을 보내기 위한 도구이다. 그렇다면 두개의 차이점이 무엇일까?

항목	Axios	fetch()
지원 여부	외부 라이브러리 (설치 필요)	브라우저 기본 내장
문법 간결성	더 간단하고 직관적	다소 복잡 (특히 에러/JSON 처리)
응답 JSON 자동 처리	자동 파싱 (res.data)	수동으로 .json() 호출 필요
에러 처리	HTTP 오류도 .catch()로 잡힘	200~299 외 에러는 직접 처리해야 함
요청/응답 인터셉터	가능	불가능
요청 취소	CancelToken 지원	직접 AbortController 써야 함
브라우저 지원	IE 포함 대부분 브라우저	IE 미지원
헤더 설정	쉬움	상대적으로 복잡함

fetch() 사용 예시

// fetch는 브라우저에 기본 내장된 함수로, URL에 HTTP 요청을 보낸다
fetch("https://jsonplaceholder.typicode.com/users")
  .then((res) => {
    // res.ok는 HTTP 상태코드가 200~299 범위일 때 true이다
    if (!res.ok) {
      throw new Error("HTTP 오류: " + res.status); // 수동으로 에러 체크 필요
    }
    return res.json(); // 응답 본문을 JSON으로 변환 (비동기 작업)
  })
  .then((data) => {
    // 위에서 파싱한 JSON 데이터를 받아서 사용
    console.log("유저 데이터 (fetch):", data);
  })
  .catch((err) => {
    // 네트워크 오류 또는 위에서 throw한 에러가 catch로 잡힘
    console.error("에러 발생 (fetch):", err);
  });

Axios 사용 예시

// axios는 외부 라이브러리로, HTTP 요청을 더 간결하고 강력하게 처리할 수 있다
import axios from 'axios';
axios.get("https://jsonplaceholder.typicode.com/users")
  .then((res) => {
    // res.data는 이미 JSON으로 자동 파싱된 데이터입니다
    console.log("유저 데이터 (axios):", res.data);
  })
  .catch((err) => {
    // 네트워크 오류뿐 아니라 HTTP 상태코드 에러(404, 500 등)도 자동으로 catch됨
    console.error("에러 발생 (axios):", err);
  });

Axios 설치

pnpm add axios
또는 
npm install axios

주요 메서드

메서드	설명
axios.get(url)	데이터 조회
axios.post(url, data)	데이터 전송
axios.put(url, data)	전체 수정
axios.patch(url, data)	일부 수정
axios.delete(url)	데이터 삭제

✅ axios.get(url)

서버로부터 데이터를 "조회(GET)" 할 때 사용
사용 상황) 게시글 목록 조회, 특정 유저 정보 가져오기

import axios from 'axios';

// 서버에서 사용자 목록을 조회
axios.get('https://jsonplaceholder.typicode.com/users')
  .then((res) => {
    // res.data에는 JSON 형태의 유저 배열이 담겨 있음
    console.log('유저 리스트:', res.data);
  })
  .catch((err) => {
    // 네트워크 문제나 HTTP 오류 발생 시 실행됨
    console.error('조회 실패:', err);
  });

✅ axios.post(url, data)

서버에 새로운 데이터를 "생성(POST)" 할 때 사용
사용 상황) 회원가입, 로그인, 댓글/게시글 작성

// 서버에 새 게시글 데이터를 전송하여 생성 요청
axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시글 제목',      // 게시글 제목
  body: '게시글 내용입니다.',   // 게시글 본문
  userId: 1                     // 작성자 ID
})
.then((res) => {
  // 생성된 게시글 데이터가 res.data에 담겨서 돌아옴
  console.log('게시글 생성 결과:', res.data);
})
.catch((err) => {
  // 요청 실패 또는 오류 발생
  console.error('게시글 생성 실패:', err);
});

✅ axios.put(url, data)

특정 데이터를 "완전히 덮어씌우는" 수정(전체 업데이트) 에 사용
사용 상황) 마이페이지 정보 전체 수정, 게시글 통째로 덮어쓰기

// 기존 게시글 전체를 새 데이터로 덮어쓰기 (모든 필드를 다시 보내야 함)
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  title: '전체 수정된 제목',
  body: '전체 수정된 내용',
  userId: 1
})
.then((res) => {
  // 수정된 게시글 데이터 반환
  console.log('전체 수정 결과:', res.data);
})
.catch((err) => {
  console.error('전체 수정 실패:', err);
});

✅ axios.patch(url, data)

특정 데이터의 "일부분만" 수정 할 때 사용
사용 상황) 게시글 제목만 수정, 프로필 이미지 한 가지만 변경

// 기존 게시글의 일부만 수정 (여기선 제목만 수정)
axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
  title: '부분만 수정된 제목'
})
.then((res) => {
  // 부분만 수정된 결과 데이터 반환
  console.log('부분 수정 결과:', res.data);
})
.catch((err) => {
  console.error('부분 수정 실패:', err);
});

✅ axios.delete(url)

특정 데이터를 "삭제(DELETE)" 할 때 사용
사용 상황) 게시글 삭제, 댓글 삭제, 계정 탈퇴

// 특정 ID를 가진 게시글을 삭제 요청
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then((res) => {
    // 삭제는 보통 내용 없이 상태 코드만 돌아옴 (204 No Content)
    console.log('삭제 완료, 상태코드:', res.status);
  })
  .catch((err) => {
    console.error('삭제 실패:', err);
  });