[React] Project 환경변수 설정

세팅

프로젝트를 진행했을 때,
외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 하기때문에, 환경변수 세팅을 진행해주었다.

[ 개발기 / 스테이징 / 운영 / ] 으로 나누어서 진행했으며, 방법은 다음과 같다.

최상위 폴더에

.env.development // 개발기
.env.production // 운영
.env.staging // 스테이징

그리고 각 폴더 안에 다음과 같이 작성해 주었다.

PROJECT_APP_TYPE = DEV
PROJECT_APP_BASE_API = https://주소
...

위와 같이 모두 동일하게 작성해준다.

만약, git에 올린다면, .gitignore에 포함시켜서 노출시키지 않도록한다.
(api 주소가 나와있기에 외부에서 사용 가능성이 높아짐)

사용법

따로 package를 다운받을 필요 없이, code 내에서

const api = axios.create({baseURL : process.env.PROJECT_APP_BASE_API, }); 

이런식으로 사용하면 된다.