API 모듈화

Axios 인스턴스

request를 보낼 때 공통으로 사용하는 주소나 헤더를 axios 인스턴스로 생성한다.

import Axios from "axios";

import { BASE_URL } from "../axios.constant";

export const axiosInstance = Axios.create({
  baseURL: BASE_URL,
  timeout: 1000,
});

 

 

예를 들어, 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한번에 처리함으로써 중복 코드를 제거하고 유지보수성을 향상시킬 수 있다.

 

---

[ 참고 ]

* 절대경로 설정

 프로젝트 개발을 하다 보면 여기저기서 서로 다른 경로의 파일들을 불러와야 할 때가 많은데, 상대 경로를 사용하게 될 경우 현재 파일이 어디에 속해있는지 파악을 해야 하는 번거로움이 존재한다. 절대 경로를 적용하는 방법은 일반 리액트 프로젝트의 경우 jsconfig.json 파일에서, 타입스크립트 프로젝트에서는 tsconfig.json 파일에서 수정하면 된다.

타입스크립트 설정을 할 수 있는 tsconfig.json 파일을 살펴보면 최상위 경로는 compilerOptions, include, exclude 속성으로 구성되어 있다.이 중 compilerOptions은 어떤 컴파일 설정을 사용할지 설정해준다. 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@apis/*": ["./apis/*"],
      "@assets/*": ["./assets/*"],
      "@components/*": ["./components/*"],
      "@constants": ["./constants"],
      "@hooks/*": ["./hooks/*"],
      "@screens/*": ["./screens/*"],
      "@services/*": ["./services/*"],
      "@styles/*": ["./styles/*"]
    }
  }
}

위 코드처럼 컴파일러 옵션에 추가 설정을 하면 되지만, CRA로 리액트 환경을 구축했을 때에는 tsconfig에서 경로를 인식하지 못한다. CRA 내부의 Webpack 설정 때문에 tsconfig를 변경한 내용이 적용되지 않고 초기에 생성된 tsconfig 설정으로 돌아가서 생기는 문제이다. CRA는 Webpack 설정을 숨겨놓아서 이를 직접 수정하기 위해서는 eject 명령어를 수행해야 한다. 그러나 CRA는 한 번 eject하면 다시 되돌릴 수 없기 때문에 eject 대신 craco를 사용해서 tsconfig의 절대경로 설정을 변경한다.

npm install --force @craco/craco	// 라이브러리
npm install --force -D craco-alias	// 플러그인

//npm install --force 
//로컬에 다운로드 복제본이 존재하더라도 다시 온라인에서 다운로드 받는다

craco 라이브러리를 사용하기 위해서는 설치를 해줘야 하지만 의존성 버전이 맞지 않아 오류가 발생하기 때문에 --force를 통해 다운받는다. 그리고 타입스크립트 설정을 carco가 다룰 수 있도록 carco.config.js 라는 라이브러리 설정 파일을 작성한다.

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: "./src",
        tsConfigPath: "tsconfig.paths.json",
      },
    }
  ]
};

 

* d.ts (type definition) 파일

tsconfig.json에서 declaration 옵션을 true로 주면, ts 파일을 js 파일로 컴파일하는 과정에서 자동으로 타입스크립트 파일마다 d.ts파일이 생성된다.

{
  "compilerOptions": {
    "declaration": true,
    }
}

d.ts 이란 기존 JS로 만들어진 서드파티 모듈들을 typescript 환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일이다. d.ts 파일이 있으면 코드 자동완성을 통해 생산성 높은 작업을 할 수 있다. 

npm install typescript
npm install -D typescript @types/node @types/react @types/react-dom @types/jest

 

처음 타입스크립트를 설치할 때 사용했던 @types 명령어가 .d.ts.를 사용하여 모듈을 받아오는 방식이었다. d.ts 파일은 타입선언만 이루어져 있다. d.ts 파일 작성법은 다음과 같다.

 

• @types 안에 모듈명의 디렉토리를 생성한다.
• 생성한 디렉토리 안에 index.d.ts를 생성한다.
• export 할 타입의 인터페이스를 선언한다.
• 해당 인터페이스 타입의 변수를 선언한다.
• export를 선언한다.

 

* Axios 인터페이스 종류

 

• AxiosRequestConfig (다양한 요청 옵션)
  Axios 요청에 대한 설정을 정의하는 인터페이스
• AxiosResponse (서버로부터 받은 데이터)
  Axios 응답을 나타내는 인터페이스
• AxiosError (에러 상태 및 메시지)
  Axios 요청 중 발생한 오류를 나타내는 인터페이스