아래 댓글 답이 있네요. 리액트만의 문제는 아니고
SDK 코드를 보니까 document.write로
“//t1.daumcdn.net/mapjsapi/js/main/4.2.0/kakao.js” 스크립트 태그를 html로 쓰고 있네요
Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
document.write가 실패하면서 스크립트가 안불러와지는것이고
kakao.maps가 텅텅 비어있는것이었네요.
즉 SPA나 최적화를 위해 지도가 나오는 경우에만 스크립트 태그를 추가하는 경우는 안먹는다 이겁니다.
카카오지도만의 문제는 아니지만, SDK가 너무 고전 웹에 쓰는 방식으로만 되어있네요.
document.write는 bad practice라고 생각하고 쓰면 안된다고 생각합니다
답변대로 autoload=false 쿼리 추가하고,
new Promise(window.kakao.maps.load) 해서 쓰니까 잘 되네요
1개의 좋아요
언급하신것과 동일한 문제제기는 이미 수 년전부터 보고되어 왔으며 이미 알려진 이슈입니다.
누구보다 바꾸고 싶은건 개발 담당자인 저 입니다만,
지금 형태로 그 보다 오래 운영되어 왔고
몇몇 이유로 쉽게 바꿀 수 없는 상황입니다.
document.write 가 브라우저 렌더링 파이프라인 단계에서 부정적 영향을 주는,
좋지 않은 코드 사용이라는 건 동의하지만
웹 표준에서 벗어났거나 deprecated 방식을 사용하지는 않았으며
이론과는 별개로 실제 해당 방식이 사용자 경험을 크게 해치지 않는다 판단하고 있습니다.
해당 방식에 대해 [브라우저에서 사용 불가] 수준의 선고가 내려지지 않는 이상 변경할 예정은 없습니다.
스크립트 로딩 방식의 근본은 쉽게 바꿀 수는 없기에
일부 사용에 불편이 있는 점은 양해 부탁드립니다.
1개의 좋아요
답변 감사합니다.
근데 괜찮아요!
변경 될거라고 기대하고 쓴 글이 아니에요. 그냥 안좋은것 같다 라는 개인적인 생각이었습니다.
변경 안되는건 다른 document.write 쓰고 있는 타사 SDK들도 마찬가지니까요
그래도 여긴 포럼도 있고 개발 담당자도 계시니 그나마 상황이 낫네요
하지만 사용자 경험을 크게 해치진 않지만 영향은 있다고 생각이 들어요.
API 응답에 따라 지도를 보일지 말지 결정이 될 수 있는데,
무조건 헤드에 스크립트 태그를 넣는다면, SDK가 이거 하나일땐 큰 문제가 아니겠지만
이미 많은 SDK 스크립트들을 로드해서 쓰고 있는 경우라면,
최적화 하는데 이거 하나라도 못 줄이는게 아쉬울 수 있을것 같아요. 특히 모바일이면 더욱이요
autoload=false로 당장 그 목적은 달성 되었으니, 잘 쓰겠습니다.
근데 지도 가이드 문서 시작하기에 해당 옵션이 언급정도만 되어 있어도
(https://apis.map.kakao.com/web/guide/)
SDK 디버깅 해보고 포럼 들어와서 찾아보고 하는 삽질은 어느정도 줄 일 수 있지 않았을까 하는 부분이 아쉽네요
이 스레를 이미 해답을 찾았는데도 굳이 쓴 주목적은,
저와 같은 현상을 겪은 분이 제목 보고 바로 해결 하지 않을까 해서 쓴 것이구요.
제목에 kakao.maps.Map 풀로 써넣은것도 밀려도 쉽게 검색 되라고 한거구요.
"안좋으니 당장 없애달라"라는 목적으로 글 쓴 부분은 아니니 신경 쓰지 않으셔도 괜찮습니다!
1개의 좋아요
댓글 감사합니다.
가이드에 추가하는 방향을 고려해 보겠습니다.
TMI입니다만,
제가 답변드린 코드는 그다지 제가 보기에도 명쾌하지 않습니다.
구구절절 왜 이래야만 하는지 설명이 필요한 코드가 되어버렸죠.
그래서 굳이 가이드에 넣지 않고 있었습니다.
질문이 오면 안내해드릴 목적으로 문서에만 적혀 있습니다.
https://apis.map.kakao.com/web/documentation/#load
1개의 좋아요
