[FE] Axios 설정 및 네트워크 요청 관리

axios.create()와 Axios 인스턴스

Axios란?

• JavaScript에서 HTTP 요청을 쉽게 수행할 수 있도록 도와주는 라이브러리
• fetch() API보다 더 직관적이고, 자동 JSON 변환, 요청/응답 인터셉터 등 추가 기능 제공

Axios 인스턴스 (axios.create())란?

• axios.create()를 사용하면 기본 설정이 적용된 Axios 인스턴스를 생성할 수 있음
• 모든 API 요청에서 중복된 설정을 줄이고, 일관된 방식으로 요청을 보낼 수 있음
  ➡️ 즉, axios.create()를 사용하면 매번 baseURL, headers 등을 설정할 필요 없이 자동 적용됨! 🚀

예시 코드

import axios from 'axios';
import qs from 'qs';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 5초 후 요청 실패 처리
  headers: {
    'Content-Type': 'application/json',
    Accept: '*/*',
  }
});

export default apiClient;


// GET 요청 예제
apiClient.get('/users')
.then(response => console.log(response.data))
.catch(error => console.error('API 요청 실패:', error));

➡️ 모든 요청이 https://api.example.com을 기본 URL로 사용
➡️ 매번 headers를 설정할 필요 없이 자동 적용

1. baseURL : API 요청을 보낼 때 사용될 기본 URL
2. timeout
   • 요청이 설정된 시간 안에 응답하지 않으면 자동 실패처리
   • 네트워크 장애나 서버 다운 문제 발생 시 무한 대기 방지
3. headers
   • Content-Type : application/josn -> API 요청이 JSON 형식임을 명시
   • Accept : '/' -> 서버가 모든 유형의 응답을 허용하도록 설정

Axios 인스턴스를 사용하는 이유

axios.create()를 사용하여 Axios 인스턴스를 생성하면 여러 API 요청에서 공통 설정을 자동 적용할 수 있어 코드의 재사용성, 유지보수성, 가독성이 향상

💡 코드 중복 제거, 일관된 API 요청 방식 유지, 에러 처리 및 응답 처리 통합 가능

Axios Interceptors (요청/응답 인터셉터)

• Axios Interceptors(인터셉터)는 요청(Request) 또는 응답(response)이 처리되기 전/후에 가로채서 수정하는 기능
• 주로 인증 토큰 추가, 공통 에러 처리, 로딩 상태 관리 등에 사용됨

인터셉터 실행 흐름

1️⃣ 요청을 보내기 전(Request Interceptors)

• 모든 요청이 서버로 전송되기 전에 가로채서 수정할 수 있음.
• 주요 사용 사례:
  • 인증이 필요한 API 요청에 자동으로 Authorization 헤더 추가
  • 요청을 로깅하거나 특정 조건에서 요청을 취소

// ✔️ 모든 요청에 JWT 토큰 추가하는 코드
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error) // 요청 에러 처리
);

2️⃣ 서버에서 응답을 받기 전(Response Interceptors)

• 서버에서 응답이 도착했을 때 데이터를 가공하거나, 공통적인 에러 처리를 수행
• 주요 사용 사례:
  • 응답 데이터를 가공하여 클라이언트가 사용하기 편하게 변환
  • 특정 에러(401 Unauthorized 등)가 발생하면 로그인 페이지로 리디렉트

// ✔️ 401 에러 발생 시 자동 로그아웃
apiClient.interceptors.response.use(
  (response) => response, // 성공적인 응답 그대로 반환
  (error) => {
    if (error.response && error.response.status === 401) {
      alert('세션이 만료되었습니다. 다시 로그인해주세요.');
      localStorage.removeItem('token');
      window.location.href = '/login'; // 로그인 페이지로 이동
    }
    return Promise.reject(error);
  }
);