Svelte 편집하기

{| class="wikitable"
| [[파일:Svelte Logo.svg]]
|-
! Svelte 로고
|}

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

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

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

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

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

<syntaxhighlight lang="svelte">
<script>
  let name = 'Svelte';
</script>

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

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

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

<syntaxhighlight lang="svelte">
<script>
  let count = 0;

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

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

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

<syntaxhighlight lang="svelte">
<script>
  export let message;
</script>

<p>{message}</p>
</syntaxhighlight>

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

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

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

<syntaxhighlight lang="bash">
npx create-svelte@latest my-app
cd my-app
npm install
npm run dev
</syntaxhighlight>

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

== 참고 자료 ==
* Svelte 공식 웹사이트: [https://svelte.dev Svelte.dev]
* SvelteKit 공식 웹사이트: [https://kit.svelte.dev SvelteKit.dev]

<!-- 분류 -->
[[분류:웹 프레임워크]] [[분류:프론트엔드]]