[다락재 쉼터] React에서 Kakao Map 사용하기 + document.write문제 해결하기

map.kakao.com/?urlX=848845&urlY=768527&urlLevel=3&map_type=TYPE_MAP&map_hybrid=false

카카오맵

이 위치의 지도를 붙여넣어야하는데,

위의 화면에서 소스 생성을 하면 아래와 같은 코드를 준다. 

 

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1617710587241" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--
	2. 설치 스크립트
	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
	new daum.roughmap.Lander({
		"timestamp" : "1617710587241",
		"key" : "258s3",
		"mapWidth" : "640",
		"mapHeight" : "360"
	}).render();
</script>

 

 

문제는 내가 Gatsby/React 를 사용하고 있어서 그냥 집어 넣을수가 없다는 것이다. 

 

 

useEffect를 이용하는 방식:

한가지 찾은방식은 useEffect를 사용하는 방식인데, 알수없는 이유로 3. 실행 스크립트 부분에서 daum 부분이 없다고떳다. 

 

문제가 발생한 부분

 

문제는 일반적인 index.html에서 해당 코드를 붙여넣고 서버를 띄우면 보여주는데, react에서는 동작을 하질 않아 뭐가 문제인지 파악하고자 했다.

index.html을 띄운것(react아니고!)

 

 

두 방식을 비교했을때 가장 눈에 띄었던 것은 아래와 같이 index.html의 경우에는 

 

index.html에 코드를 붙여넣은 결과

실행 하는부분을 파일에 포함하지 않고, 아래와같이 브라우저 화면에 붙여만 넣어도 동작을 잘하는 반면 

daum.roughmap 사용한것 - 브라우저 console에서

 

Gatsby에서는 아래 코드가 위의 2. 설치스크립트를 불러오지 못한다는 점이다. 

new daum.roughmap.Lander({
      	"timestamp" : "1617690117752",
      	"key" : "258ih",
      	"mapWidth" : "640",
      	"mapHeight" : "360"
      }).render();

 

그리고 나의 Gatsby 사이트도 확인했더니 아래와 같은 오류가 나타났다. 

 

삽질을 하다보니 아래 글을 읽고 위 오류의 원인을 알 수 있었다. 

 

stackoverflow.com/questions/46779367/how-do-i-write-javascript-object-to-the-document-failed-to-execute-write-on

How do i write Javascript object to the document. Failed to execute 'write' on 'Document'

 

문제는 document.write가 굉장히 unstable한것이 문제였어서 code를 좀 변경해서 사용할 수 있었다. 

 

 

  // <!-- 3. 실행 스크립트 -->
  const executeScript = () => {
    alert("executeScript");
    const scriptTag = document.createElement("script");
    const inlineScript = document.createTextNode(`new daum.roughmap.Lander({
    	"timestamp" : "1617690117752",
    	"key" : "258ih",
    	"mapWidth" : "640",
    	"mapHeight" : "360"
    }).render();`);
    scriptTag.appendChild(inlineScript);
    document.body.appendChild(scriptTag);
  };

  // <!-- 2. 설치 스크립트 * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다. -->
  // document.write 문제가 발생해서 해당 파일을 직접 가져온다음 수정했음
  const InstallScript = () => {
    (function () {
      alert("installScript");
      var c = location.protocol == "https:" ? "https:" : "http:";
      var a = "16137cec";

      if (window.daum && window.daum.roughmap && window.daum.roughmap.cdn) {
        return;
      }
      window.daum = window.daum || {};
      window.daum.roughmap = {
        cdn: a,
        URL_KEY_DATA_LOAD_PRE: c + "//t1.daumcdn.net/roughmap/",
        url_protocal: c,
      };
      var b =
        c +
        "//t1.daumcdn.net/kakaomapweb/place/jscss/roughmap/" +
        a +
        "/roughmapLander.js";

      // document.write -> doumnet.body.append로 수정
      const scriptTag = document.createElement("script");
      scriptTag.src = b;
      document.body.append(scriptTag);
      scriptTag.onload = () => {
        executeScript();
      };
    })();
  };

  useEffect(() => {
    InstallScript();
  }, []);


return (
      <div
        id="daumRoughmapContainer1617690117752"
        className="root_daum_roughmap root_daum_roughmap_landing"
      ></div>
)

위와 같이 수정했다. 문제가 있던 document.write를 수정했더니 정상 작동했다. document.write를 document.body.append로 수정한 것(src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js")에 있는 내용을 바꾼것이다. 여기안에 이상하게 document.write라고 해놨다. 

 

 

후기

react에서 외부 라이브러리를 이런식으로 가져와본적이 딱히 없던 것 같은데, 이번기회에 신기한 경험을 해봤다. 

 

특히 useEffect로 문제를 해결할 수 있다고 알려준 이글이 가장 많이 도움이 됬다. 

rangen.medium.com/dynamically-load-google-scripts-with-react-and-the-useeffect-hook-3700b908e50f

Dynamically load Google Scripts with React and the useEffect Hook

또한 왜인지는 모르겠는데, kakaomap은 document.write를 사용하고 있어서 이를 해결한 것이 좀 신기했다. 

stackoverflow.com/questions/39610829/a-parser-blocking-cross-origin-script-is-invoked-via-document-write-how-to-ci

A Parser-blocking, cross-origin script is invoked via document.write - how to circumvent it?

이제 상태 관리를 위한 기능을 도입해야할 것 같다!