카카오맵 api 사용 ㅠㅠㅠ

첫 번째로, 문제가 있는 코드에 접근하지 못하여 마커가 나타나지 않는 이유를 정확히는 파악하기 어렵습니다. 그러나 일반적으로 마커가 표시되지 않는 이유 중 하나는 지도 초기화 작업이 완전히 끝나지 않은 상태에서 마커를 추가하려고 시도한 경우입니다. 리액트에서 외부 스크립트(여기서는 카카오 맵 API)를 사용하는 방법을 제안드리겠습니다. index.html 파일에 스크립트 태그를 추가하는 대신, 리액트 컴포넌트 내에서 동적으로 스크립트를 로드할 수 있습니다. 이렇게 하면, 원하는 컴포넌트(render 메소드 또는 useEffect 훅 안)에서만 스크립트를 로드하므로 성능 문제를 개선할 수 있습니다. 다음과 같은 함수로 외부 스크립트를 동적으로 로드할 수 있습니다: ```javascript function loadScript(url, callback) { let script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { // Internet Explorer script.onreadystatechange = function() { if (script.readyState === "loaded" || script.readyState === "complete") { script.onreadystatechange = null; callback(); } }; } else { // Other browsers script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } ``` 위 함수는 주어진 URL에서 스크립트를 로드하고, 로딩이 완료되면 콜백 함수를 실행합니다. 이 함수를 사용하여 카카오 맵 API 스크립트를 로드한 후, 마커 추가 작업을 수행할 수 있습니다. 제안드린 방법을 사용하면 지도가 완전히 로드된 후에만 마커를 추가하게 되므로, 원래 겪고 계신 문제를 해결할 가능성이 있습니다.