[React] env 설정 (for cra)

CRA은 환경변수를 사용하기 위해 dotenv 모듈을 사용하고 있으며, env 파일은 프로젝트 루트에 존재해야한다

예시 파일)

1. 실행 우선순위

.env 파일은 실행 우선순위가 있다

-- npm start --
.env.development.local > .env.development > .env.local > .env

-- npm run build --
.env.production.local > .env.production > .env.local, .env

-- npm test --
.env.test.local > .env.test > .env (note .env.local is missing)

만약 위에 적힌 파일명이 아닌 다른 파일명으로 설정하고자 한다면 스크립트에 해당 환경에 맞는 .env 파일을 주입시켜야한다

"start": "react-scripts start",
"start:stag": "sh -ac '. ./.env.stag; react-scripts start'",
"start:prod": "sh -ac '. ./.env.prod; react-scripts start'",

2. 사용 예시

// .env
REACT_APP_URL=localhost:3000;

// .env.stag
REACT_APP_URL=localhost:5000;

// use
<a href={process.env.REACT_APP_URL}>URL</a>

cra 환경에서는 변수명 앞에 무조건 REACT_APP_이 있어야 인식이 된다
사용하지 않으면 변수가 무시된다

ref

• https://create-react-app.dev/docs/adding-custom-environment-variables/
• https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script