[React] 사용자 지정 환경변수 추가 / secret API KEY 설정

앱을 배포하다 보면 secret key들이 존재한다.

다른 누군가에게 공유되면 안되는 key들이 존재하는데

이 것을 코드에 직접적으로 노출하면 안된다.

 

보통 그러한 secret key들은 환경변수로 만들어서 숨겨서 관리를 하고

배포할 사이트에서 숨겨진 변수를 사용할 수 있게 설정을 하게 된다.

 

React에서 환경변수 설정을 하는 법을 알아보자.

 

예를들어 abcdefg라는 key를 가지고 있다면

 

나의 react프로젝트의 최상위 폴더에 .env라는 폴더를 만들어준다.

(src폴더의 바깥, package.json이 있는 곳)

 

// .env

REACT_APP_SECRET_KEY=abcdefg

위와 같이 적어준다.

*이름은 마음대로 지정할 순 있지만 변수명의 앞부분은 REACT_APP_이 필수적으로 들어가야한다

ex) REACT_APP_KEY / REACT_APP_SECRET_CODE

 

그리고 사용하고 싶은 곳에 아래의 코드를 적으면 해당 key를 변수로써 사용할 수 있다. (전역)

process.env.REACT_APP_SECRET_KEY

 

그리고 git commit을 할 때 해당 파일이 commit 되지 않게

.gitignore 파일 안에  .env를 적어준다. **중요

 

 

참고로 .env파일 생성/수정 후에는 서버재부팅을 해주어야 한다

 

https://create-react-app.dev/docs/adding-custom-environment-variables