Page 16 -

스벨트(Svelte 3.0)는 새로운 프레임워크입니다. 직관적이고 짧은 문법으로 양방향 바인딩(two-way
binding)과 리액티비티 코드를 작성할 수 있어 빠르고 쉽게 앱을 만들 수 있습니다.

스벨트는 동시에 컴파일러입니다. 스벨트를 사용하기 위해 코드에 <script src='svelte.js'> 형
태로 js를 삽입하거나 import 나 require를 이용하여 모듈 형태로 포함시키지 않습니다. 스벨트
컴파일러가 우리가 작성한 코드를 순수한 자바스크립트로 변환해줍니다.

또한, 가상 돔(Virtual DOM) 같은 추상화 계층을 만들어 내지 않고 일반적인 프레임워크가 런타임
에 할 일을 빌드 시에 해결하면서 사용자의 브라우저 부하를 최소화합니다.

1.1 적은 코드 SVELTE

스벨트를 사용하면 코드를 아주 짧게 작성할 수 있습니다. 다음 그림과 같은 더하기 프로그램을
만들고 코드를 살펴보겠습니다.

그림 1-1 더하기 프로그램

더하기 프로그램은 사용자가 두 개의 input 박스에 값을 바꾸면 하단에 두 개의 값을 더해주는 연
산식과 결과를 보여줍니다. 전체 코드는 다음과 같습니다.

더하기 프로그램 스벨트 코드
<script>
let a = 1;
let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

018