Svelte 시작하기 — 왜 컴파일러 기반 프레임워크인가

Svelte는 프레임워크가 아니라 컴파일러입니다 — 이 한 문장이 React, Vue와의 근본적인 차이를 설명합니다.

개념 정의

Svelte는 컴파일 타임에 반응성 코드를 생성 하는 UI 프레임워크입니다. React나 Vue처럼 런타임에 Virtual DOM을 비교(diffing)하는 대신, 빌드 시점에 상태 변경이 DOM을 어떻게 업데이트해야 하는지 미리 계산합니다.

왜 컴파일러 기반인가

면접에서 "Svelte를 왜 선택했나요?"라고 물으면, 핵심은 런타임 오버헤드 제거 입니다.

• **Virtual DOM 비용 없음 **: React는 상태가 바뀌면 가상 트리 전체를 다시 만들어 비교합니다. Svelte는 어떤 변수가 어떤 DOM 노드에 영향을 주는지 컴파일 타임에 파악해서, 해당 노드만 직접 업데이트합니다.
• ** 번들 크기가 작음 **: 프레임워크 런타임 코드가 번들에 포함되지 않으므로, 작은 앱일수록 번들 크기 차이가 극적입니다.
• ** 코드가 직관적 **: .svelte 파일 하나에 HTML, CSS, JS가 자연스럽게 공존합니다.

프로젝트 생성

# SvelteKit으로 프로젝트 생성 (권장)
npx sv create my-app
cd my-app
npm install
npm run dev

SvelteKit은 Svelte의 공식 애플리케이션 프레임워크입니다. Next.js가 React에 대한 것처럼, SvelteKit은 Svelte에 대한 것입니다.

.svelte 파일 구조

<!-- 스크립트 영역 — 컴포넌트 로직 -->
<script>
  let name = $state('세계');
</script>

<!-- 마크업 영역 — HTML 템플릿 -->
<h1>안녕하세요, {name}!</h1>

<!-- 스타일 영역 — 스코프 CSS -->
<style>
  h1 {
    color: #ff3e00;
  }
</style>

** 핵심 포인트 **: <style> 블록의 CSS는 기본적으로 ** 컴포넌트 스코프 **입니다. 다른 컴포넌트의 h1에는 영향을 주지 않습니다. CSS Modules 같은 별도 설정이 필요 없습니다.

컴파일러가 하는 일

Svelte 컴파일러는 .svelte 파일을 분석해서 크게 세 가지를 생성합니다.

1. ** 컴포넌트 생성 코드 **: DOM 노드를 만들고 마운트하는 함수
2. ** 업데이트 코드 **: 상태 변경 시 어떤 DOM을 업데이트할지 결정하는 코드
3. ** 제거 코드 **: 컴포넌트가 언마운트될 때 정리하는 코드

// 컴파일러가 대략 이런 코드를 생성합니다 (간소화)
function create_fragment(ctx) {
  let h1;
  return {
    // DOM 생성
    c() {
      h1 = document.createElement('h1');
      h1.textContent = `안녕하세요, ${ctx[0]}!`;
    },
    // DOM 마운트
    m(target) {
      target.appendChild(h1);
    },
    // 상태 변경 시 업데이트
    p(ctx) {
      h1.textContent = `안녕하세요, ${ctx[0]}!`;
    },
    // DOM 제거
    d(detaching) {
      if (detaching) h1.remove();
    }
  };
}

React와의 비교

Svelte 5 — Runes의 등장

Svelte 5에서는 Runes 라는 새로운 반응성 시스템이 도입되었습니다.

<script>
  // Svelte 4 방식 — 암시적 반응성
  // let count = 0;

  // Svelte 5 방식 — Runes로 명시적 반응성
  let count = $state(0);
  let doubled = $derived(count * 2);

  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  클릭 횟수: {count} (2배: {doubled})
</button>

$state, $derived, $effect — 이 세 가지 rune이 Svelte 5 반응성의 핵심입니다.

면접 포인트

• "Virtual DOM이 왜 필요 없나요?": 컴파일러가 빌드 시점에 어떤 상태가 어떤 DOM에 영향을 주는지 정적 분석하므로, 런타임에 트리 비교를 할 필요가 없습니다.
• "번들 크기가 작은 이유는?": 프레임워크 런타임이 번들에 포함되지 않고, 컴파일된 컴포넌트 코드만 포함되기 때문입니다.
• "Svelte의 단점은?": 커뮤니티 생태계가 React보다 작고, 컴파일 단계가 필수이며, 디버깅 시 컴파일된 코드를 봐야 할 수 있습니다.

정리

Svelte를 한 문장으로 요약하면, "Write less code, get more performance" 입니다. 컴파일러가 무거운 작업을 빌드 타임에 처리해주니, 런타임에는 가장 최적화된 바닐라 JS에 가까운 코드만 실행됩니다. 프론트엔드 프레임워크를 배울 때 "런타임 vs 컴파일 타임" 관점에서 생각해보면 각 프레임워크의 설계 철학이 더 선명하게 보입니다.