4.11.3 리액티브하게 디버깅하기

현재 App.svelte 코드 중 script 블록을 조금 수정해보겠습니다. 그리고 HTML 블록의 @debug 부분도 주석 처리합니다.

/debugSample/src/App.svelte

<script>
    export let name = "world"; 
    
    console.log(name);   // 1. 일반 디버깅 코드

    $:console.log(name); // 2. 리액티브 디버깅 코드
</script>

<input type=text bind:value={name}>
<!-- {@debug name} --> <!-- name 값 확인 -->
<h1>Hello {name}!</h1>

두 줄을 추가했습니다. 두 줄 모두 name의 값이 궁금해서 작성했습니다.

첫 번째로는 name의 값을 콘솔에서 확인하는 console.log(name) 코드입니다. App.svelte 컴포넌트의 스크립트 블록이 실행될 때 동작합니다. 위 코드에서는 딱 한 번 실행되겠네요.