Custom Instance란,

맞춤형 인스턴스로 Axios를 사용할 때 기본 설정(base configuration)을 미리 정해두는 방법이야.
반복적으로 작성해야 할 옵션(예: 기본 URL, 공통 헤더)을 한 번만 정의하고 재사용 가능해!

🔍 Custom Instance 사용 예제

// src > axios > api.js
import axios from 'axios';

// Axios Custom Instance 생성
const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 기본 URL
  timeout: 5000, // 요청 제한 시간
  headers: {
    'Content-Type': 'application/json', // 공통 헤더
    Authorization: 'Bearer YOUR_TOKEN_HERE', // 토큰 등 인증 정보
  },
});

// Custom Instance 사용
apiClient.get('/users')
  .then((response) => {
    console.log('사용자 데이터:', response.data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

🙌 Custom Instance의 장점

• 코드 간결화: 반복적인 설정을 줄이고, 코드 가독성을 높힘.
• 일관된 설정 관리: 모든 요청에 대해 동일한 설정을 적용 가능.
• 확장성: 다양한 API 클라이언트를 각각의 Custom Instance로 관리 가능.

Interceptors란,

Axios의 요청(Request)과 응답(Response)을 중간에 가로채 추가 작업을 수행하는 기능이야.
예를 들어, 요청 전에 인증 토큰을 추가하거나, 응답 데이터를 가공할 수 있어!

🔍 Interceptors 사용 예제

1️⃣ 요청 인터셉터 (Request Interceptor)

apiClient.interceptors.request.use(
  (config) => {
    // 요청 전에 실행되는 로직
    console.log('요청 정보:', config);
    config.headers.Authorization = `Bearer NEW_TOKEN_HERE`; // 토큰 추가
    return config; // 수정된 요청 설정 반환
  },
  (error) => {
    // 요청 오류 처리
    console.error('요청 오류:', error);
    return Promise.reject(error);
  }
);

2️⃣ 응답 인터셉터 (Response Interceptor)

apiClient.interceptors.response.use(
  (response) => {
    // 응답 성공 시 실행되는 로직
    console.log('응답 데이터:', response.data);
    return response; // 수정된 응답 반환
  },
  (error) => {
    // 응답 오류 처리
    console.error('응답 오류:', error);
    if (error.response && error.response.status === 401) {
      console.log('인증 오류 발생. 로그인 페이지로 이동합니다.');
    }
    return Promise.reject(error);
  }
);

🙌 Custom Instance의 장점

• 공통 작업 처리: 모든 요청에 공통적으로 적용할 작업(예: 인증 토큰 추가)을 처리.
• 에러 처리 간소화: 응답 에러를 중앙에서 처리가능.
• 데이터 가공: 서버로 보내기 전에 요청 데이터를 가공하거나, 응답 데이터를 재구성.

🔍 Custom Instance와 Interceptors를 함께 사용하는 예제

import axios from 'axios';

// Custom Instance 생성
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 요청 인터셉터 추가
apiClient.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer YOUR_TOKEN_HERE`;
    console.log('요청 정보:', config);
    return config;
  },
  (error) => {
    console.error('요청 오류:', error);
    return Promise.reject(error);
  }
);

// 응답 인터셉터 추가
apiClient.interceptors.response.use(
  (response) => {
    console.log('응답 데이터:', response.data);
    return response;
  },
  (error) => {
    console.error('응답 오류:', error);
    if (error.response && error.response.status === 401) {
      alert('로그인이 필요합니다!');
    }
    return Promise.reject(error);
  }
);

// Custom Instance 사용
apiClient.get('/users')
  .then((response) => {
    console.log('사용자 데이터:', response.data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

🚀 진짜 쉬운 설명

• Custom Instance: Axios 설정을 미리 정의해 반복 코드를 줄이고 일관성을 높이는 도구.
• Interceptors: 요청과 응답을 가로채 공통 작업(예: 토큰 추가, 에러 처리)을 처리하는 강력한 기능.