앱키 받기
- 우선 카카오 개발자 사이트에 접속해서 카카오 로그인을 한다.
- 내 애플리케이션에 들어가서 애플리케이션 추가하기를 누른다.
- 플랫폼 설정하기를 누르고 (나는 웹에서 사용할 것이기 때문에 web 플랫폼 등록을 선택했다) 도메인 설정을해준다.
- react를 사용해서 웹을 구현할 것이기 때문에 http: // localhost:3000도 추가해주었다.
HTML에 적용
- pubilc/index.html
- head or body 아무데나 상관 X
- 나는 head에 적용해주었다.
<head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=cd3cc06599003e273dbde25508f7f92c"
></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//...생략
</head>
- KakaoMap.js 파일 생성
import React, { useEffect } from "react";
import styled from "styled-components";
const MapContainer = styled.div`
width: 100%;
height: 400px;
`;
const { kakao } = window;
//불러오는 부모페이지에서 props로 location={pageDetail}전달
export const KakaoMap = ({ location }) => {
useEffect(() => {
var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
var options = {
center: new kakao.maps.LatLng(
location.location_x,
location.location_y
), //지도의 중심좌표
level: 3,
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
var markerPosition = new kakao.maps.LatLng(
location.location_x,
location.location_y
); //해당 위치 마커 표시
var marker = new kakao.maps.Marker({
position: markerPosition,
});
marker.setMap(map);
}, [location]);
return (
<div>
<MapContainer id="map"></MapContainer>
</div>
);
};env
앱키는 다른사람이 가져가서 악용할 경우가 생길 수 있기 때문에 .env파일로 관리하는 것이 좋다.
제일 밖 폴더에 .env 파일을 생성하고 카카오 앱키를 설정해 준다 다른 프레임워크는 모르겠지만 리액트는 REACT_APP으로 시작하는 이름으로 지어야 한다.
그렇지않으면 create-react-app이 이것을 인지하지 못하기 때문이다.
🚫 또한, kakao developers에서 플랫폼→web→도메인 주소 추가해줘야함!
.env
REACT_APP_KAKAO_MAP_KEY=[카카오 앱키]👇 .env를 사용해서 바뀐 코드
- %%를 양끝에 추가
<body>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%"
></script>
</body>🚫 “sdk.js?appkey=cd3cc06599003e273dbde25508f7f92c:4 A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/mapjsapi/js/main/4.4.8/kakao.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.”라는 warning이 떴음
→ 검색해보니 “해당 문구는 document.write로 스크립트를 생성하는 것은 가급적 자제해 달라는 문구이며 API 내부에서 사용하고 있기 때문에 뜨고 있습니다. (2G 같은)느린 네트워크 상에서 스크립트 블락이 일어날 수 있다는 문구인데 실제 지도 동작에는 문제가 없기 때문에 정책적으로 대응하지 않기로 했습니다.”라는 카카오답변이 있었다고해서 일단 무시하고 진행
.gitignore에 .env 추가하기
보통 Github에 본인의 코드를 push해서 관리한다.이 때, .env 파일이 같이 올라가면 어떻게 될까?개인 API KEY를 누군가가 나쁜 용도로 사용할 수도 있을 것이다.
따라서, .gitignore에 .env 파일을 입력해서 push를 미연에 방지하자.
// .gitignore
.envAPI KEY 사용하기
public/index.html에서<script>태그의src속성에 입력하는 경우src폴더의js, jsx, ts, tsx파일에서 사용하는 경우
- public/index.html
public/index.html에서 <script> 태그의 src 속성에 입력하는 경우에는 % 기호를 활용한다.
%.env에 저장해놓은 이름%- src/ ~.js, ~.jsx, ~.ts, ~.tsx
src 폴더의 js, jsx, ts, tsx 파일에서 사용하는 경우에는 process.env를 활용한다.
// App.js
function App() {
console.log(process.env.REACT_APP_GOOGLE_MAP_API_KEY); // API KEY 출력
}
export default App;