svelte 번역 - 5 - Template Syntax / Special tags

{@html ...} 블록

{@html} 블록은 HTML 표현식을 사용하여 HTML을 렌더링할 때 사용됩니다. 일반 텍스트 표현식에서는 < 및 >와 같은 문자가 이스케이프 처리되지만, {@html} 표현식에서는 이스케이프 처리가 되지 않습니다.

HTML 표현식은 독립적으로 유효한 HTML이어야 합니다. 예를 들어, {@html "<div>"}과 {@html "</div>"}를 각각 사용하여 내용을 감싸는 것은 유효한 HTML이 아니므로 작동하지 않습니다. 또한, Svelte 코드 자체를 컴파일하지는 않습니다.

Svelte는 HTML을 삽입하기 전에 표현식을 자동으로 정리하지 않으므로, 신뢰할 수 없는 데이터에서 HTML을 삽입할 경우 XSS(크로스 사이트 스크립팅) 공격에 노출될 수 있습니다. 따라서 외부 데이터를 HTML로 삽입할 때는 반드시 해당 데이터를 정리해야 합니다.

<div class="blog-post">
  <h1>{post.title}</h1>
  {@html post.content}
</div>

---

{@debug ...} 블록

{@debug} 태그는 console.log(...)에 대한 대안으로 사용할 수 있습니다. 특정 변수가 변경될 때 그 값을 기록하고, 개발자 도구(DevTools)가 열려 있을 경우 코드 실행을 일시 중지합니다.

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

{@debug user}

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

{@debug}는 쉼표로 구분된 변수 목록을 받아 해당 변수들이 변경될 때 값을 출력할 수 있습니다. 변수 이름만 사용할 수 있으며, 임의의 표현식은 허용되지 않습니다.

<!-- 컴파일 가능 -->
{@debug user}
{@debug user1, user2, user3}

<!-- 컴파일 불가능 -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

인자가 없는 {@debug} 태그는 상태 변경 시 debugger 문을 삽입하며, 특정 변수가 아닌 상태가 변경될 때마다 트리거됩니다.

---

{@const ...} 블록

{@const} 태그는 로컬 상수를 정의하는 데 사용됩니다. 이 태그는 #if, #each, #await 블록과 같은 제어 블록이나 컴포넌트, <svelte:fragment /> 태그의 자식으로만 사용할 수 있습니다.

<script>
  export let boxes;
</script>

{#each boxes as box}
  {@const area = box.width * box.height}
  {box.width} * {box.height} = {area}
{/each}

{@const}는 위와 같은 블록 내부에서 계산된 상수를 사용하여 반복적으로 렌더링하거나 조건부 렌더링을 할 때 유용하게 사용할 수 있습니다.