Environment Variables in create-react-app

react로 개발할 때 spring profile처럼 상황에 맞게 환경변수를 정의하는 방법을 알아보겠습니다.
일단 다음과 같이 create-react-app을 이용하여 프로젝트를 생성합니다.

프로젝트 생성 실행

프로젝트 생성 완료

생성완료된 프로젝트를 Visual Studio Code로 열고 터미널에서 yarn start명령을 통해 실행해보겠습니다.

이상없이 프로젝트가 생성된것을 확인했으면 이제 환경변수를 정의해보겠습니다.
제일 중요한것은 새로운 환경변수의 정의는 무조건 접두어 "REACT_APP_"으로 시작해야 됩니다. 
이제 package.json에 환경변수를 정의하고 react 파일에서 정상적으로 로딩되는지 테스트를 진행해 보겠습니다.
scripts 에 다음과 같이 새롭게 정의하고

"start:env": "cross-env REACT_APP_TYPE1=value1 REACT_APP_TYPE2=value2 react-scripts start",

yarn start:env로 실행하니 cross-env가 없다고 오류가 납니다.
cross-env는 OS에 상관없이 환경변수를 정의하게 해주는 라이브러리입니다. 환경이 macOS라 그냥 cross-env 부분만 삭제하고 실행해도 상관없는데 그래도 다른환경 고려하여 설치를 하고 다시 실행해보겠습니다.

cross-env를 다음과 같이 설치하고

설치 완료 후 yarn start:env 를 실행하면 이상없이 실행되는것을 확인할 수 있습니다.
변수값을 확인하기 위해 index.js파일에 다음과 같이 log를 기록하게 하였습니다.

console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`)
console.log(`process.env.REACT_APP_TYPE1: ${process.env.REACT_APP_TYPE1}`)
console.log(`process.env.REACT_APP_TYPE2: ${process.env.REACT_APP_TYPE2}`)

이제는 .env 파일을 통해 환경변수를 정의해보겠습니다. create-react-app을 통해 생성한 프로젝트는 이미 dotenv 라이브러리가 설치되어 있기 때문에 바로 사용이 가능합니다. 루트 디렉토리에 .env파일을 생성하고 다음과 같이 정의합니다.

아래 그림과 같이 브라우저 로그를 통해 잘 설정된 모습을 확인할 수 있습니다.

.env 파일은 .env.development, .env.test, .env.production 파일을 통해 각 상황에 맞는 환경변수를 정의할 수 있는 기능도 제공합니다.

위에서 설명한 내용들은 다음 링크를 통해 좀 더 자세한 정보를 확인할 수 있습니다.
https://create-react-app.dev/docs/adding-custom-environment-variables/