Svelte

빠른 웹 애플리케이션을 구축하기 위한 tool로써
자바스크립트 프레임워크와 유사하지만
스벨트는 런타임시 어플리케이션 코드를 해석하지 않고
빌드 시 자바스크립트로 변환한다
프레임워크 추상화 성능 비용을 지불하지 않고
앱이 처음 로드될 때 페널티가 발생하지 않는다

스벨트로 전체 앱을 빌드하거나 기존 코드 베이스에 추가 가능
어떻게보면 라이브러리에 가까운 걸까
점점 구분은 모호해지지만

.svelte 파일을 생성하면 된다

설치

Vite와 vite-plugin-svelte 를 사용하는 것을 권장한다
스벨트를 만든 사람이 vercel에 영입되었기 때문일까

npm create vite@latest my-app -- --template svelte

예제

<script>
	let name = 'world'
</script>
	
<h1>Hello {name.toUpperCase()}!</h1>

img

스벨트는 img 태그에 alt 속성이 없다면 경고를 띄워준다
접근성에 대해 A11y를 통해 알려줌

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

<img src={src} alt="image">

<img {src} alt="A man dances."> // 아래와 같이 작성 가능

style

html과 마찬가지로 style 요소에 스타일을 작성 가능
그러나 style이 적용되는 스코프가 컴포넌트에 한정된다

<p>This is a paragraph.</p>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

import

다른 파일의 구성 요소를 가져와 포함시킬 수 있다
p 태그를 import 하여 가져왔지만 스타일은
기존의 컴포넌트에만 한정되어 있다

App.svelte

<p>This is a paragraph.</p>
<Nested/>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>
<script>
	import Nested from './Nested.svelte';
</script>

Nested.svelte

<p>This is another paragraph.</p>

문자열 내 태그

일반적으로 문자열은 html 태그를 이해하지 못한다
스벨트에서는 {@html ...} 구문을 사용하여
문자열 내의 html 태그를 활용할 수 있다

이 기능을 사용하는 경우 신뢰할 수 없는 소스에서 가져온 HTML을 수동으로 이스케이프 처리하는 것이 중요합니다. 그렇지 않으면 사용자가 XSS 공격에 노출될 위험이 있습니다.

<script>
	let string = 'this string contains some <strong>HTML!!!</strong> <strong>HTML!!!</strong>';
</script>

<p>{@html string}</p>

event

스벨트는 DOM을 애플리케이션의 상태와 동기화 하기 위한
강력한 반응성 시스템이 있다

Svelte는 DOM을 업데이트해야 함을 알려주는 일부 코드를 사용하여 이 할당을 '계측'합니다.

onclick

<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>