다음은 axios의 인스턴스 client를 만들어서 내보내주는 파일입니다. 우리가 웹 요청을 할 때 axios.get(URL)과 같이 요청을 시작할 수 있는데요. 다음과 같이 인스턴스를 따로 만들어서 요청하면 요청할 서버의 주소를 사전에 설정할 수 있어서 주소를 입력할 때 더욱 편리합니다. 추가로 공통 헤더를 설정할 때도 용이합니다.

api/client.ts

import axios from 'axios';

// __DEV__ 값을 통해 현재 환경이 개발 환경인지 아닌지 판단할 수 있습니다.
const baseURL = __DEV__
  ? 'http://localhost:1337'
  : 'https://articles.example.com';

const client = axios.create({
  baseURL,
});

export default client;

이 코드에서는 baseURL 값을 선언해줬습니다. 이 과정에서 __DEV__ 값에 따라 개발 서버를 사용할지 실제 서버를 사용할지 결정합니다. 만약 현재 앱이 실행 중인 환경이 개발 환경이라면
__DEV__ 값이 true입니다. https://articles.example.com은 앱을 릴리스할 때 사용할 주소입니다(실제로 유효한 주소는 아닙니다). 추후 여러분만의 앱을 만들 때 프로덕션 서버의 주소를 이런 식으로 설정하면 됩니다.

axios 인스턴스를 생성할 때는 axios.create 함수를 사용합니다. 인자에는 설정 객체를 넣는데, 여기에 baseURL 값을 설정하면 됩니다.

인스턴스를 생성하는 두 번째 이유는 추후 Authorization 헤더를 모든 요청에 적용하기 위함입니다. 매번 요청할 때마다 헤더 설정에 관련한 코드를 입력할 수도 있지만, 인스턴스를 만들어서 한번 적용하는 형태가 훨씬 편합니다. 이 작업은 추후 회원 인증 기능을 구현할 때 다뤄보겠습니다.