지도 API

카카오 && 구글 && 네이버 : 비용의 차이

카카오지도 사용법

<카카오개발자 사이트의 방식>

• 빈 div 만들기
  
• 다운로드 후 브라우저에 저장
  
• 빈 div태그에 지도 추가하기(div랑 다운로드한 지도 연결)
  

<사이트의 방식을 내가 사용하는 Next.js 방식으로 전환>

• 사이트에서의 순서에 따라
  1. 빈 div 만들기
  2. script에서 지도 다운로드
  - HTML에서 script태그는 head안에 들어가야하므로 next에서 head를 import
  3. div와 script연결
  - script에서 지도다운로드 받고, div도 그려주고 난 후에, 두개를 연결하는거라 useEffect 사용
  

- 문제점 : 다른 페이지에서 지도 페이지로 넘어오는 경우 페이지의 이동속도에 비해 다운로드 속도가 느려서 인식을 못함

<해결법>

1. app.js에 다운로드 코드 넣기 : 지도가 불필요한 페이지에서도 다운로드를 하기때문에 성능이 떨어진다
2. 다운로드 기다리기 : 카카오에서 제공하는 kakao.maps.load이용

<쿼리스트링>

사이트의 주소로 이동할때 특정객체를 같이 이동시키고 싶을때 사용

ex) "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=3b50eb6bcb79315da55039f6461203ef";

• 위 주소에서는 autoload라는 객체와, appkey라는 객체가 전달된다.
  이때, 두개를 합치는 것이 &명령어이다.