Promise 객체의 Unceaught(EOTD No.18)

이거 아메타!오랜만에 연일 Error of the Day.

오늘의 잘못

장면

오늘의 오류는 Google Maps를 응용 프로그램으로 가져올 때 발생합니다.
Google Maps JavaScript API를 사용하여 일본 지도에 여러 개의 태그를 표시하려고 했으나 설정이 완료된 후에도 Map이 표시되지 않습니다.
Inspection을 열었을 때 Constore에 나타난 것은 이번 메시지다.

고찰하다.

Uncaught (in promise)

먼저 이 잘못이 무슨 뜻인지 조사했다.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise 객체

비동기 프로세스의 성공 또는 실패를 알리는 객체이며 JS에서는 표준 조합의 객체입니다.
성공으로 판단될 때then 펀션이 실패로 판단될 때catch 펀션이 호출된다.
즉

이번 오류 메시지 Unncaught (in proomise)

Promise 객체의 성공 및 실패 오류가 처리되지 않았습니까?

해결

오류 메시지의 세부 정보를 확인합니다.

"initMap is not a function"
이런 메시지.
나는 이 initMap이 callback 매개 변수가 호출하는 함수라는 것을 생각했다.

# views/layouts/application.html.erb

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>

검사 결과 call 패키지는 API를 읽은 후에 실행되는 함수를 지정합니다.
즉, API 읽기에 성공했고 이후initMap 스크립트에 문제가 있을 수 있습니다.

해결책

https://stackoverflow.com/questions/41065766/initmap-is-not-a-function-google-maps-javascript
본문을 참고하여 initMap 라벨에 JS 파일에 기재되고 호출된 함수script를 기술합니다.
그런 다음 API 스크립트를 로드하기 전에 구성을 구성하면 GoogleMaps를 가져올 수 있습니다.

SOTD(Summary Of The Day)

이번 오류에서 나는 JS 파일과 script 라벨의 차이가 별로 사용되지 않았다는 것을 깨달았다.
결과는 아직 어떤 원인이 잘못된 해결을 초래했는지 알 수 없기 때문에 앞으로 가져온 API를 통해 검증할 예정이다.