JavaScript Axios 인스턴스와 인터셉터 완전 정복

이 글에서는 Axios 인스턴스 생성법과 인터셉터를 활용한 공통 요청/응답 처리 방법을 실무 예제와 함께 정리했습니다.

중급 개발자로 가는 실전 테크닉, 지금부터 같이 배워볼게요!

💡 Axios 인스턴스란?

Axios 인스턴스란 공통 설정을 담은 Axios 객체를 말해요.

매번 같은 옵션을 넣을 필요 없이, 기본 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;

✔ baseURL : 기본 URL 설정
✔ timeout : 요청 제한 시간(ms)
✔ headers : 공통 헤더 등록 가능

🛡️ 인터셉터(Interceptor)란?

요청 또는 응답이 서버로 보내지거나, 클라이언트로 오기 전에 가로채서 처리하는 기능이에요.

공통 토큰 추가, 에러 메시지 출력, 로딩 처리에 유용합니다.

⚙️ 요청 인터셉터 설정

api.interceptors.request.use(
  config => {
    // 예: 토큰 자동 추가
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
    return config;
  },
  error => Promise.reject(error)
);

⚙️ 응답 인터셉터 설정

api.interceptors.response.use(
  response => response,
  error => {
    alert("문제가 발생했습니다!");
    return Promise.reject(error);
  }
);

✔ 요청 전 데이터 가공
✔ 에러 발생 시 공통 처리 가능

📝 실전 호출 예제

import api from "./api";

// 데이터 가져오기
api.get("/posts/1")
  .then(response => console.log(response.data))
  .catch(error => console.error("에러 발생:", error));

📌 정리

이번 강좌에서는 Axios 인스턴스 생성과 인터셉터 설정 방법을 배웠습니다.

이를 활용하면 API 호출 코드가 훨씬 깔끔해지고, 중복 코드 없이 효율적인 개발이 가능해집니다.

📚 다음 글 예고

다음 글에서는 비동기 처리 async/await와 Axios를 함께 활용하는 실전 예제를 준비할게요!

더욱 실무다운 개발 스타일을 경험해 보세요 😊