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_으로 시작해야 한다
설정 끝!
'STUDY - 공부기록 > Web' 카테고리의 다른 글
[React] 리액트에서 toast 알림창 직접 만들어보기 (0) | 2021.09.18 |
---|---|
[CSS] grid 요소 넘어가는 image 자르기 (0) | 2021.09.02 |
[CSS] 텍스트 외곽선 효과 주기, 텍스트 테두리 만들기 (0) | 2021.08.08 |
[Inflearn] 심리테스트 사이트 만들기 4 (0) | 2021.07.01 |
[Inflearn] 심리테스트 사이트 만들기 3 (0) | 2021.07.01 |