◼ Custom Instance의 개념과 필요성

Custom Instance의 필요성

지금까지는 아래와 같이 데이터를 통신함.

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

별도의 설정 없이 기본 Axios 그대로 사용한 방식임. 하지만 애플리케이션 규모가 커질수록 동일한 설정을 반복 작성하게 됨. baseURL, 공통 헤더 등을 매 요청마다 작성해야 하는 비효율 발생.

이 문제를 해결하기 위해 Axios 인스턴스 사용 가능. 공통 설정을 한 곳에서 관리 가능.

Custom Instance 생성

Axios 인스턴스를 사용하면 설정 중앙 관리 가능.
예를 들어 baseURL 설정 시, 서버 주소가 변경되더라도 한 파일만 수정하면 전체 요청에 반영 가능.

// src/axios/api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체.
// https://axios-http.com/docs/req_config 참고
const api = axios.create({
  baseURL: "http://localhost:4000",
});

export default api;

이제 생성한 instance 사용하여 HTTP 요청 전송 가능.

// App.jsx

import "./App.css";
import { useEffect } from "react";
import api from "./axios/api";

function App() {
  useEffect(() => {
    api
      .get("/cafe")
      .then((res) => {
        console.log("결과 => ", res.data);
      })
      .catch((err) => {
        console.log("오류가 발생하였습니다!");
      });
  }, []);

  return <div>axios 예제입니다.</div>;
}

export default App;

서버 주소 변경 시 api.js만 수정하면 전체 요청에 반영 가능. 유지보수 용이.

◼ Interceptor의 개념과 필요성

Interceptor의 필요성

Interceptor는 HTTP 요청과 응답을 가로채는 기능 제공. 요청 전, 응답 전 특정 로직 실행 가능.

동작 시점은 다음과 같음.

1. 요청(request) 전송 직전(요청을 보내기 전, 요청이 출발하기 전)
2. 응답(response) 처리 직전(then(성공), catch(실패) 실행 전)

즉, 요청/응답 흐름 중간에 개입 가능.

대표 활용 예시는 다음과 같음.

• 공통 요청 헤더 추가
• 인증 관리(인증 토큰 자동 삽입)
• 로그 처리(로그 관련 로직 삽입)
• 공통 에러 핸들링

공통 로직을 한 곳에서 관리 가능. 중복 코드 제거 가능.

Interceptor 적용

요청 및 응답 시 특정 로직 실행 예시.

// src/axios/api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류.");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    // 정상 응답 시
    console.log("인터셉트 응답 성공!");
    return response;
  },
  function (error) {
	  // 응답 에러 발생 시
    console.log("인터셉트 응답 실패.");
    return Promise.reject(error);
  }
);

export default instance;

브라우저 콘솔에서 요청/응답 중간에 인터셉터 실행 로그 확인 가능.

요청실패 상황 구성

// src/axios/api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
  timeout: 1, // 1ms
});

export default instance;

타임아웃 설정을 통해 강제로 실패 상황 구성. 이렇게 설정하면 1ms의 짧은 시간 안에 서버 응답을 받지 못해 오류가 발생. 요청은 성공했지만 응답을 받지 못한 로그를 보면 타임아웃이 초과되었음을 알 수 있음.

요청 주소를 잘못 입력하거나 json-server를 종료한 뒤 테스트해볼 수도 있음.