상위 질문
타임라인
채팅
관점
Svelte
위키백과, 무료 백과사전
Remove ads
Svelte는 자유-오픈 소스 컴포넌트 기반 프론트엔드 소프트웨어 프레임워크[2]이자 언어이다.[3] 리치 해리스가 만들고 스벨트 핵심 팀 멤버들이 관리한다.[4]
스벨트는 애플리케이션에 의해 임포트되는 모놀리식 자바스크립트 라이브러리가 아니다. 대신, 스벨트는 HTML 템플릿을 DOM을 직접 조작하는 특수 코드로 컴파일하여 전송 파일 크기를 줄이고 클라이언트 성능을 향상시킬 수 있다.[5] 애플리케이션 코드 또한 컴파일러에 의해 처리되어, 의존하는 데이터가 수정될 때 자동으로 데이터를 재계산하고[2] UI 요소를 재렌더링하는 호출을 삽입한다.[6] 이는 가상 DOM과 같은 런타임 중간 표현과 관련된 오버헤드를 피할 수 있다.[7] 반면 기존 프레임워크(예: React 및 Vue)는 대부분의 작업을 런타임, 즉 브라우저에서 수행한다.[5][6][4][8][2][7]
컴파일러 자체는 자바스크립트로 작성되었다.[9][8] 소스 코드는 MIT 허가서에 따라 라이선스되며 GitHub에 호스팅된다.[8] 유사한 프론트엔드 라이브러리 중 스벨트는 단 2KB의 가장 작은 번들 크기를 자랑한다.[10]
Remove ads
역사
요약
관점
스벨트의 전신은 리치 해리스가 2013년에 만든 Ractive.js이다.[11]
스벨트 버전 1은 자바스크립트로 작성되었으며 2016년 11월 29일에 출시되었다.[12] 스벨트라는 이름은 리치 해리스와 가디언의 동료들이 선택했다.[12]
스벨트 버전 2는 2018년 4월 19일에 출시되었다. 이는 유지보수자들이 이전 버전의 실수라고 생각했던 점들, 예를 들어 이중 중괄호를 단일 중괄호로 대체하는 것 등을 수정하기 위한 것이었다.[12]
스벨트 버전 3은 타입스크립트로 작성되었으며 2019년 4월 21일에 출시되었다. 이 버전은 컴파일러를 사용하여 배후에서 할당을 계측함으로써 반응성을 재정의했다.[2]
SvelteKit 웹 프레임워크는 2020년 10월에 발표되었고 2021년 3월에 베타 버전에 진입했다.[13][14] SvelteKit 1.0은 2년간의 개발 끝에 2022년 12월에 출시되었다.[15]
스벨트 버전 4는 2023년 6월 22일에 출시되었다. 이 버전은 유지보수 릴리스였으며, 버전 3보다 작고 빨랐다.[16] 이 릴리스의 일부로, 내부적으로 JSDoc 주석과 함께 타입스크립트에서 자바스크립트로 다시 작성되었다.[9] 이는 개발자 커뮤니티의 혼란을 야기했고, 스벨트의 개발자 리치 해리스가 이를 해명했다.[17][18]
스벨트 버전 5는 2024년 가을 스벨트 서밋에서 2024년 10월 19일에 출시되었다. 리치 해리스는 다른 스벨트 유지보수자들과 함께 라이브로 출시를 진행했다. 스벨트 5는 스벨트를 완전히 재작성하여 반응성 및 재사용성과 같은 핵심 개념을 변경했다.[19] 주요 기능인 룬(runes)은 반응형 상태를 선언하고 사용하는 방식을 재작업했다. 룬은 함수와 같은 매크로로, 반응형 상태 또는 반응형 상태를 사용하는 코드를 선언하는 데 사용된다. 이 룬은 컴파일러에 의해 값이 변경될 수 있으며 다른 상태 또는 DOM에 의존하는 값을 나타내는 데 사용된다.[20] 스벨트 5는 또한 스니펫(Snippets)을 도입했는데, 이는 한 번 정의된 재사용 가능한 "코드 조각"으로 컴포넌트의 다른 어느 곳에서나 재사용할 수 있다.[21] 스벨트 5는 많은 변경 사항, 특히 룬으로 인한 비권장 사항으로 인해 초기에 논란에 휩싸였다. 그러나 룬의 초기 발표 이후 스벨트 5의 추가적인 개선으로 인해 대부분의 논란은 가라앉았다.
또한 2024년 가을 스벨트 서밋에서 벤 맥캔은 npm에 sv 패키지 이름으로 스벨트 CLI를 발표했다.[22]
스벨트의 초기 주요 기여자로는 스벨트 1 출시와 함께 Conduitry가 참여했고, 2019년에 탄 리 하우, 2020년에 벤 맥캔이 합류했다.[12] 리치 해리스와 사이먼 홀트하우젠은 2022년에 Vercel에 합류하여 스벨트 작업을 전담했다.[23] 도미닉 개너웨이는 2023년에 React 핵심 팀에서 Vercel로 이직하여 스벨트 작업을 전담했다.[24]
Remove ads
문법
요약
관점
스벨트 애플리케이션 및 컴포넌트는 .svelte 파일에 정의된다. 이 파일은 자바스크립트 기반이며 JSX와 유사한 템플릿 문법으로 확장된 HTML 파일이다.
스벨트의 핵심 기능은 룬(runes)을 통해 접근한다. 룬은 문법적으로 함수처럼 보이지만, 컴파일러에 의해 매크로로 사용된다. 이러한 룬에는 다음이 포함된다.
- 반응형 상태 값을 선언하는 데 사용되는
$state룬 - 하나 이상의 상태에서 파생된 반응형 상태를 선언하는 데 사용되는
$derived룬 - 종속성이 변경될 때마다 다시 실행되는 코드를 선언하는 데 사용되는
$effect룬
또한, { JavaScript code } 문법은 HTML 요소 및 컴포넌트에서 템플릿팅에 사용될 수 있으며,[25] 자바스크립트의 템플릿 리터럴과 유사하다. 이 문법은 양방향 데이터 바인딩, 이벤트 리스너, CSS 스타일링과 같은 용도로 요소 속성에서도 사용될 수 있다.
스벨트로 만든 할 일 목록 예시는 다음과 같다.
<script>
let todos = $state([]);
let input = $state();
let all = $derived(todos.length);
let done = $derived(todos.filter(todo => todo.done).length);
function handleKey(e) {
if (e.key === "Enter") {
todos.push({text: input.value, done: false});
input.value = ;
}
}
</script>
<span style:font-size="20px" style:font-weight="bold">Todo List</span>
{done}/{all}<br>
{#each todos as {text, done}, index}
<input type="checkbox" bind:checked={todos[index].done} name={text}/>
<label for={text} style:text-decoration-line={done ? "line-through" : ""}>{text}</label>
<br>
{/each}
<br>
<label for="input">Add todo</label>
<br>
<input type="text" name="input" bind:this={input} onkeypress={handleKey}/>
Remove ads
관련 프로젝트
스벨트 유지보수자들은 스벨트를 사용하여 프로젝트를 구축하는 공식적인 방법으로 SvelteKit을 만들었다. SvelteKit은 Next.js 스타일의 프레임워크로, 브라우저로 전송되는 코드의 양을 극적으로 줄인다. 유지보수자들은 이전에 SvelteKit의 전신인 Sapper를 만들었다.[28]
스벨트 유지보수자들은 또한 스벨트 조직 하에 Vite, Rollup, Webpack, 타입스크립트, VS Code, Chrome 개발자 도구, ESLint, Prettier를 포함한 인기 소프트웨어 프로젝트들을 위한 다양한 통합을 관리한다.[29] Storybook과 같은 여러 외부 프로젝트들도 스벨트 및 SvelteKit과의 통합을 만들었다.
영향
채택
스벨트는 개발자들에게 널리 칭찬받고 있다. 여러 대규모 개발자 설문조사에서 최고 순위를 차지했으며, 2021년 스택 오버플로에서 가장 사랑받는 웹 프레임워크이자 2020년 State of JS 프론트엔드 프레임워크에서 가장 만족스러운 개발자로 선정되었다.[30][31]
최근 설문조사에서도 스벨트의 강력한 개발자 만족도가 계속해서 나타나고 있으며, 2024년 State of JS 설문조사에서는 가장 칭찬받는 프론트엔드 프레임워크 중 하나로 그 입지를 유지하고 있다.[32] 2024년 스택 오버플로 개발자 설문조사에서는 스벨트를 사용한 개발자의 73%가 계속 사용하기를 원하며, 스택 오버플로 팀 자체도 2024년 개발자 설문조사 결과 사이트를 구축하는 데 스벨트를 사용했다고 보고했다.[33]
스벨트는 뉴욕 타임스, 애플, 스포티파이, 라디오 프랑스 (프랑스 국영 라디오 방송사),[34] 스퀘어, 야후, 바이트댄스, 라쿠텐, 블룸버그, 로이터, 이케아, 페이스북, 브레이브를 포함한 여러 유명 웹 기업에서 채택되었다.[35][36][37]
Svelte Society로 알려진 비유지보수자 커뮤니티 그룹은 Svelte Summit 컨퍼런스를 개최하고, Svelte 뉴스레터를 발행하며, Svelte 팟캐스트를 호스팅하고, Svelte 도구, 컴포넌트, 템플릿 디렉토리를 호스팅한다.[38]
Remove ads
같이 보기
각주
외부 링크
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads