SvelteKit에서 전단지 사용

새로운 SvelteKit 프로젝트를 막 시작한 저는 Leaflet 구성 요소를 구현하는 임무를 받았습니다.

SvelteKit에서 Leaflet을 사용하는 것은 window 개체에 대한 종속성 및 SvelteKit이 프로덕션 번들을 빌드하는 방식으로 인해 약간 까다롭지만 충분히 가능하므로 이 게시물에서 그렇게 해 보겠습니다. 작동하는 SvelteKit 앱이 있다고 가정하겠습니다. 그렇지 않은 경우 follow the official guide first !
leaflet를 설치하여 시작하겠습니다.

npm i leaflet

이제 Leaflet Quick Start guide을 기반으로 간단한 Svelte 구성 요소를 만들 수 있습니다!

파일 생성src/lib/LeafletMap.svelte

<script>
    import { onMount } from 'svelte';
    import { browser } from '$app/env';

    onMount(async () => {
        if(browser) {
            const leaflet = await import('leaflet');

            const map = leaflet.map('map').setView([51.505, -0.09], 13);

            leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            leaflet.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();
        }
    });
</script>


<main>
    <div id="map"></div>
</main>

<style>
    @import 'https://unpkg.com/[email protected]/dist/leaflet.css';
    main #map {
        height: 800px;
    }
</style>

마지막으로 새 구성 요소를 src/routes/index.svelte 파일에 추가합니다.

<script>
    import LeafletMap from '$lib/LeafletMap.svelte';
</script>

<main>
    <LeafletMap />
</main>

이제 npm run dev로 개발 서버를 시작하고 http://localhost:3000/을 방문하여 결과에 감탄할 시간입니다.