라이브러리난이도 쉬움⏱ 1~2시간
axios에서 native fetch로 마이그레이션
axios→fetch
요약: 최신 Node·브라우저는 fetch를 내장하므로 axios 의존성을 빼고 얇은 래퍼로 대체할 수 있습니다. 자동 JSON 파싱·에러 처리·인터셉터는 직접 구현하거나 래퍼로 흡수합니다.
왜 옮기나
- fetch는 브라우저와 Node 18+에 내장돼 추가 의존성이 필요 없습니다.
- 번들 크기를 줄일 수 있습니다.
- 표준 API라 학습·이식이 쉽습니다.
전제 — 현재 상태
axios 사용, axios.get/post, 인터셉터, baseURL, 자동 JSON 파싱.
마이그레이션 단계
1
기본 호출 전환
axios.get(url)을 fetch + json()으로 바꿉니다. fetch는 JSON을 자동 파싱하지 않습니다.
const res = await fetch(url)
if (!res.ok) throw new Error('HTTP ' + res.status)
const data = await res.json()2
POST·헤더
body는 직접 JSON.stringify하고 Content-Type을 명시합니다.
await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })3
공통 래퍼로 인터셉터 대체
baseURL·인증헤더·에러처리를 얇은 래퍼 함수로 감싸 axios 인터셉터를 대체합니다.
async function api(path, opts) {
const res = await fetch(BASE + path, { ...opts, headers: { ...auth(), ...opts?.headers } })
if (!res.ok) throw new Error(await res.text())
return res.json()
}⚠️ 막히는 케이스 · 함정
- fetch는 4xx/5xx에서 reject하지 않습니다 — res.ok를 직접 확인해야 합니다.
- 타임아웃이 없으므로 AbortController로 직접 구현합니다.
- 쿠키 전송은 credentials: include를 명시해야 합니다.
✅ 검증: 성공·실패(4xx/5xx)·타임아웃·인증 케이스가 기존 axios와 동일하게 처리되는지 확인합니다.
fetchaxiosHTTP번들크기AbortController