HTML .env 변수 넣기 (feat. React)

🔊  HTML script 태그에 env 변수 넣기  

 

테스트 용으로 써오던 카카오 map api 자바스크립트 키를 env 파일에 넣어 관리하기로 함.

진즉에 했었어야 했는데 방관. 새로운 api 키를 발급받아서 교체해주었다.

이미 깃헙에 올라간 코드는 삭제할 수 없으니,

발급받은 테스트용 api키를 파기하지만 절대 이런 실수는 용납안됨 ..! 👀

 

❗ 오늘의 교훈 : 중요한 설정은 잊지말고 초기에 해주자. 

 

1. dotenv 설치
2. .env 파일에 키,값 넣어주기 (리액트만의 규칙 있음)
3. gitignore 폴더에 .env 추가 

 

1.

npm install dotenv

 

2.

// HTML

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_JAVASCRIPT_KEY%"
></script>

// .env

REACT_APP_KAKAO_JAVASCRIPT_KEY=leeKey

 

.env 변수 이름 반드시 REACT_APP_ 으로 시작해야 함.

 

3.

// .gitignore

.env

 

설정 끝 👌