[React] api key 숨기기, React 환경에서 Kakao Map API 사용 시 api key를 관리하는 방법

React 환경에서 Kakao Map API를 사용하면서 api key를 관리하는 방법

1. dotenv 설치

yarn add dotenv
// or
npm install dotenv

 

2. index.html의 head부분에 스크립트 추가

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

 

3. 프로젝트의 최상단에 .env 파일 생성

src파일 내에 만들어야 했나 싶었는데 index.html에서도 써야하고 해서 그냥 최상단? 사진 위치에 해줬을 때 잘 동작했음

 

4. gitignore에 등록

우리의 소중한 api key는 노출되면 안되니까

 

5. env에 api key 작성

REACT_APP_KAKAOMAP_API_KEY=qwer1234

반드시 REACT_APP_으로 시작해야 한다

 

설정 끝!