fix: 렌더링 되지 않던 에러 해결

imddoy · Nov 19, 2024 · 8065910 · 8065910
1 parent 492e1a4
commit 8065910
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 49 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HHZWCY4574"></script>
-    <!--<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f4b73490dbec6c62c45107b45cc7ba84&libraries=services,clusterer,drawing"></script> -->
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f4b73490dbec6c62c45107b45cc7ba84&libraries=services,clusterer,drawing"></script>
 
     <script>
       window.dataLayer = window.dataLayer || [];

diff --git a/src/pages/test/KakaoMap.tsx b/src/pages/test/KakaoMap.tsx
@@ -1,67 +1,25 @@
 import React, { useEffect, useState } from "react";
 
-const useLoadKakaoMap = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    const loadKakaoSDK = () => {
-      return new Promise((resolve, reject) => {
-        if (window.kakao && window.kakao.maps) {
-          resolve(window.kakao);
-          return;
-        }
-        const script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${import.meta.env.VITE_KAKAO_MAP}&libraries=services,clusterer,drawing`;
-        script.onload = () => {
-          if (window.kakao && window.kakao.maps) {
-            resolve(window.kakao);
-          } else {
-            reject(new Error("Kakao SDK 로드 실패"));
-          }
-        };
-        script.onerror = () => reject(new Error("Kakao SDK 로드 실패"));
-        document.head.appendChild(script);
-      });
-    };
-
-    loadKakaoSDK()
-      .then(() => setIsLoaded(true))
-      .catch((error) => console.error(error));
-  }, []);
-
-  return isLoaded;
-};
-
 const KakaoMap = () => {
-  const isLoaded = useLoadKakaoMap();
+  const { kakao } = window;
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
+    setIsLoaded(true); //다음 번에는 바로 로딩이 되도록 해당 위치에 정의
     if (!isLoaded) {
+      //이래야 getElementById가 정상적으로 작동함
       return;
     }
-
-    const { kakao } = window;
-
-    // kakao.maps.LatLng 확인
-    console.log(kakao.maps); // 제대로 로드되었는지 확인
-    console.log(kakao.maps.LatLng);
-    console.log(kakao.maps.Map);
-
-    // if (!kakao.maps.LatLng) {
-    //   console.error("kakao.maps.LatLng is not available.");
-    //   return;
-    // }
-
     // 카카오 지도 객체 생성 예제
     const container = document.getElementById("map"); // 지도를 표시할 div
     const options = {
       center: new kakao.maps.LatLng(37.5665, 126.978), // 초기 위치
       level: 3, // 초기 확대 레벨
     };
+
     const map = new kakao.maps.Map(container, options);
 
-    // 지도에 마커 추가
+    // // 지도에 마커 추가
     const marker = new kakao.maps.Marker({
       position: new kakao.maps.LatLng(37.5665, 126.978),
     });