0. 카카오 개발자 계정 생성하기
https://developers.kakao.com/console/app
카카오계정
accounts.kakao.com
- 상단의 내 애플리케이션을 클릭하고, 애플리케이션을 추가해줍니다. (절차 생략)
- 저희가 사용할 키는 웹에 맵을 사용하므로, 자바스크립트의 키입니다. ( 다른 키 사용시, 맵 안보임 + 이메일로 경고옴)
- 플랫폼에서 웹에 도메인을 등록해줍니다.
- 개발 시, 보통 http://localhost:3000 입니다. (자신의 개발 혹은 프로덕션 도메인 작성)
- 왼쪽 바의 거의 끝쯤에 카카오맵이 있습니다. 클릭해줍니다.
- 카카오 맵의 상태를 활성화해줍니다. 그래야 사용가능해집니다.
1. 카카오맵을 위한 웹 프로젝트를 생성하기 (React.js)
1.1 새로운 웹 프로젝트 (React) 생성
npx create-react-app kakao-map-webcd kakao-map-web
1-2 .env 에 카카오 javascript 키 추가
📌 프로젝트 최상단에 .env 파일을 생성합니다.
REACT_APP_KAKAO_MAP_API_KEY= 당신의 카카오 자바스크립트 키
1.3 index.html에서 Kakao Map SDK 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kakao Map</title>
</head>
<body>
<div id="root"></div>
<script>
fetch("/env.json")
.then(response => response.json())
.then(env => {
const kakaoApiKey = env.REACT_APP_KAKAO_MAP_API_KEY;
const script = document.createElement("script");
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoApiKey}`;
script.async = true;
document.head.appendChild(script);
});
</script>
</body>
</html>- public/index.html에서 Kakao SDK를 로드합니다.
1.4 Kakao Map을 표시하는 컴포넌트 만들기
📌 src/KakaoMap.js를 생성하고 아래 코드를 작성해줍니다.
import React, { useEffect } from "react";
const KakaoMap = () => {
useEffect(() => {
const loadKakaoMap = () => {
if (window.kakao && window.kakao.maps) {
// ✅ API가 로드된 후 실행
const container = document.getElementById("map");
const options = {
center: new window.kakao.maps.LatLng(37.5665, 126.9780), // 서울 중심 좌표
level: 3,
};
const map = new window.kakao.maps.Map(container, options);
// 마커 추가
const markerPosition = new window.kakao.maps.LatLng(37.5665, 126.9780);
const marker = new window.kakao.maps.Marker({ position: markerPosition });
marker.setMap(map);
} else {
console.error("Kakao Maps API 로드 실패");
}
};
// ✅ Kakao Maps API가 없으면 동적 로드
if (!window.kakao || !window.kakao.maps) {
const script = document.createElement("script");
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_MAP_API_KEY}&autoload=false`;
script.async = true;
script.onload = () => {
window.kakao.maps.load(loadKakaoMap); // ✅ API가 완전히 로드된 후 실행
};
document.head.appendChild(script);
} else {
loadKakaoMap();
}
}, []);
return <div id="map" style={{ width: "100%", height: "100vh" }} />;
};
export default KakaoMap;- 지도가 로드된 후 화면 렌더링이 일어나도록 해줍니다.
1-5. App.js 에서 KakaoMap.js 로드하기
📌 src/App.js 파일을 수정합니다.
import React from "react";
import KakaoMap from "./KakaoMap";
function App() {
return <KakaoMap />;
}
export default App;
1-6. 웹 서버를 실행합니다.
npm start
1-7. 웹 화면 렌더링 결과
2. Vercel 로 맵을 생성한 웹을 배포하기
2-1. 깃허브에 저장소 생성하기
2-2. 해당 깃허브 주소 복사하기
2-3. 프로젝트 폴더에서 git 초기화 및 원격 저장소 연결하기
cd kakao-map-web # 웹 프로젝트 폴더로 이동
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin 위에서 복사한 깃허브 저장소 주소
git push -u origin main
2-4. Vercel 로 배포하기
- vercel 에서 프로젝트 생성을 클릭합니다.
- 원하는 레포지토리 (저장소)를 import 합니다.
- 빌드 및 배포하기를 클릭합니다.
2-5. Vercel 환경 변수 설정해주기 (.env 파일은 .gitignore 에 있어서 파일이 올라가지 않기 때문에)
- .env 에 적었던 키를 적고 Save 버튼을 클릭합니다.
2-6. vercel에 로그인하지 않고 Webview를 모든 사용자에게 보여주려면
3.React Native에서 WebView로 불러오기
3-1. react-native-webview 설치하기
npm install react-native-webview
# 또는
yarn add react-native-webview
3-2. 코드에서 웹뷰 구현하기 (자신이 구현해야 하는 상황에 알맞게 넣기)
import { WebView } from "react-native-webview";
const NowGaldaeDetail: React.FC = () => {
return (
<View style={styles.main}>
<BasicText text="Kakao Map" style={styles.headerText} />
{/* 📌 WebView로 웹의 Kakao Map 가져오기 */}
<View style={styles.map}>
<WebView source={{ uri: "https://your-web-url.com" }} />
</View>
</View>
);
};- uri 부분에 위에서 vercel을 통해 배포한 주소를 입력합니다.
3-3. 실제 화면
'앱개발 > React Native' 카테고리의 다른 글
| [React Native] 옆으로 스크롤링 하는 달력 만들기 (0) | 2025.02.18 |
|---|---|
| [React Native] Mac 에서 안드로이드 스튜디오 설치 및 React Native 프로젝트 안드로이드 빌드 (1) | 2025.02.05 |
| [React Native] 프로젝트 생성 및 초기 세팅 (Typescript) (1) | 2025.02.04 |