[Luvit 한달 스터디] 새로운 웹 개발의 시작 스벨트 #1

제이펍 Luvit 한 달 스터디

 

📙Svelte

웹 애플리케이션 개발에 사용되는 오픈소스 프론트엔드 프레임워크

Svelte는 React나 Vue와는 다른 방식으로 접근하는 프론트엔드 도구다. 프레임워크가 아닌 컴파일러라고도 하는 Svelte는 React나 Vue처럼 브라우저에서 코드를 해석하고 실행하는 런타임 방식(가상 DOM)을 따르지 않는다. 대신, 개발자가 작성한 파일을 빌드 시점에 분석해 최적화된 순수 JavaScript 코드로 변환한다.

 

덕분에 최종 결과물에는 프레임워크 자체의 코드가 거의 포함되지 않고, 애플리케이션을 구동하는 데 필요한 최소한의 코드만 남는다. 이로 인해 번들 크기가 작고 초기 로딩 속도가 빠르며, 런타임 성능도 더 뛰어나다.

 

Svelte 특징

✅ No Virtual DOM

React 같은 라이브러리는 상태가 변경될 때마다 가상 DOM(Virtual DOM)이라는 메모리상의 UI 표현을 새로 만들고, 이전 버전과 비교(diffing)하여 실제 DOM에 변경 사항을 적용한다. 이 방식은 효율적이지만, 모든 비교와 업데이트가 런타임에 수행되기 때문에 일정한 오버헤드가 발생한다.

Svelte는 이 과정을 컴파일 시점으로 옮겼다. 예를 들어 count라는 변수가 변경되면, Svelte 컴파일러는 count에 의존하는 DOM 노드를 미리 파악해두고, 해당 노드의 텍스트를 직접 갱신하는 최적화된 JavaScript 코드를 생성한다. 따라서 별도의 가상 DOM이 필요 없으며, 런타임 오버헤드를 최소화할 수 있다.

 

✅ Truly Reactive

Svelte의 반응성 시스템은 $: 레이블 구문을 통해 구현된다. 이는 JavaScript의 기존 레이블 문법을 창의적으로 재해석한 것으로, Svelte 컴파일러에게 해당 코드가 반응형으로 동작해야 함을 알려주는 신호 역할을 한다.

개발자는 어떤 상태가 변할 때 어떤 코드가 실행돼야 하는지를 별도로 선언하거나, React의 useEffect처럼 의존성 배열을 관리할 필요가 없다. Svelte 컴파일러가 변수 간 의존성을 정적 분석하여, 상태 변경 시 필요한 코드만 자동으로 실행되도록 보장한다. 이 덕분에 의존성 배열 관리의 복잡성과 그로 인한 잠재적 버그에서 자유로워진다.

 

✅ Less Code

Svelte는 불필요한 보일러플레이트(boilerplate) 코드를 줄이는 데 초점을 맞췄다. 상태를 관리하기 위해 useState 훅을 사용하거나, 상태 변경을 위해 setCount 같은 함수를 호출할 필요가 없다. 대신 일반 JavaScript 변수에 값을 할당하는 것만으로 상태가 관리되고 UI가 갱신된다.

이러한 접근 방식은 코드량을 크게 줄이고, 가독성을 높이며, 개발자가 비즈니스 로직에 더 집중할 수 있도록 돕는다. 또한 HTML, CSS, JavaScript가 하나의 파일(.svelte)에 자연스럽게 통합되기 때문에 컴포넌트 단위의 유지보수와 생산성이 높다.

---

📙Svelte 개발 환경 설정

Svelte는 Git 저장소 복제 도구인 degit을 사용한다. degit은 git 히스토리를 제외하고 최신 버전의 파일만 가져온다.

# Svelte 공식 템플릿으로 'my-svelte-app' 프로젝트 생성
npx degit sveltejs/template my-svelte-app

# 생성된 폴더로 이동하여 의존성 설치
cd my-svelte-app
npm install

# 개발 서버 실행
npm run dev

degit으로 템플릿을 바다오면 기본적으로 svelte 3.x.x 버전이 설치된다. 최신 메이저 버전은 6이지만, 버전 5부터는 SvelteKit이라는 풀스텍 프레임워크 개념이 통합되었다. 일반 스벨트를 사용하고 싶다는 v4를 사용하는 것이 좋다.

# 프로젝트 루트에서 실행
npx svelte-migrate@latest svelte-4

CLI에서 몇 가지 세부 설정을 물어보면 선택한 후 마이그레이션을 완료하면 된다.

 

폴더구조

생성된 프로젝트의 기본적인 구조는 리액트와 유사하다.

my-svelte-app/
├── public/          # 정적 파일 (favicon, 이미지 등)
│   └── index.html
├── src/             # Svelte 컴포넌트 소스
│   ├── App.svelte   # 루트 컴포넌트
│   └── main.js      # 앱 진입점
├── package.json     # 의존성 정보
└── rollup.config.js # 번들링 설정 (Rollup)

Svelte 4는 기본 번들러로 Rollup을 사용하기 때문에, rollup.config.js가 포함되어 있다. 여기서 빌드 설정을 확인하고 변경할 수 있다. 

---

📙Svelte 컴포넌트 구조

svelte의 모든 컴포넌트는 .svelte 확장자를 가진 하나의 파일로 존재한다. 스크립트 영역, 마크업 영역, 스타일 영역으로 구성된다. 

<!-- App.svelte -->
<script>
  // 1. 스크립트 영역: JS 로직
  let name = "Svelte";
</script>

<!-- 2. 마크업 영역: HTML 구조 -->
<h1>Hello {name}!</h1>

<!-- 3. 스타일 영역: CSS -->
<style>
  /* 여기에 작성된 스타일은 이 컴포넌트에만 적용된다! */
  h1 {
    color: royalblue;
  }
</style>

---

📙Svelte 문법

상태 관리

Svelte의 상태 관리는 `useState` 같은 특별한 API 없이, 일반적인 JavaScript 변수 선언(`let`)으로 시작

단순 상태값

<script>
  let name = 'Svelte';
</script>

<h1>Hello, {name}!</h1>

 

 

이벤트로 상태값 변경

이벤트를 통해 변수에 새로운 값을 할당하면 Svelte가 변경을 감지하고 화면을 자동으로 렌더링한다.

<script>
  let count = 0;

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

<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

 

객체 속성을 상태값으로 사용
객체 또한 상태값이 될 수 있다. 객체의 속성을 변경할 때도 마찬가지로 할당(`=`)을 사용해야 Svelte가 변화를 감지한다.

<script>
  let user = {
    name: '스벨트',
    isLoggedIn: false,
  };

  function login() {
    user = { ...user, isLoggedIn: true };
  }
</script>

{#if user.isLoggedIn}
  <p>{user.name}님 환영합니다.</p>
{:else}
  <button on:click={login}>로그인</button>
{/if}

객체로 이루어진 배열로 상태값 표시

<script>
  let todos = [
    { id: 1, text: 'Svelte 공부하기', done: true },
    { id: 2, text: '운동하기', done: false },
  ];

  function addTodo() {
    const newTodo = { id: Date.now(), text: '새로운 할 일', done: false };
    // 배열에 push 한 후, 자기 자신에게 다시 할당합니다.
    todos.push(newTodo);
    todos = todos;
  }
</script>

<button on:click={addTodo}>할 일 추가</button>
<ul>
  {#each todos as todo (todo.id)}
    <li class:done={todo.done}>{todo.text}</li>
  {/each}
</ul>

<style>
  .done { text-decoration: line-through; color: #aaa; }
</style>

 

반응성

반응성은 특정 상태가 변할 때 다른 값이나 UI가 자동으로 업데이트되는 것

삼항 연산자를 통한 마크업에서의 반응성
스크립트 로직 없이도 마크업 내에서 간단한 반응성을 구현할 수 있다.

<script>
  let loggedIn = false;
</script>

<button on:click={() => loggedIn = !loggedIn}>
  {loggedIn ? '로그아웃' : '로그인'}
</button>

스크립트 반응성 코드 (`$:`)
Svelte의 핵심 기능. $: 레이블은 의존하는 변수가 변경될 때마다 해당 라인의 코드를 다시 실행시킨다.

<script>
  let count = 0;
  
  $: doubled = count * 2;
  $: message = `현재 카운트 ${count}의 두 배는 ${doubled}입니다.`;

  // $: 뒤에 로직 블록도 가능합니다.
  $: if (count >= 5) {
    console.log('카운트가 5 이상입니다!');
  }
</script>

<button on:click={() => count += 1}>
  Count: {count}
</button>
<p>{message}</p>

 

Svelte 이벤트

이벤트 문법
on: 지시어를 사용하여 HTML 요소에 이벤트를 연결한다.

<script>
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }
</script>

<button on:click={handleClick}>클릭</button>

자주 쓰는 이벤트	설명
on:click	요소를 클릭했을 때
on:mouseover	마우스 포인터가 요소 위로 올라왔을 때
on:input	input, textarea 등의 값이 변경될 때
on:submit	<form>이 제출될 때
on:keydown`	키보드를 눌렀을 때

이벤트 수식어
| 기호를 사용하여 이벤트의 동작을 제어하는 수식어를 추가할 수 있다.

<form on:submit|preventDefault={handleSubmit}>
  <button on:click|once>한 번만 클릭 가능</button>
</form>

자주 쓰는 수식어	설명
preventDefault	이벤트의 기본 동작을 막는다.
stopPropagation	이벤트가 상위 요소로 전파(버블링)되는 것을 막는다.
once	이벤트 핸들러를 최초 한 번만 실행한다.
self	event.target이 자기 자신일 때만 핸들러를 실행한다.

 

Svelte Props

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법

Props 기본 문법
자식 컴포넌트의 <script> 블록 안에서 export let으로 변수를 선언하면 해당 변수는 prop이 된다.

<!-- Child.svelte -->
<script>
  export let userName; 
</script>

<p>{userName}님, 환영합니다.</p>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child userName="스벨트" />

Props 기본값 설정
prop을 선언할 때 값을 할당하면 기본값이 된다. 부모에서 해당 prop을 전달하지 않으면 이 기본값이 사용된다.

<!-- Child.svelte -->
<script>
  export let userName = '방문자'; // 기본값 설정
</script>

 

스프레드 Props
객체의 모든 속성을 한 번에 props로 전달하고 싶을 때 사용한다.

<script>
  import InfoCard from './InfoCard.svelte';

  const userInfo = {
    name: '김스벨트',
    age: 10,
    country: '한국',
  };
</script>

<InfoCard {...userInfo} />

 

 

Svelte 로직

템플릿 안에서 동적인 UI를 그리기 위한 제어문

논리 로직: if 블록
조건에 따라 다른 마크업을 렌더링한다.

{#if status === 'loading'}
  <p>로딩 중...</p>
{:else if status === 'error'}
  <p>오류 발생!</p>
{:else}
  <p>로딩 완료.</p>
{/if}

 

 

반복 로직: each 블록
배열의 각 항목을 순회하며 렌더링한다. (item.id)와 같이 고유한 키를 지정해주면 성능 최적화에 도움이 된다.

<ul>
  {#each items as item (item.id)}
    <li>{item.name}</li>
  {:else}
    <li>표시할 항목이 없습니다.</li>
  {/each}
</ul>

---

📙도서 후기

1주차에는 2부까지 공부했다. 총 512페이지 중 2부는 91페이지까지였고, Svelte 개발 환경 세팅과 기본 문법을 다루는 내용이라 큰 어려움은 없었다. 읽으면서 궁금한 점을 찾아보고 정리하는 데까지 2시간이 채 걸리지 않았다.

 

지금까지 느낀 점은 설명이 정말 쉽다는 것이다. 기본적인 내용이라 그렇게 느껴지는 걸 수도 있겠지만, 책 자체가 가볍고 빠르게 읽히는 난이도다. (물론 JavaScript에 대한 기본 지식이 있다는 전제하에) 프론트엔드 프레임워크나 라이브러리 경험이 없는 사람도 이 책으로라면 꽤 빠르게 배울 수 있을 것 같다.

 

챕터마다 퀴즈와 실습 문제가 포함되어 있고, 목차가 굉장히 세분화되어 있다는 점도 마음에 들었다. 위에서 정리한 문법들이 사실 목차를 그대로 옮긴 수준인데, 그만큼 문법 하나하나가 독립된 소주제로 정리돼 있어 필요할 때 뒤적이기 좋았다.

 

React와 다른 점이 많아서 조금 헷갈리면서도, 재미있다. 다음주부터 실습 파트 공부할텐데 너무 기대된다.