Skip to main content

Tutorial

Usage#

์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ•„์ˆ˜์ ์œผ๋กœ Kakao ์ง€๋„ API๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Kakao ์ง€๋„ Javscript API

<script  type="text/javascript"  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=๋ฐœ๊ธ‰๋ฐ›์€ APP KEY๋ฅผ ๋„ฃ์œผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.&libraries=services,clusterer"></script>

TypeScript#

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด kakao.maps.d.ts ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

tsconfig.json์˜ compilerOptions.types ์†์„ฑ์— kakao.maps.d.ts ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

{  ...,  "compilerOptions": {    ...,    "types": [      ...,      "kakao.maps.d.ts"    ]  }}

Install#

npm install react-kakao-maps-sdk# oryarn add react-kakao-maps-sdk

Simple Usage#

๋งต์œ„์— ๋งˆ์ปค์™€ ์ธํฌ์œˆ๋„์šฐ ์˜ฌ๋ฆฌ๊ธฐ#

Live Editor
Result

๋งต์œ„์— ์ปค์Šคํ…€์˜ค๋ฒ„๋ ˆ์ด ์˜ฌ๋ฆฌ๊ธฐ#

Live Editor
Result

๋งต์œ„์— ๋งˆ์ปค ํด๋Ÿฌ์Šคํ„ฐ ์˜ฌ๋ฆฌ๊ธฐ#

Live Editor
Result

etc...#

๋” ๋งŽ์€ ์‚ฌ์šฉ ์˜ˆ์‹œ๋Š” Sample ํŽ˜์ด์ง€๋ฅผ ์ฐธ๊ณ  ํ•˜์—ฌ ํ™•์ธ ํ•ด์ฃผ์„ธ์š”.

Documentation#