환경변수 설정

보통 설정하는 이유는 주요 정보를 숨기거나, 실제 개발될 때와 프로덕션으로 올렸을 때 다르기 때문인 경우이다.

많은 경우의 수가 있지만, 대체적으로는 API 주소나 키같은 경우가 많을 것이다. 아니면 주소가 다를 수도 있고...

이러한 경우에서 알아보려고 한다.

보통 리액트(CRA)에는 dotenv 기본적으로 설치되어 있기 때문에 따로 무언가를 설치하지 않고,

최상단 root에 .env 파일을 만들어 원하는 변수를 만들면 된다.

다만 변수를 만들 때

🌟 중요한 포인트 🌟

REACT_APP_API_URL 이와 같이 무조건 REACT_APP를 붙여 변수를 만들어야 사용가능!

만들어진 변수를 활용하고 싶을 때는 process.env.REACT_APP_API_URL 이와 같이 사용가능하다.

// 변수 활용 예시

const instance = axios.create({
  baseURL: `${process.env.REACT_APP_API_URL}`,
  timeout: 3000,
  timeoutErrorMessage: '다시 시도 바랍니다.',
});

위와 같이 만든 .env 파일은 github에 올라가면 안되기 때문에 .gitignore 파일에 추가로 표시해주는 게 좋다.

# api
.env

build하여 임시로 확인하는 방법

process.env.NODE_ENV 는 npm start 명령어로 실행했을 때 console.log로 찍어보면 development로 표시된다.

그이유는 기본적으로

npm start는 development으로,

npm build는 production으로,