카카오 맵 API가 안 뜬다고? 이렇게 해결했다!

1. 카카오 API 키 설정

카카오 맵 API를 사용하려면 카카오 개발자 콘솔에서 API 키를 발급받고, 이를 코드에 적용해야 합니다. 그런데 제가 여기서 실수했던 부분이 있었습니다.

문제: 카카오 개발자 콘솔에서 발급받은 appkey를 useKakaoLoader 훅에 입력했는데, 카카오 맵이 로드되지 않았습니다. 오류 메시지는 401 Unauthorized로 나왔습니다.

해결 방법:

• 먼저, 카카오 개발자 콘솔에 들어가서 API 키를 복사한 후 코드에 붙여넣었는지 확인했습니다. 그런데 appkey 값을 복사할 때 공백이나 잘못된 문자가 포함되었을 가능성이 있더라고요.
• 다시 한 번 정확한 API 키를 확인하고, 코드에서 이를 정확하게 입력해주었습니다.

2. 카카오 맵 API 활성화

API 키를 입력하고 도메인 설정까지 완료했는데, 여전히 맵이 로드되지 않았습니다. 이때 중요한 점을 놓쳤어요. 카카오 맵 API를 활성화해야 했던 거죠.

문제: 카카오 개발자 콘솔에서 API 키를 발급받았지만, 실제로 카카오 맵 API를 활성화하지 않았기 때문에 403 Forbidden 오류가 발생했습니다.

해결 방법:

• 카카오 개발자 콘솔에서 카카오 맵 API를 활성화해주어야 했습니다.
• 이를 활성화한 후, API가 정상적으로 동작하며 맵이 로드되었습니다.

3. 도메인 설정

카카오 맵 API를 로드하려면 도메인 설정도 필요합니다. 도메인이 정확하게 설정되지 않으면 403 Forbidden 오류가 발생할 수 있습니다.

문제: 카카오 API 키에 대한 도메인 설정이 되어 있지 않아서 403 Forbidden 오류가 발생했습니다.

해결 방법:

• 카카오 개발자 콘솔에 들어가서, 플랫폼 > 웹 설정에서 허용 도메인을 정확하게 추가해주었습니다.
• 예를 들어, 로컬에서 작업 중이라면 localhost를 도메인에 추가해야 했습니다. 실제 배포된 사이트에서는 해당 도메인 주소를 추가해야 했습니다.

4. 카카오 맵 SDK 로드

카카오 맵 SDK가 제대로 로드되지 않으면 window.kakao 객체가 정의되지 않아서 오류가 발생합니다. 이 문제도 저는 겪었어요.

문제: 카카오 맵 SDK를 로드하는데 실패했습니다. 콘솔에서 window.kakao가 정의되지 않았다는 오류가 발생했어요.

해결 방법:

• react-kakao-maps-sdk를 사용하면서, 스크립트 로딩을 비동기로 처리하고 있는지 확인했습니다. 로드 실패 시 재시도를 설정해주는 옵션을 활성화했어요.
• useKakaoLoader 훅을 사용하여 SDK가 로드될 때까지 기다리도록 했고, loading과 error 상태를 통해 로딩 중이나 오류가 발생했을 때 메시지를 출력하도록 했습니다.

5. 문제 해결 후 결과

모든 설정을 마친 후, 카카오 맵이 정상적으로 로드되고 지도가 화면에 표시되었습니다. 이제 원하는 위치로 맵을 표시하거나 다양한 기능을 추가할 수 있게 되었어요.

요약

• API 키 설정: 정확한 API 키를 입력하고, 카카오 개발자 콘솔에서 키가 활성화되어 있는지 확인합니다.
• 카카오 맵 API 활성화: 카카오 개발자 콘솔에서 카카오 맵 API를 활성화해야 합니다.
• 도메인 설정: 로컬 개발 중이라면 localhost를 추가하고, 배포된 사이트라면 해당 도메인을 허용 목록에 추가합니다.
• SDK 로딩: 카카오 맵 SDK가 제대로 로드되지 않는 문제는 useKakaoLoader 훅을 사용해 비동기로 로드하며, loading과 error 상태를 관리합니다.