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 컴포넌트의 스크립트 블록이 실행될 때 동작합니다. 위 코드에서는 딱 한 번 실행되겠네요.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.