안녕하세요 챗지피티로 api만드는 암것도 모르는 초보인데요 막히는게 많아서 조언을 부탁드립니다 아래는 챗지피티가 생성한 질문입니다 ㅠㅠ
본문:
안녕하세요,
외부 API 서버의 데이터를 활용해 Kakao 지도에 마커를 표시하는 프로젝트를 진행 중입니다.
현재 문제가 발생한 부분은 Kakao 지도 자체가 로딩되지 않는 현상입니다.
콘솔 로그상 fetch는 성공하거나, 경우에 따라 CORS 오류가 발생하기도 합니다.
하지만 가장 큰 문제는 지도 div 자체가 화면에 보이지 않고, Kakao Maps 객체가 생성되지 않는 점입니다.
환경 정보
외부 API 주소:
https://gangneung-lifesaver-api-vcj2.onrender.com/lifesavers
테스트 페이지:
https://gangneung-lifesaver-map.vercel.app
배포: Vercel
백엔드: FastAPI (CORS 허용: *)
프론트엔드에서 fetch()로 외부 API 호출 후 지도 생성
현재 HTML/JS 코드 예시
Kakao Map 테스트 const mapContainer = document.getElementById('map'); const mapOption = { center: new kakao.maps.LatLng(37.75, 128.9), level: 9, }; const map = new kakao.maps.Map(mapContainer, mapOption); fetch("https://gangneung-lifesaver-api-vcj2.onrender.com/lifesavers")
.then(response => response.json())
.then(data => {
data.forEach(item => {
const markerPosition = new kakao.maps.LatLng(item.lat, item.lng);
new kakao.maps.Marker({
position: markerPosition,
map: map,
});
});
})
.catch(error => {
console.error("데이터 불러오기 실패:", error);
});
</script>
문제 요약
지도 객체(kakao.maps.Map)가 생성되지 않음 → 지도가 전혀 화면에 출력되지 않음
kakao maps sdk가 로딩되었는지 불확실
콘솔 오류는 CORS 또는 CSP 관련 메시지일 수 있음
외부 API 요청만 해도 Kakao Maps가 같이 로딩 실패하는 이유를 파악하고 싶음
혹시 외부 API 호출이 Kakao Maps의 로딩에 영향을 줄 수 있는지,
또는 CSP / 리퍼러 정책 등 Kakao Maps SDK 사용 시 주의할 점이 있다면 안내 부탁드립니다.
감사합니다.