Kakao Map API 사용하기 (컴포넌트 분리)

Kakao Developers 설정하기

1. Kakao developers 에서 애플리케이션 추가 (계정이 없다면 회원가입 먼저!)

2. 플랫폼으로 가서 개발환경 또는 배포환경에 맞는 도메인 주소 추가 (내 애플리케이션 > 앱 설정 > 플랫폼)

• 개발 환경: http://localhost:5173
• 배포 환경: https://yourdomain.com 등
  ➡️ 배포 후에는 꼭 배포환경 도메인 주소 추가하기!!⭐️
  (개발 환경 주소만 넣어 놓고 배포 후에 지도가 계속 안 보여서 디버깅하는 게 오래 걸렸다.... 이거 때문일 줄이야... 🥵)

3. 앱 키로 들어가서 JavaScript 키 복사

---

React 프로젝트에 Kakao Maps SDK 적용하기

1. 패키지 설치
   카카오 지도를 React에서 쉽게 사용하기 위해 react-kakao-maps-sdk 패키지 설치

npm install react-kakao-maps-sdk

2. 환경변수에 Kakao API 키 저장
   .env 파일 생성 후 JavaScript 키 저장!

VITE_KAKAO_APP_KEY=여기에_복사한_JavaScript_키

⚠️ .env 파일은 반드시 루트 경로에 위치해야 하며, VITE_ 접두사가 있어야 Vite 프로젝트에서 사용할 수 있음

---

TypeScript 초기 환경 설정하기

Kakao Maps는 원래 JS 라이브러리라 TypeScript에 타입을 알려줘야 하고, 그래야 에러 없이 안전하게 쓸 수 있다고 함!
(나는 Vite + React + TypeScript 환경이라 이 단계도 해줬다 👀)

1. Kakao 지도 타입 정의 설치

npm install --save-dev kakao.maps.d.ts

2. tsconfig.json 에 타입 인식 추가

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

---

지도 렌더링은 처음이라 아래 글에서 도움 많이 받았다 👍👍

• Kakao 지도 API Guide
• ReactKakaoMapSDK Tutorial
• FrontEnd, Kakao Map API 사용하기(Vite + TypeScript(React)), feat. 지도 안불러와지는 알 수 없는...