[kakao is not defined] 카카오 지도가 페이지에 나오지 않음

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=[내 앱키 입력부분]"></script>
  <script>
      var markerPosition = new kakao.maps.LatLng(37.3540661, 127.102390);
      var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
          mapOption = { 
              center: markerPosition, // 지도의 중심좌표
              level: 3 // 지도의 확대 레벨
          };

      var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

      var imageSrc = "https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/2021_05_free_parents/sparta-marker.png"; 
      var imageSize = new kakao.maps.Size(65, 86); 
      var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
      
      var marker = new kakao.maps.Marker({
          map: map,
          position: markerPosition,
          image : markerImage
      });

  </script>

 

VSCode에서 open in browser 확장 프로그램을 이용해서 페이지를 열었을때는 script로 추가했던 지도가 잘 나왔었는데

직접 서버에 업로드를 해보니 지도가 나오지 않았다

 

검사를 해보니 kakao is not defined라는 오류가 나와서 구글에 검색을 해봤더니

단순히 앱 키만 필요한게 아니라 도메인도 등록을 해야한다는 것을 알게되었다.

 

https://developers.kakao.com/console/app

 

1. 위의 링크로 들어가서 내가 추가한 애플리케이션을 선택

2. 앱 설정 탭의 플랫폼 클릭

3. 사용하고자 하는 곳에서 플랫폼 등록

4. 웹의 경우 도메인을 등록하면 된다.

 

 

 

그래서 다음과 같이 도메인을 등록하였더니 지도가 제대로 나타나게 되었다.