[react] env 환경변수 세팅 (ft. process.env)

[react] env 환경변수 세팅 (ft. process.env)

 

react에서  env 변수 설정과

사용법 입니다.

 

env

프로젝트 개발 시 API_KEY 또는 DB 정보, port url 등 git 오픈소스에 올리면 안되고, 개발자만 알아야 하는 고유의 값들이 있습니다. 
이 값들 파일 외부에 저장시켜 불러와서 오픈 소스에 오픈되지 않고, 안전하게 사용할 수 있습니다. 

 

env 환경변수 세팅

• env 파일은 프로젝트의 최상위 루트에 만듭니다.
• 변수명은 'REACT_APP_' 으로 시작되야 합니다. 
• creat-react-app은 보안이 필요한 환경 변수의 유출을 막기 위해 reactapp으로 시작되는 변수는 무시합니다.

 

 

.env 파일 설정

REACT_APP_KAKAO_KEY=xxx
//REACT_APP_변수 이름

 

.env 변수 불러오기

• process.env.REACT_APP_ 는 react가 인식하는 예약어로 인식합니다.
• 작업 후 npm start 로 재구동합니다. 

const params = {
key: process.env.REACT_APP_KAKAO_KEY
}