13. Module Context, Debug

Svelte 문법의 마지막인 Module Context와 Debug에 대해 알아보자.

 

Module Context

 

Svelte의 Module Context는 컴포넌트에서 제공하는 데이터나 메서드를 Export 하여 공유하는 기능으로 기본적인 사용 방법은 아래와 같다.

 

1. Export 하는 모듈

<script context="module">

// context="module"로 지정된 <script> 태그 내에 있는 모든 것들이 Export 됨

</script>


2. Import 하는 모듈

<script>

import ExportModule, { context="module" 스크립트 내 정의된 변수 또는 메서드 } from 'Export Module 경로'

...

</script>

 

아래의 예제 코드를 살펴보자.

 

1) App.svelte

<script>
	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
</script>

<button on:click={stopAll}>
	stop all audio
</button>

<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
<AudioPlayer
	src="https://sveltejs.github.io/assets/music/strauss.mp3"
	title="The Blue Danube Waltz"
	composer="Johann Strauss"
	performer="European Archive"
/>

<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
<AudioPlayer
	src="https://sveltejs.github.io/assets/music/holst.mp3"
	title="Mars, the Bringer of War"
	composer="Gustav Holst"
	performer="USAF Heritage of America Band"
/>

<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
<AudioPlayer
	src="https://sveltejs.github.io/assets/music/satie.mp3"
	title="Gymnopédie no. 1"
	composer="Erik Satie"
	performer="Prodigal Procrastinator"
/>

<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
<AudioPlayer
	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
	composer="Ludwig van Beethoven"
	performer="European Archive"
/>

<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
<AudioPlayer
	src="https://sveltejs.github.io/assets/music/mozart.mp3"
	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
	composer="Wolfgang Amadeus Mozart"
	performer="Markus Staab"
/>

 

2) AudioPlayer.svelte

<script context="module">
	const elements = new Set();

	export function stopAll() {
		elements.forEach(element => {
			element.pause();
		});
	}
</script>

<script>
	import { onMount } from 'svelte';

	export let src;
	export let title;
	export let composer;
	export let performer;

	let audio;
	let paused = true;

	onMount(() => {
		elements.add(audio);
		return () => elements.delete(audio);
	});

	function stopOthers() {
		elements.forEach(element => {
			if (element !== audio) element.pause();
		});
	}
</script>

<style>
	article { margin: 0 0 1em 0; max-width: 800px }
	h2, p { margin: 0 0 0.3em 0; }
	audio { width: 100%; margin: 0.5em 0 1em 0; }
	.playing { color: #ff3e00; }
</style>

<article class:playing={!paused}>
	<h2>{title}</h2>
	<p><strong>{composer}</strong> / performed by {performer}</p>

	<audio
		bind:this={audio}
		bind:paused
		on:play={stopOthers}
		controls
		{src}
	></audio>
</article>

 

실행 결과는 아래와 같다.

 

 

위의 코드를 살펴보면 AudioPlayer.svelte 모듈 최상단에 <script context="module">이라고 지정된 스크립트 태그를 확인할 수 있다. 해당 스크립트 내에 있는 stopAll 메서드를 App.svelte 모듈에서 Import 하여 사용하는 것을 확인할 수 있다. ES6의 Import / Export와 문법적으로 크게 차이가 나지 않기 때문에 사용하는 데 있어 어려움은 없을 것으로 생각된다.

 

Debug

 

페이지를 개발할 때 발생하는 여러 가지 문제들을 해결하기 위해 개발자들은 디버깅 과정을 수행한다. 주로 개발에 사용하는 IDE에서 제공하는 여러 가지 플러그인으로 디버깅을 하는데, 상황에 따라서는 브라우저의 console 객체로 데이터를 직접 확인해야 하는 경우도 있다.

 

Svelte에서는 console 객체를 사용하지 않고 {@debug...}를 사용하면 상태가 변경될 때마다 Svelte의 디버그가 트리거 된다. 기본적인 사용 방법은 아래와 같다.

 

1. 디버깅할 객체는 쉼표로 구분한다

{@debug target1, target2,...}

2. 아래와 같이 객체의 속성이나 배열의 아이템, 불리언 등은 디버깅되지 않는다.

{@debug user.firstname}
{@debug myArray [0]}
{@debug! isReady}
{@debug typeof user === 'object'}

 

아래의 예제를 살펴보자.

 

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>

<input bind:value={user.firstname}>
<input bind:value={user.lastname}>

{@debug user}

<h1>Hello {user.firstname}!</h1>

 

실행 결과는 아래와 같다.

 

 

{@debug...}를 선언한 상태에서 브라우저의 devtools를 열면 위와 같이 코드 실행이 일시 중지되며 디버깅되는 것을 확인할 수 있다.

 

이상으로 개발에 필요한 Svelte 문법을 모두 살펴보았다. 다음에는 Svelte 스타일에 관련된 문법을 알아보도록 하자.