Page 17 -

간결합니다. 그래도 잘 동작합니다. 어떻게 작성되었는지 코드를 한 블록씩 살펴보겠습니다. 1

스크립트 블록 스벨트 소개
<script>
let a = 1;
let b = 2;
</script>
… 생략 …

첫 번째는 스크립트 블록입니다. 자바스크립트 변수 a, b를 선언(let)했습니다.

bind:를 사용한 연결
… 생략 …
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
… 생략 …

input 박스의 값이 변하면 a, b 변수가 자동으로 되도록 bind:value={변수} 형태로 선언했습니다.
이렇게 하면 첫 번째 input의 값이 a 변수로 두 번째 input 값이 b 변수로 바인딩됩니다. 다시 말하
면 input 박스의 값이 변하면 자바스크립트 블록의 a 값에 반영(바인딩) 된다는 뜻이기도 합니다.

템플릿 문법으로 화면에 표시하기
… 생략 …
<p>{a} + {b} = {a + b}</p>

그리고 p 엘리먼트에서 {a+b}는 자바스크립트의 a 변수와 b 변수의 값을 더하여 화면에 표시하는

템플릿 문법입니다.

스벨트는 짧고 직관적인 문법으로 적은 양의 코드를 사용합니다. 적은 양의 코드는 버그의 확률도
낮추고 리뷰할 코드의 양도 줄어줍니다.

1.2 순수한 리액티비티(반응성) SVELTE

스벨트는 리액티비티가 언어에 포함되어 직관적이고 간단합니다. 더하기 프로그램에서 리액티비

019