카카오맵 api를 사용해보자
- react, typescript, next.js
- https://developers.kakao.com/
해당 페이지 접속
- 애플리케이션 추가 후 지도테스트로 생성(이름은 상관없음)
- 플랫폼 등록
- 로컬 호스트 등록
- npm install react-kakao-maps-sdk
설치하기
- tsconfig.json에 types 추가하기
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"types": ["kakao.maps.d.ts"],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
- 랜딩 페이지에 코드 적어주면 끝
index.tsx
import { CustomOverlayMap, Map } from 'react-kakao-maps-sdk';
export default function Main() {
return (
<>
<Map
center={{
lat: 33.450701,
lng: 126.570667,
}}
style={{
width: '100%',
height: '450px',
}}
level={3}
/>
</>
);
}
_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
<Script
type="text/javascript"
src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false`}
strategy="beforeInteractive"
/>
</body>
</Html>
);
}
원래 기존 리엑트에서는 아래와 같이 했는데 작동함
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%NEXT_PUBLIC_KAKAO_API_KEY%&libraries=services,clusterer&autoload=false"
.env
NEXT_PUBLIC_KAKAO_API_KEY=12903892103809123abcbabdbacba
