[Today I Learned]kakaomap api typeerror처리과정

에러내용

TypeError: kakao.maps.Lating is not a constructor 

해결과정

<script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?a%= htmlWebpackPlugin.options.env.MAP_API_KEY&autoload=false"
    ></script>

기존 index.html 파일에서 환경변수로 api키를 지정해놨다 MAP_API_KEY 부분 뒤에 추가로 &autoload=false 을 설정 해봤지만 에러는 없어지지 않았다.

어차피 개발자도구에서 index.html에 있는 api키값은 숨길수가 없기에 다시 키값을 입력 후 autoload=false 명령어를 추가했다.

 <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e17a56afb96b3176633b01ada52ec94f&autoload=false"
    ></script>

이제 맵컴포넌트가 있는 해당 파일로 이동 후 useEffect 훅 안에다가 kakao.maps.load라는 함수를 선언해준 후 감싸준다.

const Citymap = () => {
  useEffect(() => {
    kakao.maps.load(() => {
      const position = new kakao.maps.LatLng(
        37.56614933439768,
        127.01575598500187,
      );

      let el = document.getElementById('map');

      const mapOptions = {
        center: position, // 지도의 중심좌표
        level: 13, // 지도의 확대 레벨
      };
      const map = new kakao.maps.Map(el, mapOptions);

      // 마커 이미지의 이미지 주소
      let imageSrc = '@/assets/MyPage/defaultProfile.jpg';

      for (let i = 0; i < cityInfo.length; i++) {
        // 마커 이미지의 이미지 크기 입니다
        let imageSize = new kakao.maps.Size(24, 35);

        // 마커 이미지를 생성합니다
        let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

        // console.log(cityInfo[i].mapy, cityInfo[i].mapx);

        // 마커를 생성합니다
        let marker = new kakao.maps.Marker({
          map: map, // 마커를 표시할 지도
          position: new kakao.maps.LatLng(cityInfo[i].mapy, cityInfo[i].mapx), // 마커를 표시할 위치
          title: cityInfo[i].korarea, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
          image: markerImage, // 마커 이미지
        });
        // console.log(marker);
        // marker.setMap(map);
      }
    });
  }, []);

그리고 추가로.

type error가 떴을때 항상 몇번째 줄에서 에러났는지 제대로 확인하고
오타가 있는지 없는지 먼저 확인하자.
LatLng를 Lating으로 기재해서 에러 해결하는데 3시간 걸렸다..