본문으로 건너뛰기
Advertisement

Svelte 기초

Svelte는 기존 프레임워크와 달리 빌드 단계에서 브라우저가 직접 실행할 수 있는 바닐라 자바스크립트로 변환하는 "컴파일러" 기반의 프레임워크입니다.

1. Svelte의 차별점​

  • 가상 DOM 없음: 런타임에 실행되는 Virtual DOM 없이 직접 실제 DOM을 업데이트하여 매우 빠릅니다.
  • 적은 코드: 보일러플레이트 코드가 거의 없어 생산성이 매우 높습니다.
  • 진정한 반응성: 특별한 API 호출 없이 변수에 값을 대입하는 것만으로 화면이 갱신됩니다.

2. 기본 예제​

<script>
  let count = 0;

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

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

<style>
  button { color: #ff3e00; }
</style>

3. 선언적 바인딩​

<input bind:value={name}>
<p>Hello {name}!</p>

4. SvelteKit​

애플리케이션 개발을 위한 공식 풀스택 프레임워크로, 차세대 웹 개발의 강자로 떠오르고 있습니다.

간결하고 성능 좋은 앱을 만들고 싶다면 Svelte는 꼭 배워봐야 할 기술입니다.

Advertisement
Advertisement