React에서 dotenv 사용하는법(React에서 dotenv가 undefined로 뜬다면!)

프로그램 개발시 환경변수를 저장하기 위해 dotenv를 사용한다.

dotenv는 공개되어서는 안되는 중요한 정보들을 위해 주로 사용하기 때문에 은닉되어야 할 정보는 .env파일에서 관리하고

.env파일을 .gitignore에 추가시켜 정보의 노출을 막아주어야 한다.

 

설치 방법 :  npm install dotenv

사용 방법 :

1. 프로젝트의 루트 경로에 .env 파일을 만든다.

2. .env 파일에 설정하고 싶은 변수를 작성한다.

REACT_APP_ID_KEY = "blabla"
REACT_APP_SECRET_KEY = "blablabla"

3. 프로젝트에서 다음과 같이 사용하면 된다.

import dotenv from "dotenv";
dotenv.config();

const API_KEY = process.env.REACT_APP_API_KEY;

4. 잊지 않고 .env 파일을 .gitignore에 추가해준다.

 

 

일반 node.js에서 사용시 .env 파일에서 변수이름을 아무렇게나 지정해도 되었지만,

리액트에서는 REACT_APP을 붙여야 인식이 된다고 한다.

처음에 REACT_APP을 붙여야 하는지 모르고 그냥 썼다가 undefined로 값이 불러와지는 바람에 검색해서 해결했다.

또한 저렇게 수정해도 안된다면 서버를 다시 껐다 키면 된다. .env 파일은 서버를 재시작해야 반영이 된다고 한다!