카카오 맵 API 실행 안되는 경우

< 문제상황 >

카카오 맵 API 가이드를 따라 지도를 띄우는 코드를 작성해도 지도가 띄워지지 않는 문제

 

012

: 가이드를 따라 애플리케이션 추가, 앱 키 발급, 사이트 도메인 추가

 

01

: 이후 index.html 작성 후 chrome으로 실행 시 지도가 안 띄워지는 문제 발생

 

 

---

< 접근 1 >

코드는 여러번 확인해도 결함이 없어 보여서, 다른 문제라고 생각했다. 그래서 개발자 도구의 에러로그를 확인해보니 콘솔창에 'Failed to load resource' 에러가 발생한 걸 확인할 수 있었다.

 

: 카카오맵 리소스에 접근할 수 없다는 건

1. 받아온 앱 키가 잘못되었거나,

2. 사이트 도메인에 등록되어 있는 도메인이 아니라서 

리소스에 접근하지 못하는 경우라고 생각했다.

 

=> 받아온 앱 키는 문제가 없다는 걸 확인해서 사이트 도메인 문제라고 판단했다.

 

 

---

< 접근 2 >

초기에 사이트 도메인을 'http://localhost'로 설정해 놓았는데 생각해보니 지금 내가 index.html을 실행시킨 방식은 서버를 실행시켜서 한 게 아니라, 단순히 크롬 브라우저로 index.html파일을 읽어온 방식이라는 생각이 들었다.
그래서 내 컴퓨터에서 서버를 실행시켜 index.html파일을 실행시켜야 등록한 'http://localhost'도메인에 부합하는 형식이라고 생각했다.

 

: VScode의 live server 익스텐션을 이용해 내 컴퓨터에서 서버를 실행시켜 index.html파일을 읽어보았다.

=> 하지만 여전히 실행이 되지 않아서 도메인을 확인해보니 http://localhost가 아니라 172.30.1.29:5500으로 내 컴퓨터 ip를 이용해 서버를 실행시킨 걸 알 수 있었다.

 

 

01

: 그래서 사이트 도메인 설정에 내 컴퓨터 ip를 추가후 재실행해 보니 잘 작동하는 걸 알 수 있었다.

 

 

---

< 문제 원인 >

1. 단순히 크롬으로 html파일을 읽어오는 것과 서버를 실행시켜 html파일을 읽는 것은 다름