Huzylog

오늘 갑작스레 메일이 와서 내용을 보니, AI NAVER API 가 7월1일자로 전면 유료화가 된다고 한다.

처음에 네이버 지도 API 를 ncloud 에서 신청해서 쓰고 있었는데, 그게 AI NAVER API 로 들어가 있었고, 또 Maps API가 별도로 카테고리가 생성되어 있었다. 그러니까 요약하자면, AI NAVER API 내에 있는 Maps 를 쓰면 7월1일부터 무조건 과금이 되고, 그 밖에 있는 Maps 를 쓰면 기존처럼 무료로 이용이 가능하다.

하지만 나처럼 AI NAVER API 내에 Maps를 쓰고 있던 사용자라면은 기존 사이트에 있던 Client ID, Secret를 Maps에 새로 생성한 Application에 맞게 전부 수정해주고, api 주소들 역시 전부 Maps 에 맞게 변경해주어야 한다.

Javascript CDN 주소는 아래 링크를 참고해 수정하시고,

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

API 각 요청 경로는 아래 문서를 참고해 수정하자.

https://api.ncloud-docs.com/docs/application-maps-overview

변경해 준다음에 AI NAVER API 내에 있는 Application 은 삭제를 해주었다.

홈페이지를 제작하거나, 생활하다 필요했던 도구들을 직접 만들어 모아볼 생각

우선 네이버 지도 좌표X, Y 검색기를 카카오, 구글지도도 검색 가능하게 추가해서 제일 먼저 만들었다.

디자인에 소질이 없어서 반응형 모바일웹이 아직 안되는데, UI를 좀 고민해봐야겠다. (PC만 되는 상태)

네이버, 카카오, 구글 좌표 X,Y 검색

> https://tools.huzy.net 

kakao sdk.js 는 로드되었을지 몰라도 latlng method 가 로드되기 전에 호출될 경우 발생하는 문제이다.

다음과 같이 수정하여 해결하였다.

sdk.js 호출시 파라미터에 autoload=false 를 추가해주었다.

<script
  async
  src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_JAVASCRIPT_APP_KEY}&autoload=false`}
></script>

그다음 latlng 메소드가 호출되는 부분을 kakao.maps.load callback 처리해주었다.

useEffect(() => {
    if (kakao) {
      kakao.maps.load(() => {
        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = {
          //지도를 생성할 때 필요한 기본 옵션
          center: new kakao.maps.LatLng(Number(lat), Number(lng)), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        var map = new kakao.maps.Map(container as HTMLDivElement, options);
        var markerPosition = new kakao.maps.LatLng(Number(lat), Number(lng));

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
          position: markerPosition,
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
      });
    }
  }, [lat, lng]);