코딩기록

테스트 앱을 이용한 kakao map api 사용 방법 본문

프론트

테스트 앱을 이용한 kakao map api 사용 방법

뽀짝코딩 2025. 5. 29. 22:03
728x90

 

24년 12월 1일 이후로 kakao map api 사용방법이 바뀌어서 

비지니스앱 or 테스트 앱으로만 가능하다. 전 처럼 누구나 JavaScript 키만 있으면 지도 API 사용 가능했던 정책에서

비지니스가 아닌이상 테스트앱을 생성해야하는 정책으로 바뀌었다.

 

카카오맵 API
활성화 및
쿼터 상향		 2024년 12월 1일부터 신규로 카카오맵 API 를 사용하기 위해서는 사용 권한을 활성화해야 합니다.
또한 기본 제공 쿼터의 초과 사용이 필요할 경우,
별도의 제휴 계약 협의를 진행하지 않고 직접 유료 사용 설정을 할 수 있도록 제공합니다.
관련 내용은 아래 공지를 참고 부탁드립니다.
[[공지] 카카오맵 API 활성화 설정, 추가 쿼터 제공 기능 적용 안내]

 

 

 

1. kakao developers  앱 생성

 

 

2. 개인 개발자 비즈 앱 전환

내 애플리케이션 > 앱 설정 > 비지니스  > 개인 개발자 비즈 앱 전환

 

앱 아이콘이 없으면 [앱 아이콘등록] 버튼이 나타난다.

[앱 아이콘 등록] 클릭

[수정] 클릭

앱아이콘 저장하고 나면 [일반] 페이지에 [테스트 앱 정보] 칸이 생긴다.

[사업자 정보 등록] 클릭 후

[비즈 앱 정보]가 나오면

[개인 개발자 비즈 앱 전환] 클릭   

위 항목에 체크하면 아래 화면으로 바뀐다. 

 

이제 테스트 앱을 생성할 수 있다.

 

 

3. 테스트앱 생성

내 애플리케이션 > 앱 설정 > 일반 > 테스트 앱 정보의 [테스트앱 생성] 클릭 

[테스트앱 생성] 클릭하면 자동으로 이름이 설정되어있다. [저장] 클릭

 

 

 

  • 내 애플리케이션 > 제품 설정> 카카오맵
  • 여기가 테스트앱과 일반앱의 차이다 테스트 앱은 이 페이지에서 [활성화 설정]  [OFF] 버튼만 클릭해도 [ON]으로 변경된다.

 

[활성화] 클릭

 

 

내 애플리케이션 > 제품 설정> 앱 권한 신청 

이동하면 일반앱과 테스트앱의 차이를 확연히 알 수 있다.

 

이렇게 카카오맵 사용을 위한 권한을 얻었다.

 

나머지는 Web플랫폼 등록(URL), JavaScript 앱 키 확인만 남았다.

 

 

 

카카오맵 API 테스트 성공 화면

 

 

리액트, 타입스크립트 프로젝트에서 테스트했다.

[ App.tsx ]

// src/App.tsx
import "./App.css";
import KakaoMap from "./components/KakaoMap";

function App() {
  return (
    <div className="App">
      <header>
        <h1>카카오맵 테스트</h1>
      </header>

      <main>
        <KakaoMap />
      </main>

      <footer>
        <p>© 2025 Suzy Park</p>
      </footer>
    </div>
  );
}

export default App;

[KaKaoMap.tsx]

// src/components/KakaoMap.tsx
import { Map, MapMarker } from "react-kakao-maps-sdk";

const KakaoMap = () => {
  return (
    <Map
      center={{ lat: 33.450701, lng: 126.570667 }}
      style={{ width: "100%", height: "400px" }}
      level={3}
    >
      <MapMarker position={{ lat: 33.450701, lng: 126.570667 }}>
        <div style={{ color: "#000" }}>여기가 제주!</div>
      </MapMarker>
    </Map>
  );
};

export default KakaoMap;

 

[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" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내javascript키 입력"></script>

  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

 

근데 원래 앱키는 .env에 설정해야 보안상 안전하다

변경된 코드

루트에 [.env]

REACT_APP_KAKAO_API_KEY=발급받은 javascript키

 

[KaKaoMap.tsx]

import { useEffect, useState } from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk";

declare global {
  interface Window {
    kakao: any;
  }
}

const KakaoMap = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_API_KEY}&autoload=false`;
    script.async = true;

    script.onload = () => {
      window.kakao.maps.load(() => {
        setIsLoaded(true);
      });
    };

    document.head.appendChild(script);
  }, []);

  if (!isLoaded) return <div>지도를 불러오는 중입니다...</div>;

  return (
    <Map
      center={{ lat: 33.450701, lng: 126.570667 }}
      style={{ width: "100%", height: "400px" }}
      level={3}
    >
      <MapMarker position={{ lat: 33.450701, lng: 126.570667 }}>
        <div>여기가 제주!</div>
      </MapMarker>
    </Map>
  );
};

export default KakaoMap;

 

[index.html]

<head>태그 안에 있던 

  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내javascript키 입력"></script>
줄 삭제

 

 

 

 

 

 

 

참고로 테스트앱 쿼터는 일 100건이다

내용은 아래  [테스트앱 지도 API 쿼터 제한 문의 글] 링크 참고.

 

 

 

 

참고

카카오디벨롭퍼스 문서

https://developers.kakao.com/docs/latest/ko/getting-started/app#test-app


테스트앱 지도 API 쿼터 제한 문의 글

https://devtalk.kakao.com/t/api/143968

 

[FAQ] 카카오맵 API (지도/로컬) 문의 전 꼭 읽어 주세요

https://devtalk.kakao.com/t/faq-api/125610

[공지] 카카오맵 API 활성화 설정, 추가 쿼터 제공 기능 적용 안내

https://devtalk.kakao.com/t/api/140875

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'프론트' 카테고리의 다른 글

css) 가운데 맞추는 공식 position, display: flex  (0) 2025.05.20
useEffect  (0) 2025.03.27
React) Vite 프로젝트와 Next.js 프로젝트 차이  (0) 2025.03.25
.ts 와 .tsx 의 차이  (0) 2025.03.21
JavaScript를 공부하면서 느낀점  (0) 2024.12.31
'프론트' Related Articles more
Comments