안녕하세요😄
오늘은 리액트에서 카카오맵 API를 활용해보려고 합니다.
카카오에서 제공하는 API를 사용하기 위해서는
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
에서 어플리케이션을 등록을 한 후 그에 따른 API KEY를 발급받아야지 사용이 가능합니다.
내 어플리케이션에서 간단하게 등록을 한 후에 발급 받은
4가지의 API KEY 중에서 저희는
이 JavaScript키 를 활용할 겁니다.
이제 준비는 끝이니 바로 실전으로 들어가보겠습니다.
첫번째로 리액트 생성을 위해 터미널 명령어를 활용합니다
npx create-react-app myapp[내가원하는프로젝트이름 넣으면댐]
그리고 프로젝트가 생성 되고 오픈을 한 후에
터미널에서 미리 필요한 라이브러리 들을 추가해줍니다.
npm install react-kakao-maps-sdk --save위 카카오 라이브러리가 없으면 코드를 실행할 수 없으니 꼭 확인해야 합니다.
그리고 package.json 에 들어가서
"react-kakao-maps-sdk": "^1.1.26",요렇게 들어가 있으면 성공한 것 입니다.
만약에 위 코드가 없다면, 재설치를 하시기를 바랍니다.
다음으로는 아래 링크를 들어갑니다.
https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro
Tutorial | react-kakao-maps-sdk docs
Usage
react-kakao-maps-sdk.jaeseokim.dev
아래 링크에는 위 API를 사용하기 위한 예시 코드들이 많이 있습니다.
저는 처음 API를 활용해봤을때 헷갈렸고, 어디다가 어떻게 코드를 넣어야 하는지 몰라 구글링 하느라 많이 방황했습니다😅
그리고 위 튜토리얼 처음에 있는 코드를 public / index.html에 붙여 넣어야 합니다.
왜 여기다가 붙여넣어야하냐고 물어보실 수 있으니 간단하게 설명을 하자면
리액트는 주로 public/index.html 파일을 사용하여 외부 스크립트를 로드하고 초기화 작업을 수행합니다. 이렇게 하면 리액트 애플리케이션의 빌드 및 번들링 도구가 해당 HTML 파일을 포함하여 웹 페이지를 생성하고, 필요한 스크립트를 로드할 수 있습니다.
그러나 몇 가지 경우에는 리액트 애플리케이션 내에서 외부 라이브러리를 사용하는 방법도 있습니다. 예를 들어, npm 패키지로 제공되는 라이브러리를 직접 import하여 사용할 수 있습니다. 하지만 카카오맵 API와 같은 경우, 해당 API가 외부 스크립트로만 제공되므로 HTML 파일에 스크립트 코드를 붙여넣어야 합니다.
그러면 리액트 kakao-sdk도 다운받았는데 Index.html 에다가도 붙여넣어야하나요?
답변 : 네 넣어야 합니다.
리액트를 실행시키고 F12를 눌러 검사를 해보면 처음에 뜨는 것은 제가 추가하고 작성한 컴포넌트 들이 아닌, html 코드들이 나올 것 입니다.
결국 이 html파일에 <div id="root"></div> 를 기점으로 컴포넌트들을 추가하는 방식이기 때문에 그렇습니다.
자세한건 검색을.....
이제는 리액트 파일을 실행시켜 봅니다.
npm start
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta http-equiv="Content-Security-Policy" scr ipt-src='unsafe-inline';>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=본인 키"></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
그리고 리액트 파일에서 css파일이랑 js파일들 내부를 깔끔하게 다 비워버립니다.
그리고 KakaoMap 이라는 js 파일을 생성 합니다.
그리고 그 파일에 이렇게 코드를 넣습니다.
import { Map, MapMarker } from "react-kakao-maps-sdk";
const KakaoMap = () => {
return (
<div id="map" className="map">
<br />
<Map
//본인이 찾는 위도, 경고 바꾸기
center={{ lat: 37.527922174498165, lng: 127.03449857622938 }}
style={{
width: '100%',
height: '600px',
borderRadius: '15px',
}}
>
//본인이 찍을 마커 위도, 경도 넣기
<MapMarker
style={{ border: 'tranparent' }}
position={{ lat: 37.527922174498165, lng: 127.03449857622938 }}
>
<div
style={{
color: '#9971ff',
fontSize: '16px',
fontWeight: '400',
border: '2px solid #9971ff',
borderRadius: '50px',
padding: '2.5px',
margin : '0px 38px'
}}
>
ㅎㅇㅇ?
</div>
</MapMarker>
</Map>
</div>
);
};
export default KakaoMap;
그리고 위 코드를 App.js 파일에 넣어줍니다.
import './App.css';
import KakaoMap from "./component/KakaoMap";
function App() {
return (
<div className="App">
<KakaoMap2 />
</div>
);
}
export default App;
이렇게 코드를 작성하고 실행을 하게 되면
위 지도가 딱 띄워지게 됩니다.
만약에 위 지도가 보이지 않는다면은
App.css 파일에 들어가서
.map {
width: 43%;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
border-width: medium;
border-color: #D8D8D8;
border:gray;
}
위 스타일을 적용하고 하시면은 나올 겁니다.
다양한 지도API를 활용해보고 싶다면 아래 링크에서 한번 해보세요
이상입니다.