Svelte

Svelte 로고

개요

Svelte는 현대적인 자바스크립트 프론트엔드 프레임워크 중 하나로, 2016년 리치 해리스(Rich Harris)에 의해 개발되었다. Svelte는 기존 프레임워크와는 달리 런타임 대신 컴파일 타임에 애플리케이션 코드를 처리하여, 더욱 가벼운 애플리케이션을 제작할 수 있도록 설계되었다.

이 프레임워크는 "컴파일러 기반 프레임워크"라는 점에서 리액트나 뷰와는 차별화되며, 개발자의 코드를 컴파일하여 네이티브 자바스크립트 코드로 변환한다. 이로 인해 빌드 결과물이 작고 빠른 성능을 자랑한다.

특징

Svelte는 다른 프론트엔드 프레임워크와 비교하여 다음과 같은 특징을 가진다:

• 컴파일 타임 기반: 런타임에서 가상 DOM을 사용하는 대신, 컴파일 타임에 DOM 조작을 직접 수행하는 최적화된 자바스크립트 코드를 생성한다.
• 직관적인 문법: HTML, CSS, 자바스크립트를 하나의 파일에 결합한 간단한 구성으로 생산성을 높인다.
• 자동 반응성(Reactivity): 상태 변경 시 UI를 자동으로 업데이트하도록 설계되어 개발자의 코드량을 줄여준다.
• 가벼운 빌드: Svelte로 작성된 애플리케이션은 결과물이 작고 성능이 우수하다.

주요 개념

Svelte는 사용법이 간단하고 직관적이다. 기본적인 사용법은 아래와 같다:

컴포넌트

Svelte에서는 모든 파일이 기본적으로 컴포넌트 단위로 구성된다. 파일 확장자는 `.svelte`를 사용하며, HTML, CSS, JavaScript를 포함한다.

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

<style>
  h1 {
    color: purple;
  }
</style>

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

반응성

Svelte는 변수를 자동으로 추적하여 상태 변화에 따라 UI를 업데이트한다. 별도의 상태 관리 도구 없이도 반응성을 쉽게 구현할 수 있다.

<script>
  let count = 0;

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

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

Props

컴포넌트 간 데이터를 전달할 때는 `export` 키워드를 사용한다.

<script>
  export let message;
</script>

<p>{message}</p>

장단점

장점

• 컴파일 타임 최적화를 통한 빠른 성능.
• 사용하기 쉬운 직관적인 문법.
• 런타임 의존성이 없어 결과물이 가볍다.
• 작은 프로젝트부터 대규모 프로젝트까지 유연하게 적용 가능.

단점

• 에코시스템이 리액트나 뷰에 비해 상대적으로 작다.
• TypeScript와의 통합이 초기 버전에는 제한적이었으나, 현재는 개선되고 있다.
• SvelteKit(풀스택 프레임워크)이 안정화되기까지 시간이 걸렸다.

SvelteKit

SvelteKit은 Svelte를 기반으로 한 풀스택 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등을 지원한다. Next.js와 Nuxt.js와 유사한 역할을 하지만, Svelte의 장점을 최대한 활용할 수 있도록 설계되었다.

npx create-svelte@latest my-app
cd my-app
npm install
npm run dev

기타

• Svelte의 마스코트는 고슴도치를 형상화한 심볼이다.
• 2023년 기준 State of JS 설문 조사에서 가장 만족도가 높은 프레임워크로 선정되었다.

참고 자료

• Svelte 공식 웹사이트: Svelte.dev
• SvelteKit 공식 웹사이트: SvelteKit.dev