React-native, apk로 빌드 시 지도 노출 안됨 문의

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

안녕하세요,
React native 로 개발 중입니다.

로컬 피씨로 돌리는 에뮬레이터에선 잘뜨는 지도가 apk로 빌드 시 뜨지 않습니다.
말려있는 앱의 해시키값하고 등록된 해시키값 확인 시 동일하다는 것도 확인 했습니다.

어느부분을 추가적으로 확인해보면 될까요?

<script>
  console.log("🔥 KakaoMap HTML loaded");

  window.onload = function () {
    console.log("📦 window.onload fired");

    if (typeof kakao === 'undefined') {
      console.log("❌ kakao is undefined");
      return;
    }
    if (!kakao.maps || !kakao.maps.load) {
      console.log("❌ kakao.maps.load is not available");
      return;
    }

    console.log("🟢 Kakao SDK available, calling load()");
    kakao.maps.load(() => {
      console.log("🧩 inside kakao.maps.load");

      const mapContainer = document.getElementById('map');
      if (!mapContainer) {
        console.log("❌ mapContainer is null");
        return;
      }

      try {
        const map = new kakao.maps.Map(mapContainer, {
          center: new kakao.maps.LatLng(${mapDataList.latitude}, ${mapDataList.longitude}),
          level: ${mapDataList.zoomLevel}
        });
        console.log("✅ Map initialized");
      } catch (e) {
        console.log("❌ Map constructor error:", e.message);
      }
    });
  };
</script>

테스트 용으로 위와 같이 돌려본 결과 console.log(“:jigsaw: inside kakao.maps.load”); 로그가 발생하지 않습니다.

@aceiot4237

리액트에서는 Native 용 앱키를 사용하시는 것이 아니라
Javascript 용 키를 사용하시는 것으로 보입니다.

JS 앱키는 해시키 인증과는 관련이 없고
도메인 유효성 체크나, 다른 에러 메시지가 뜨는 것이 있는 지 확인해보셔야 할 것 같아요.

답변 감사합니다.
웹뷰를 이용해서 띄우고 있어서 JS앱키 이용하고 있습니다.
혹시 이 부분도 Native용 앱 키를 사용해야할까요?

로컬기기 내 에뮬레이터에서는 정상적으로 실행되어서 더 헷갈립니다ㅠ

@aceiot4237

네이티브 앱키는,
카카오맵 Android 용, iOS 용 SDK 를 사용하실 때 필요한 앱키입니다.

리액트에서의 웹뷰는 저희가 공식 대응해드리기 어려운 부분으로
기존 문의 사례를 참고해보시면 좋을 것 같습니다.

1개의 좋아요

확인 감사합니다.

다른분들 위해 제 해결 방법 남기자면…
AndroidManifest.xml 파일에
android:usesCleartextTraffic=“true”
추가해주었더니 지도가 정상적으로 노출 되었습니다.

스크립트 호출을 https로 해도 내부에서 http로 호출하는 파트가 있는 것 같아보입니다.

지원 감사합니다.

1개의 좋아요