🚀 Fetch → Axios 전환으로 배우는 HTTP 통신과 RESTful API

📌 계기

이번에 팀에서 “프로젝트 전반의 Fetch API를 Axios로 리팩터링해달라”는 요청을 받았다.

단순히 요청 코드를 바꾸는 작업처럼 보였지만,

막상 진행해보니 HTTP 통신의 구조와 RESTful API 설계까지

한 번에 이해할 수 있는 계기가 됐다.

---

🌐 1. HTTP 통신 기본 구조 복습

클라이언트(브라우저)와 서버는 HTTP 프로토콜을 통해 데이터를 주고받는다.

이때 요청은 보통 다음 네 가지 요소로 구성된다 👇

요소	설명	예시
Method	동작의 종류 (GET, POST, PATCH, DELETE 등)	POST /apis/posts
URL	리소스(데이터)의 위치	/apis/posts
Header	요청/응답의 부가 정보	Content-Type: application/json
Body	실제 전송되는 데이터	{ "content": "오늘 하루 너무 힘들다" }

---

🧩 2. RESTful API란?

REST(Representational State Transfer) 는

서버 자원(Resource)을 명확한 규칙으로 다루는 API 디자인 패턴이다.

Method	의미	예시
GET	조회	/apis/posts
POST	생성	/apis/posts
PATCH/PUT	수정	/apis/posts/:id
DELETE	삭제	/apis/posts/:id

이 규칙에 따라, Axios로 요청을 보낼 때

axios.get, axios.post, axios.delete가 자연스럽게 REST 구조를 표현한다.

---

⚙️ 3. Axios란?

Axios는 Fetch API를 더 다루기 쉽게 감싼 HTTP 클라이언트다.

항목	Fetch	Axios
JSON 변환	수동(res.json())	자동(res.data)
에러 처리	if (!res.ok) 필요	200대 외엔 자동 throw
쿠키 유지	credentials: 'include'	withCredentials: true
기본 헤더 설정	직접 매번 지정	인스턴스에서 전역 설정 가능
인터셉터	❌	✅ 지원

---

🧱 4. 코드 리팩터링 예시 모음

아래는 이번 프로젝트에서 실제로 바꾼 코드들이다.

(Next.js + React Query + Zustand 기반)

---

✅ (1) 로그아웃 요청

Before (Fetch)

await fetch('/apis/auth/logout', { method: 'POST', credentials: 'include' })
logout()
router.push('/login')

After (Axios)

await axios.post('/apis/auth/logout', null, { withCredentials: true })
logout()
router.push('/login')

✔ axios.post()는 body가 없을 때 null 전달

✔ 쿠키 세션 유지 시 withCredentials: true 필수

---

✅ (2) 로그인 요청

Before

const body = new FormData()
body.append('email', email)
body.append('password', password)

const res = await fetch('/apis/auth/login', { method: 'POST', body })
const data = await res.json()
if (res.ok) setUser(data.user)

After

const body = new FormData()
body.append('email', email)
body.append('password', password)

const res = await axios.post('/apis/auth/login', body, { withCredentials: true })
setUser(res.data.user)

✔ Axios는 자동으로 응답을 JSON으로 파싱 (res.data)

✔ 401, 500 등의 상태 코드는 자동으로 예외 처리됨

---

✅ (3) 게시글 작성 (POST)

Before

await fetch('/apis/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include',
  body: JSON.stringify({ content, tags }),
})

After

await axios.post('/apis/posts', { content, tags }, { withCredentials: true })

✔ JSON.stringify 필요 없음

✔ Content-Type 자동 지정

---

✅ (4) 게시글 목록 조회 (GET)

Before

const qs = new URLSearchParams({ cursor, limit })
const res = await fetch(`/apis/posts?${qs}`, { cache: 'no-store' })
if (!res.ok) throw new Error(`API 실패: ${res.status}`)
return res.json()

After

const qs = new URLSearchParams({ cursor, limit })
const res = await axios.get(`/apis/posts?${qs}`, { withCredentials: true })
return res.data

✔ cache는 axios에서 의미 없음 → 생략

✔ 200대 외 상태코드는 자동으로 catch로 전달

---

✅ (5) 게시글 상세 조회

Before

const res = await fetch(`/apis/posts/${id}`, { cache: 'no-store' })
if (res.status === 404) throw new Error('NOT_FOUND')
return res.json()

After

try {
  const res = await axios.get(`/apis/posts/${id}`, { withCredentials: true })
  return res.data
} catch (e) {
  if (axios.isAxiosError(e) && e.response?.status === 404) {
    throw new Error('NOT_FOUND')
  }
  throw e
}

✔ 404 예외는 명시적으로 처리 가능

---

✅ (6) 마이페이지 내 게시글 삭제

Before

await fetch(`/apis/me/posts/${id}`, { method: 'DELETE' })

After

await axios.delete(`/apis/me/posts/${id}`, { withCredentials: true })

✔ RESTful 규칙에 맞는 메서드 이름(delete)

✔ 에러 발생 시 catch에서 간단히 처리

---

📚 5. HTTP 메서드와 Body 구조 정리

Method	Body 사용 여부	목적	예시
GET	❌ 없음	데이터 조회	/apis/posts
POST	✅ 있음	새 데이터 생성	/apis/posts
PATCH/PUT	✅ 있음	일부 수정	/apis/posts/:id
DELETE	❌ 없음	데이터 삭제	/apis/posts/:id

💡 POST만 body를 반드시 포함해야 하고,

GET이나 DELETE는 URL로 리소스를 지정하는 게 원칙이다.

---

🧠 6. Axios로 배우는 HTTP 통신의 본질

Axios는 단순히 문법을 간결하게 만드는 도구가 아니라,

HTTP 요청의 구조를 명확하게 드러내는 도구였다.

axios.post() → “서버에 데이터를 보낸다”axios.get() → “서버에서 데이터를 가져온다”axios.delete() → “서버의 리소스를 제거한다”

이렇게 HTTP의 의미가 코드에 녹아든다.

---

⚙️ 7. 리팩터링 후 장점 요약

항목	Fetch	Axios
코드 길이	반복 많음	짧고 간결
에러 처리	if 문 수동	catch 자동
공통 설정	불가	인스턴스에서 가능
유지보수성	낮음	높음
REST 표현	제한적	직관적 (get/post/delete)

---

🧭 8. 이번 리팩터링으로 배운 점

1. Axios는 fetch의 대체제가 아니라 상위 추상화 도구였다.
2. RESTful 구조의 의미를 코드로 실감했다.
   • POST엔 body가 꼭 있어야 하고,
   • GET은 데이터를 변경하지 않아야 한다.
3. HTTP 통신의 흐름 — 요청/응답/상태 코드의 역할을 자연스럽게 이해하게 됐다.
4. 코드의 일관성과 가독성이 크게 좋아졌다.