Kakao-map
카카오멥은 지도API로 크게 구글지도, 네이버지도, 카카오지도 등이 있다. 이 3가지는 크게 비용적인 차이와 세부적인 기능간 차이가 있다. 오늘은 1일 30만회 무료 요청이 가능한 카카오 지도를 배워보았다.
지도를 적용시키기 전에 개발자 등록을 진행하고 애플리케이션을 추가하여 web플랫폼과 도메인을 등록해주면 사전 준비가 끝이난다.
kakao를 사용하기 위해서는 window에 추가를 해줘야 하는데 추가하는 방법은 다음과 같다.
declare const window: typeof globalThis & {
kakao: any;
};
지도를 넣어서 작성한 코드들을 Gitghub에 그대로 올리게 되면 발급받은 appkey가 그대로 올라가게되어 보안이 좋지 않다는 점이 있다. 프론트엔드에서 사용하는 appkey는 숨길 수가 없으므로 appkey요청을 받아줄 도메인을 적어주어 우리가 지정한 도메인이 아닌 곳에서는 appkey가 작동하지 않도록 설정해 줄 수 있다.
페이지 이동간 router.push를 사용하면 발생하는 오류가 있다. 카카오 기능이 로딩되기 전에 실행되어 발생하는 문제인데 이 문제는 html의 a태그를 통해서 오류를 잡는 방법과 카카오 기능이 로딩이 완료될 때까지 기다리는 방법이 있다.
a태그를 사용하게 되면 페이지를 새롭게 다시 요청하는 것으로 이 방식을 MPA(Multi Page Application)이라고 한다.
Next의 경우에는 처음 사이트 접속 시에 프론트에서 페이지에 필요한 모든 정보를 보내주고, 페이지 이동 시에 새롭게 다시 요청하는 것이 아닌 브라우저 자체에서 페이지가 나타나고 감춰지는 형태로 작동하는 SPA(SinglePageApplication)방식이라 하며, 프론트앤드(서버)에서 랜더링이 되는것이 아닌 브라우저(클라이언트)측에서 렌더링이 된다하여 CSR(Client Side Rendering)이라고 한다.
기다리는 방식으로는 useEffect를 사용하여 직접 다운로드받아 다 받을때까지 기다린 후 그려주면 되는데, useEffect안에 createElement기능을 사용하여 script태그를 만들고, document.head.appendChild(script)를 사용하여 head태그에 넣어준다.
이 후, scipt.onload 내부에 window.kakao.map.load()를 통해 카카오 맵이 전부 다 받아진 후 화면을 그리게 해주면 되는데, 카카오script 부분의 뒤에 autoload=false를 붙여 자동으로 불러오는 기능을 꺼주면 된다.
