20220223_TIL : MAP API

카카오 지도 API를 이용해서 지도를 연동해보았다.
next.js를 사용하면 브라우저에 나타나기 전 pre-rendering 과정을 거치기때문에 useEffect, 지도를 불러오기 위해 declare const window: typeof globalThis & {} 로 윈도우에 카카오 관련 정보를 기입해줘야한다.

declare const window: typeof globalThis & {
  kakao: any;
};

useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667), 
      level: 3, 
    };

    const map = new window.kakao.maps.Map(container, options);
  }, []);

또한 useEffect로 맵이 다운로드될때까지 기다리는 방식으로 화면을 그려주기위해 직접 createElement라는 기능을 통해서 script 태그를 만들어 주고, document.head.appendChild(script)를 사용하여 head 태그에 넣어주도록 했다.

💡 APP KEY

github에 파일을 연동시키거나 배포 시에 프론트엔드에서 사용되는 appkey는 숨길 수 없기때문에 우리가 지정한 도메인이 아닌 곳에서는 appkey가 작동하지 않도록 도메인을 지정해서 설정해줄 것 !

💡 router.push , <a 태그> , Link 차이

Next.js 사용하면서 useRouter를 통해 페이지 이동을 했었는데,
지도 API를 연동하면서 페이지 이동에 대한 기능 차이들을 확인했다.

router - 처음 화면이 렌더링될 때 페이지 전체 요소를 받아오는 방식.
script를 받아오지 못했기때문에 script를 따로 지정해서 주소를 넣어주고 받아온 script가 다운로드되면 맵을 보여주는 순서로 로직을 만들어야한다.(SPA 방식)

LINK - useRouter와 동일한 방식이지만 추후 배포 시 사이트 검색 엔진에서 연결된 주소간에 상호관계를 인식시키는 방법 중 하나.

a 태그 - 연결된 주소를 클릭하면 서버로 HTML,CSS,JS를 요청해서 화면 자체가 다시 그려지는 방식.(MPA 방식)

💡 지도 API 연동 시 주의

useRouter로 페이지를 이동할 경우, 맵을 받아오지 못하기때문에
useEffect 를 통해 변수 값을 받아와서 렌더되고 마지막에 지도가 그려지도록 JSX가 그려지는 presenter Component 에 로직을 짜야한다. 그래야 다른 변수의 영향없이 설정한 변수에만 영향을 받아 지도가 렌더되기 때문.
또한, useEffect 안에 Context-API 사용할 경우 무한 렌더에 주의할 것.