[React] 리액트에서 환경 변수(.env)설정하기, API키 정보 숨기기

git을 이용해 프로젝트 작업을 할 때, API KEY나 비밀번호와 같이 민감한 정보가 포함되어있어 커밋이 곤란한 때가 있다. 

그럴 때는 환경 변수와 .gitignore를 사용하면 쉽게 문제를 해결할 수 있다.

 

 

1. 프로젝트의 루트 지점에 .env 파일을 생성한다. (.gitignore가 없다면 이것도 같이 만들자.)

2. 환경변수로 사용할 내용을 .env 파일에 작성한다.

REACT_APP_(환경 변수 이름) = (값)

변수가 여러개여도 세미콜론이나 반점(,)을 쓰지 않고 엔터로 구분해둔다.

3. gitignore파일에 .env를 추가한다. 

4. 해당하는 키를 쓰는 코드에서 process.env.(키이름)으로 불러다 쓴다. 

 

 

주의사항

환경변수는 서버를 재시작하면 그때부터 적용이 된다. 401 오류가 난다면 이 점부터 확인해보고, 그래도 안되면 dotenv를 설치해보자. 

 

---

참고 자료

https://velog.io/@edie_ko/React-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-API-key-%EC%88%A8%EA%B8%B0%EA%B8%B0.env-%EC%9D%B4%EC%9A%A9

https://stackoverflow.com/questions/54313387/error-with-api-key-401-error-in-env-file