[React] dotenv 사용시 주의할 점

React의 경우 dotenv를 사용할 때 조금 주의할 점이 있다. 

 

1. import dotenv????

많은 기술 블로그에서 dotenv를 import 해야 한다고 나와있는데 사실 React는 그런 거 필요 없다. 오히려 import 하면 아래와 같은 에러를 만날 것이다. 

 

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24

 

없이도 그냥 process.env로 접근 가능하다.

 

2. REACT_APP_ 으로 env 설정하기

필자는 이부분에서 시간을 많이 낭비했다. express에서 env 설정하던 기억이 남아 REACT_APP_없이 env를 설정했는데, React에서는 자체 변수와의 충돌을 피하기 위해서 REACT_APP_이 있어야 인식이 가능하다. 

 

아래와 같이 .env 파일을 작성하자

 

REACT_APP_FIRBASE=helloword

 

3. 앱 재실행

모든 설정을 마치고 env 데이터가 잘 불러와지는지 확인하기 위해 console.log를 찍어보았는데 아무리 해도 undefined가 나오는 것이었다...!

 

멘붕에 빠질 뻔 했으나 리엑트 앱을 껐다 다시 켜니까 정상적으로 작동함을 확인할 수 있었다.