react - axios, 환경변수

fetch api는 따로 설치가 필요없지만 axios가 더 사용하기 쉬운 것 같아서 api 연동에 axios를 많이 사용하는 것 같다.

 

 

1. axios 설치

 

npm install axios

 

 

2. base url 설정하기

 

// urls.jsx
export const BASE_URL = '...';

// api_config.jsx
import axios from 'axios'
import { BASE_URL } from '../../utils/urls';

const baseAxios = () => {
  const instance = axios.create({
    baseURL: BASE_URL,
  });

  return instance;
}

export const myAxios = baseAxios();

 

 

3. base url 환경변수 설정

base url은 서버 도메인인 경우가 많아서 환경변수로 따로 빼내주면 좋다.

 

 

4. env 파일 생성, 변수 설정

변수앞에 REACT_APP_  붙혀줘야함

'' "" 등 사용하지 않고 딱 값만 넣어주기

 

REACT_APP_BASE_URL=저쩌구

 

 

5.  환경변수 사용

process.env.변수명

 

export const BASE_URL = process.env.REACT_APP_NOTION_TOKEN;