[React] API 설정 공통화 - 환경변수, axios 인스턴스 사용하기

기존에는 API 연결을 위해서 proxy설정을 하고 호출할 때 endpoint 경로를 적어주었다. 그런데 CORS설정이 완료되고 더 이상 proxy가 필요 없게 되어 삭제했더니 매 호출마다 전체 주소를 적어야 했다. 이 문제를 해결하기 위해 환경변수와 axios 인스턴스를 사용하여 공통적인 부분들을 관리하고자 했다.

 

1. 환경변수 설정

먼저 환경변수를 세팅해줬다. 환경변수를 사용하면 지금의 경우처럼 하드코딩된 값들을 대체할 수 있다는 장점도 있고, 이 외에도 여러 장점이 있다. 오픈 소스에 올리면 안 되는 값들을 .env파일로 관리하며 보안성을 높일 수 있고, 로컬 개발 환경과 실제 배포 환경에서 사용하는 설정도 분리할 수 있다.

 

작성 방법은 다음과 같다. 먼저 프로젝트의 최상위 루트에 .env파일을 만든다.

 

.env파일 만들기

.env 파일 안에 필요한 환경변수를 작성하는데, 이때 변수 이름은 REACT_APP_으로 시작하는 것이 권장된다.

REACT_APP_API_ORIGIN=https://mynote01.tistory.com
REACT_APP_API_DEFAULT_PREFIX=/api

나의 경우 위와 같이 작성했다. REACT_APP_API_ORIGIN에 서버 주소를 적어주면 된다. 서버에 항상 /api를 써서 요청해야 하기 때문에 PREFIX도 만들어주었다.

 

+) .gitignore에 .env파일을 추가하여야 올라가지 않는다!

 

2. axios 인스턴스 만들기

api 공통화

API들의 공통 설정을 넣기 위해 axios 인스턴스를 위와 같은 위치에 만들었다.

 

serverapi.js

import axios from "axios";

const baseURL = process.env.REACT_APP_API_ORIGIN + process.env.REACT_APP_API_DEFAULT_PREFIX
const serverapi = axios.create();

serverapi.defaults.baseURL = baseURL

export default serverapi;

 

먼저 axios를 사용하기 위해 import 해주었다. (axios가 설치되어 있어야 한다! 이전 포스팅 참고)

 

baseURL은 환경 변수로 지정해 둔 주소에 지정된 prefix가 항상 붙을 수 있도록 지정해 주었고 axios.create();를 이용해서 axios 인스턴스를 만들어 serverapi에 넣어주었다. 그리고 인스턴스의 baseURL을 내가 만든 baseURL로 지정하였다.

 

 

3. 사용하기

Signup.js

  const isIdDuplicated = async () => {
    const api = `/dup_check/${uid}`;
    try {
      const res = await serverapi.get(api);
      if (res.status === 200) {
        return res.data.dup;
      }
    } catch (e) {
      console.log(e.response);
    }
  };

달라진 점은 다음과 같다.

// api 공통화 전
const api = `https://mynote01.tistory.com/api/dup_check/${uid}`;
axios.get(api);

// api 공통화 후
const api = `/dup_check/${uid}`;
sereverapi.get(api);