[Svelte 튜토리얼] Part 1 - Dynamic attributes

튜토리얼 링크

 이번 튜토리얼에서는 Svelte에서 태그에 속성을 적용시키는 방법과 <img> 태그를 사용할 때 주의해야할 점을 알려줍니다.

 

Your first component에서 알아봤듯이, HTML code에서 { script 블록에 존재하는 변수명 }을 쓰면 변수의 값으로 치환됩니다. 따라서 다음과 같이 코드를 작성해도 문제에서 요구하는 이미지가 나타납니다.

 

<script>
    let src = '/image.gif';
</script>

<img {src} />

 

하지만 이렇게 마치면 Svelte는 다음과 같이 알려줍니다.

 

A11y: <img> element should have an alt attribute

 

A11y는 <img>태그에 alt 속성이 없어서 나오는 문구입니다.

alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 지정하는데, 이 속성에 값을 주지 않았다고 해서 화면에 이미지가 보이지 않거나 프로그램 실행이 중단되지는 않습니다.

하지만 웹 애플리케이션을 구축할 때는 시각 장애인이나 인터넷 연결이 느린 상황 등 넓은 범위의 사용자층이 접근할 수 있도록 해야합니다. 따라서 범용적인 사용을 위해 alt 속성을 넣어준 코드는 다음과 같습니다.

 

<script>
    let src = '/image.gif';
    let name = 'Rick Astley';
</script>

<img src={src} alt="{name} dances." />

 

또한, Svelte는 간결한 문법을 위해 한 가지 기능을 더 제공합니다.

앞선 코드의 src={src}처럼 속성 명과 변수 명이 동일하다면 {src}의 형태로 간단하게 줄일 수 있습니다.

따라서 정답은 다음과 같습니다.

 

<script>
    let src = '/image.gif';
    let name = 'Rick Astley';
</script>

<img {src} alt="{name} dances." />