npx create-react-app --template typescript
Kakao Developer ๋ฑ๋กํ๊ธฐ
๊ฐ๋ฐ์ ์ดํ๋ฆฌ์ผ์ด์ ๋ฑ๋กํ๊ธฐ : https://developers.kakao.com/console/app
์ฑ ํค ์ป๊ธฐ
'๋ด ์ดํ๋ฆฌ์ผ์ด์ ' ์ ๋ค์ด๊ฐ๋ฉด ํค๊ฐ ์ญ ๋์ค๋๋ฐ ๊ฑฐ๊ธฐ์ Javascript๋ฅผ ์ ํํ๋ค.
์ฌ๊ธฐ ๋ค์ด์๋ ํค๋ฅผ, index.html ์ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค
public / index.html
<head>
...
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey={๋ด๊ฐ ๋ฐ์ key}&libraries=services"
></script>
...
</head>{}๋ถ๋ถ์ {}๋ ์ ์ธํ๊ณ ~~~ ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค!
'.env' ๋ก ์ค์ ํ๊ธฐ
๋์ ์์คํ key๋ฅผ html์ ๋
๋ค ๋ฐ์ง ์๊ณ
๋ฐ๋ก ๋นผ์ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ด๋ค
.env
REACT_APP_KAKAO_MAP_KEY=๋ด๊ฐ ๋ฐ๊ธ๋ฐ์ KEYindex.html
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%= process.env.REACT_APP_KAKAO_MAP_KEY%>"
&libraries="services"
></script>์ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ ํด์ ๋ฃ์ด์ฃผ์๋ค
%REACT_APP_{env}% ํ์
์นด์นด์ค๋งต ๋ถ๋ฌ์ค๊ธฐ
ํ์ ์คํฌ๋ฆฝํธ ์ค์
declare global {
interface Window {
kakao: any;
}
}kakao ๊ฐ์ฒด์ ์กด์ฌ ์ฌ๋ถ๋ฅผ typescript์์ ์ธ์ํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์
Property 'kakao' does not exist on type 'Window & typeof globalThis'.
์ด๋ฐ ์ค๋ฅ๊ฐ ๋ฐ ๊ฒ์ด๋ค. ์ด๊ฑธ ๋ฐฉ์งํ๊ธฐ ์ํด kakao ๋ผ๋ ๊ฐ์ฒด๊ฐ window์ ์กด์ฌํ๊ณ ์๋ค๊ณ ์ธ์์์ผ์ค์ผ ํ๋๋ฐ,
๊ทธ๋ด ๋ ์ฌ์ฉํ๋ typescript ๋ฌธ๋ฒ์ด declare์ด๋ค.
๊ธฐ๋ณธ ๋งต ๋์ฐ๊ธฐ
https://apis.map.kakao.com/web/guide/
MapBox.tsx
import { useEffect } from "react";
declare global {
interface Window {
kakao: any;
}
}
const MapBox = () => {
useEffect(() => {
let container = document.getElementById(`map`); // ์ง๋๋ฅผ ๋ด์ ์์ญ์ DOM ๋ ํผ๋ฐ์ค
let options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // ์ง๋ ์ค์ฌ ์ขํ
level: 3, // ์ง๋์ ๋ ๋ฒจ(ํ๋, ์ถ์ ์ ๋)
};
let map = new window.kakao.maps.Map(container, options); // ์ง๋ ์์ฑ ๋ฐ ๊ฐ์ฒด ๋ฆฌํด
}, []);
return <div id="map" style={{ width: "100vw", height: "100vh" }} />;
};
export default MapBox;kakao ๊ฐ์ฒด๊ฐ window ํ์ ๊ฐ์ฒด๋ผ๋ ๊ฒ์ ์ ์ํด์ผ ํ๋ฏ๋ก window.kakao[~~] ๋ก ์ ๋๋ค.
App.tsx
import React from "react";
import MapBox from "./MapBox";
function App() {
return (
<div className="App">
<MapBox />
</div>
);
}
export default App;ํ๋ฉด
์๋ฌ?
ํน์๋ผ๋ cannot read properties of undefined reading 'maps' ์๋ฌ๊ฐ ๋ฌ๋ค๋ฉด,
์นด์นด์ค ๊ฐ๋ฐ์ ํ์ด์ง์์
๋ด ์ ํ๋ฆฌ์ผ์ด์
>์ฑ ์ค์ >ํ๋ซํผ ์ ๋ค์ด๊ฐ
Web ๋ถ๋ถ์ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ด์ผ ํ๋น
3000 ๋์ /๋ ๋นผ์ผ๋ง ํจ! ์ด์ฐจํผ ๋ฑ๋ก์ด ์ ๋จ
์ง๋ ํ์ ๋ฐ๊พธ๊ธฐ
// ์ผ๋ฐ ์ง๋์ ์ค์นด์ด๋ทฐ๋ก ์ง๋ ํ์
์ ์ ํํ ์ ์๋ ์ง๋ํ์
์ปจํธ๋กค์ ์์ฑํฉ๋๋ค
let mapTypeControl = new kakao.maps.MapTypeControl();
// ์ง๋ ํ์
์ปจํธ๋กค์ ์ง๋์ ํ์ํฉ๋๋ค
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
ํ๋ ์์
์ด ์์์ผ๋ ์ผ๋จ ์ค๋์ ์ฌ๊ธฐ๊น์ง๋ง ๋ง๋ณด๊ธฐ๋ก ํ๋ค
์ค๋์ ์ฒซ ๋ ์ด๊ธฐ ๋๋ฌธ์ .. ใ
_ใ
๋๋ฌด ๊ธฐ์ด๋ง ์ฌ๋ ค์ ๋จธ์ฑ..ํ๋ ๊ทธ๋๋ ๋ด๊ฐ ์ ๋ฆฌํด๋์ ๊ฒ๋ค์
์ธ์ ๊ฐ ๋์๊ฒ ๋์์ฌ ๊ฒ์ด์ผ
'TIL > Typescript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [TIL] TypeScript์์ Record ํ์ ํ์ฉ (0) | 2023.11.05 |
|---|---|
| [TIL] TypeScript ๋ก ๋คํฌ๋ชจ๋ ๊ตฌํํ๊ธฐ ๐ / ์ด๋ฏธ์ง ์ฝ์ ๐ (1) | 2023.05.20 |
| [TIL] Class + TS (1) | 2023.05.20 |
| [TIL] TypeScript ํ์ ํ์ ํ๊ธฐ <Narrowing> (1) | 2023.05.20 |
| Typescript ์์ ์ ํจ๊ป ์ต์ํด์ง๊ธฐ : part 1 (1) | 2023.05.19 |
