[Next13 + TypeScript ] axios instance 생성

// apis > instance.ts 
import axios from 'axios';

const config = {
  backend: {
    baseURL: process.env.NEXT_PUBLIC_BACKEND,
  },
};

const server = config.backend.baseURL;

const instance = axios.create({
  // baseURL: server,
  withCredentials: true,
  headers: { 'Content-Type': 'application/json' },
});

export default instance;

apis 폴더를 만들고, 내부에 instance.ts 파일을 만들었다.

그렇다면 왜 만들었을까 ?

1. 중복 코드 방지: axios 인스턴스 를 만들어 설정하면 여러 요청에서 동일한 설정을 재사용할 수 있습니다. 이렇게 하면 중복 코드를 방지하고 코드 유지 보수가 쉬워집니다.

   만약 요청의 기본 설정이 변경되면 인스턴스 설정만 업데이트하면 되므로 모든 요청을 일일이 변경할 필요가 없습니다.

2. 기본 URL 설정: axios 인스턴스를 사용하면 기본 URL을 설정할 수 있습니다. 사용한 코드에서는 baseURL을 사용하여 모든 요청의 기본 URL을 설정하고 있습니다.

   이로 인해 요청을 보낼 때 URL을 전체로 지정하는 대신 상대적인 경로만 사용할 수 있습니다.

   이것은 코드를 더 간결하게 만들고 실수를 줄일 수 있습니다.

3. 인증 정보 설정: 특정 axios 인스턴스에는 인증 정보나 헤더와 같은 특정 요청 설정을 추가할 수 있습니다. 사용한 코드에서는 Authorization 헤더와 같은 요청 헤더를 설정하고 있습니다. 이를 특정 인스턴스에 추가하면 해당 인스턴스를 사용하는 모든 요청에 자동으로 해당 설정이 적용됩니다.

4. 테스트 용이성: axios 인스턴스를 사용하면 테스트 작성 시에 모의 HTTP 요청을 쉽게 만들 수 있습니다. 인스턴스를 모의화하여 요청 및 응답을 테스트하는 것이 편리합니다.

요약하면, axios 인스턴스를 사용하여 HTTP 요청을 보내면 코드의 재사용성이 높아지고 설정 관리가 편리해지며, 일관된 방식으로 여러 요청을 처리할 수 있습니다. 이것은 프로젝트의 구조화와 유지 보수를 도와주는 중요한 개념입니다.