프론트 화면에 지도가 나왔다가 1초만에 사라짐

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

REST API를 사용하고 sveltekit을 사용하여 프론트를 구현하고 있는데
지도 화면을 출력하는 시작 단계 부분을 따라하는데 지도 출력 페이지에서 화면이 나온 뒤에 기존 nav 메뉴나 고정 메뉴바까지 사라지며 빈 화면이 나옵니다

다른 페이지는 모두 정상적으로 나오고 있고 map을 적용한 페이지 화면만 이런 상태입니다…
스벨트 환경에 맞게 수정해보면 아예 나오지 않고 가이드에 나온대로 적용하면 잠깐이지만 화면은 나오는 상태입니다.

<html>
	<head>
		<meta charset="utf-8" />
		<title>Kakao 지도 시작하기</title>
	</head>
	<body>
		<div id="map" style="width:500px;height:400px;"></div>
		<script
			type="text/javascript"
			src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키"
		></script>
		<script>
			var container = document.getElementById('map');
			var options = {
				center: new kakao.maps.LatLng(33.450701, 126.570667),
				level: 3
			};

			var map = new kakao.maps.Map(container, options);
		</script>
	</body>
</html>
2

첨부 코드는 기본 예제와 동일해서 현상을 확인하기 어렵습니다.
개발자 도구로 지도가 보였다 사라질 때 지도의 영역과 스타일이 어떻게 변경되는지 확인이 필요해 보입니다.
라이브러리 또는 커스텀 한 스타일 파일을 사용해서 스타일을 적용하고 있다면
해당 스타일과 지도 기본 스타일이 충돌이 나서 보이지 않을 수 있습니다.
먼저 지도가 사라지는 이유를 개발자 도구로 디버깅해서 확인해 주세요.

3

image
image728×486 38.4 KB

이런 오류가 발생해서
코드를 아래와 같이 수정해보고 다른 방법으로도 수정을 해보았는데 해결이 되지 않습니다…

<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<title>Kakao 지도 시작하기</title>
	</head>
	<body>
		<div id="map" style="width:500px;height:400px;"></div>
		<script>
			import { onMount } from 'svelte';

			onMount(() => {
				const script = document.createElement('script');
				script.src = '//dapi.kakao.com/v2/maps/sdk.js?appkey=';
				script.async = true;
				script.onload = () => {
					var container = document.getElementById('map');
					var options = {
						center: new kakao.maps.LatLng(33.450701, 126.570667),
						level: 3
					};

					var map = new kakao.maps.Map(container, options);
				};
				document.body.appendChild(script);
			});
		</script>
	</body>
</html>
4

개발자도구 콘솔 오류메시지를 첨부했는데 한번 봐주실 수 있을까요?ㅜㅜ

5

svelte hydration mismatch 오류는 서버 사이드 랜더링이나 클라이언트 사이드 렌더링 중에 다른 상태를 갖게 되는 경우 발생하며
Illegal invocation은 함수를 호출할 때 컨텍스트를 올바르게 참조하지 않은 경우 발생하는 오류입니다.
프로젝트에서 어떻게 구현하고 있는지 알 수 없어서 재현이 어려운데요.
Svelte의 hydration옵션을 사용하고 있다면 끄고 확인해보시고 페이지 로드부터 디버깅을 하면서 오류를 찾아보셔야 할 것 같습니다.

그리고 아래는 svelte로 프로젝트를 생성하면 잡히는 기본 구조에서 지도를 띄울 수 있게 변형한 예제이며 참고로만 봐주세요.

+page.svelte

<script>
    import Map from './Map.svelte';
</script>

<svelte:head>
    <title>Home</title>
    <meta name="description" content="Svelte demo app" />
    <!-- 지도 스크립트 import하는 부분은 app.html에 넣어도 됩니다. -->
    <script src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=JS APP KEY를 넣어주세요."></script> 
</svelte:head>

<section>
    <Map/>
</section>

<style>
    section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 0.6;
    }
</style>

Map.svelte

<script>
    import { onMount } from "svelte";
    onMount(() => {
        const container = document.getElementById('map');
        const options = {
            center: new kakao.maps.LatLng(33.450701, 126.570667),
            level: 3
        };
        const map = new kakao.maps.Map(container, options);
    });
</script>

<div id="map" style="width:500px;height:400px;"></div>