본문으로 이동

Svelte

위키백과, 우리 모두의 백과사전.
Svelte
원저자리치 해리스
개발자스벨트 기여자들. 주요 기여자는 리치 해리스, 앨런 포버트, 탄 리 하우, 벤 맥캔, 사이먼 홀트하우젠 등이 있다.
발표일2016년 11월 26일(8년 전)(2016년 11월 26일)
안정화 버전
5.28.2[1] 위키데이터에서 편집하기
저장소
프로그래밍 언어자바스크립트, 타입스크립트 위키데이터에서 편집하기
플랫폼웹 플랫폼
종류웹 프레임워크
라이선스MIT 허가서
웹사이트Svelte 위키데이터에서 편집하기 - 공식 웹사이트

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]

역사

[편집]

스벨트의 전신은 리치 해리스가 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]

문법

[편집]

스벨트 애플리케이션 및 컴포넌트는 .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}/>

관련 프로젝트

[편집]

SvelteKit
안정화 버전
1.15.5[26][27] 위키데이터에서 편집하기 / 2023년 4월 13일(2년 전)(2023년 4월 13일)
저장소https://github.com/sveltejs/kit 위키데이터에서 편집하기
프로그래밍 언어자바스크립트, 타입스크립트, Svelte 위키데이터에서 편집하기
플랫폼웹 플랫폼
종류웹 프레임워크
라이선스MIT 허가서
웹사이트svelte.dev/docs/kit

스벨트 유지보수자들은 스벨트를 사용하여 프로젝트를 구축하는 공식적인 방법으로 SvelteKit을 만들었다. SvelteKit은 Next.js 스타일의 프레임워크로, 브라우저로 전송되는 코드의 양을 극적으로 줄인다. 유지보수자들은 이전에 SvelteKit의 전신인 Sapper를 만들었다.[28]

스벨트 유지보수자들은 또한 스벨트 조직 하에 Vite, Rollup, Webpack, 타입스크립트, VS Code, Chrome 개발자 도구, ESLint, Prettier를 포함한 인기 소프트웨어 프로젝트들을 위한 다양한 통합을 관리한다.[29] Storybook과 같은 여러 외부 프로젝트들도 스벨트 및 SvelteKit과의 통합을 만들었다.

영향

[편집]

Vue.js는 스벨트의 전신인 Ractive.js의 API와 단일 파일 컴포넌트를 모델링했다.[11]

채택

[편집]

스벨트는 개발자들에게 널리 칭찬받고 있다. 여러 대규모 개발자 설문조사에서 최고 순위를 차지했으며, 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]

같이 보기

[편집]

각주

[편집]
  1. ↑ “svelte@5.28.2”. 2025년 5월 1일에 확인함. 
  2. ↑ 가 나 다 라 Harris, Rich (2019년 4월 22일). “Svelte 3: Rethinking reactivity”. 《svelte.dev》 (영어). 2021년 8월 7일에 확인함. 
  3. ↑ Harris, Rich (2018년 11월 26일). “The truth about Svelte”. 《GitHub Gist》 (미국 영어). 2022년 12월 21일에 확인함. 
  4. ↑ 가 나 Krill, Paul (2016년 12월 2일). “Slim, speedy Svelte framework puts JavaScript on a diet”. 《InfoWorld》. 
  5. ↑ 가 나 “React vs. Svelte, the JavaScript build-time framework”. 《react-etc.net》. 
  6. ↑ 가 나 “Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris”. 《InfoQ》. 
  7. ↑ 가 나 Harris, Rich (2018년 12월 27일). “Virtual DOM is pure overhead”. 《svelte.dev》 (영어). 
  8. ↑ 가 나 다 “GitHub - sveltejs/svelte: Cybernetically enhanced web apps”. 2020년 1월 11일 – GitHub 경유. 
  9. ↑ 가 나 “TS to JSDoc Conversion #8569”. 《GitHub.com》. 
  10. ↑ Frontendeng.dev (2023년 8월 1일). “Svelte vs React: Which framework is better?”. 《frontendeng.dev》 (영어). 
  11. ↑ 가 나 Świstak, Tomasz (2020년 11월 19일). “About the Svelte JavaScript framework”. Blog. 《ValueLogic》 (미국 영어). 2022년 3월 27일에 원본 문서에서 보존된 문서. 2021년 6월 10일에 확인함. By the way, Vue’s syntax has been influenced by Ractive.js, a direct predecessor of Svelte. 
  12. ↑ 가 나 다 라 “Svelte Origins: A JavaScript Documentary”. 《YouTube》 (영어). 2022년 6월 21일. 2022년 7월 9일에 확인함. 
  13. ↑ “Rich Harris: Futuristic Web Development”. 《YouTube》 (영어). 2020년 10월 19일. 2021년 12월 12일에 원본 문서에서 보존된 문서. 2021년 8월 3일에 확인함. 
  14. ↑ Harris, Rich (2021년 3월 23일). “SvelteKit is in public beta”. 《svelte.dev》 (미국 영어). 2021년 8월 3일에 확인함. 
  15. ↑ “Accouncing SvelteKit 1.0”. 2022년 12월 14일. 2022년 12월 16일에 확인함. 
  16. ↑ team, The Svelte (2023년 6월 22일). “Announcing Svelte 4”. 《svelte.dev》 (영어). 2023년 8월 8일에 확인함. 
  17. ↑ “TS to JSDoc Conversion”. 《Hacker News (news.ycombinator.com)》. 2023년 5월 10일. 
  18. ↑ “Lordy, I did not expect an internal refactoring PR to end up #1 on Hacker News. ...”. 《Hacker News (news.ycombinator.com)》. 2023년 5월 10일. 
  19. ↑ “Svelte 5 is alive”. 《svelte.dev》. 2024년 10월 22일. 
  20. ↑ “Introducing runes”. 《svelte.dev》. 2023년 9월 20일. 
  21. ↑ “{#snippet ...}”. Docs. 《svelte.dev》. 
  22. ↑ McCann, Ben (2024년 10월 24일). “Introducing the new Svelte CLI”. 《svelte.dev》 (영어). 2024년 12월 20일에 확인함. 
  23. ↑ Harris, Rich (2021년 11월 11일). “today is a big day for @sveltejs: i've joined @vercel to work on it full time!”. 《Twitter》 (미국 영어). 2022년 9월 4일에 확인함. 
  24. ↑ “trueadm/status/1640761270566633472”. 《X (formerly Twitter)》 (영어). 2023년 9월 30일에 확인함. 
  25. ↑ “Svelte tutorial page”. 《svelte.dev》. 2022년 7월 6일에 확인함. 
  26. ↑ “@sveltejs/kitTypeScript icon, indicating that this package has built-in type declarations1.15.5”. 2024년 11월 26일에 확인함. 
  27. ↑ “@sveltejs/kit@1.15.5”. 《깃허브》. 2024년 11월 26일에 확인함. 
  28. ↑ Harris, Rich (2017년 12월 31일). “Sapper: Towards the ideal web app framework”. 《svelte.dev》 (미국 영어). 2022년 11월 29일에 확인함. 
  29. ↑ “Svelte”. 《GitHub》 (미국 영어). 2021년 8월 3일에 확인함. 
  30. ↑ “Stack Overflow Developer Survey 2021”. 《Stack Overflow》 (미국 영어). 2022년 6월 25일에 원본 문서에서 보존된 문서. 2021년 10월 26일에 확인함. 
  31. ↑ “State of JS 2020: Front-end Frameworks”. 《2020.stateofjs.com》 (영어). 2021년 10월 26일에 확인함. 
  32. ↑ “State of JavaScript 2024: Front-end Frameworks”. 《2024.stateofjs.com》 (영어). 2025년 6월 28일에 확인함. 
  33. ↑ “2024 Stack Overflow Developer Survey”. 《Stack Overflow》 (영어). 2025년 6월 28일에 확인함. 
  34. ↑ “Radio France migrated their site to SvelteKit”. 《reddit.com》 (미국 영어). 2021년 9월 2일. 2024년 6월 4일에 확인함. 
  35. ↑ “Svelte • Cybernetically enhanced web apps”. 《svelte.dev》 (미국 영어). 2021년 8월 3일에 확인함. 
  36. ↑ “Websites using Svelte - Wappalyzer”. 《www.wappalyzer.com》. 2021년 8월 3일에 확인함. 
  37. ↑ “Your Profile, Your Home Experience”. 《yourhome.fb.com》 (미국 영어). 2021년 12월 1일에 확인함. 
  38. ↑ “Home - Svelte Society”. 《sveltesociety.dev》 (영어). 2021년 8월 3일에 확인함. 

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=Svelte&oldid=40274463"