[Vue.js] 서버 이전 후 애플리케이션을 실행했는데 지도가 렌더링되지 않았다! ReferenceError: kakao is not defined

1. 카카오 지도가 렌더링 되지 않았다!

서버 이전을 하고 pm2로 애플리케이션을 구동했는데 콘솔에 "ReferenceError: kakao is not defined" 에러가 찍혀 있었고, 카카오 지도가 렌더링 되지 않았다. 기존 서버에서는 정상 동작하는데 새롭게 이전한 서버의 IP에서 위 같은 문제가 발생했다. Vue.js로 작성한 코드에서 카카오 지도 API 연동에 문제가 있는 줄 알고 코드 고치며 무한 삽질했다 ㅠ_ㅠ

 

2. 사이트 도메인(또는 IP)을 추가해야 한다!

• [그림 1]과 같이 카카오 API 사이트에서 변경된 도메인을 등록해야 한다.
• DSN가 아닌 IP를 등록한다면 포트 번호도 입력해야 한다.
• 카카오 API : https://developers.kakao.com/console/app
• 등록 위치 : 내 애플리케이션 > 앱 설정 > 플랫폼

[그림 1] 사이트 도메인 등록 페이지(모달창)

 

😛 로컬에서 Vue.js 빌드한 dist 실행 

npm i serve
serve -s dist