[React] .env 사용하기(URL 등 비공개 이용)

env 파일 종류

.env: 기본
.env.local: test환경 외에 모든 환경에서 로드됨
.env.development: 개발환경 /npm start로 실행할 떄
.env.test: 테스트 환경 / npm test로 실행할 떄
.env.production: 배포 환경 / npm run build로 실행 할 때

1. root 경로에 .env 파일 생성

2. gitignore 파일에 설정(.env 추가)

3. 환경변수 설정

환경 변수를 설정 할 떄 REACT_APP을 반드시 붙여줘야 함

REACT_APP_MOVIE_API_KEY='sksms123131'
REACT_APP_MOVIE_API_PASSWORD='sksms123131'
REACT_APP_API_URL=https://api.staging.myservice.com

4. 사용

const API_KEY = process.env.REACT_APP_MOVIE_API_KEY
const paawrod = process.env.REACT_APP_MOVIE_API_PASSWORD
const url=process.env.REACT_APP_API_URL

 

5. dotenv를 설치해야 적용된다.(위에만 할 시 오류남)

npm install --save dotenv

 

https://velog.io/@silent10z/React-.env-%EC%82%AC%EC%9A%A9

React .env 사용

https://m.blog.naver.com/legend25/222033372402

리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)