| <colbgcolor=#ffffff,#1f2023><colcolor=#4A4A55> 스벨트킷 SvelteKit | |
| | |
| 제작자 | 리치 해리스(Rich Harris) |
| 분류 | 풀스택 웹 프레임워크 |
| 언어 | JavaScript |
| 버전 | 2.5.9 |
| 라이선스 | MIT 라이선스 |
| | |
[clearfix]
1. 개요
공식 웹 사이트
2021년 여름 구 Sapper에서 재구성한 풀스택 웹 어플리케이션 개발 도구. 2022년 12월 15일 1.0.0 버전을 공개하였다. 기존 SPA 방식을 비롯하여, Next.js 와 비슷하게 SSR, SSG 방식을 지원하며, 개발 도구답게 Svelte 컴포넌트 등의 생태계 기반 개발 성향도 띄고 있다.
또한, npm build svelte 와 npm build sapper 등 예제 프로젝트 소스 및 개발 방식이 분화되어 있는 상태를 svelteKit 방식으로 일원화하기 위한 목적도 있으며, 해당 SSR 기능 솔루션 사용으로 CSR(Client-side rendering) 방식의 대표적인 문제점으로 지적되는 웹사이트 규모의 거대화로 인한 초기 로딩 소스 용량 비대화 및 지연을 최소화할 수 있는 장점이 있다.
자세하게 보자면, 기존 Svelte 상에서는 모든 소스를 웹사이트 초기 로딩 때 모두 다운로드해야 하였으나, sveltekit(sapper)에서는 code splitting, chunk 등의 기능[1]을 SSR과 버무려서 사용함으로써 웹사이트 방문한 페이지에 따라 해당 방문 페이지에 필요한 컴포넌트만 로딩하고, 그 외의 컴포넌트는 로딩하지 않는 원리라고 볼 수 있다.
번들링은 Vite를 사용하고 있는데, 기존 Svelte에 사용하던 webpack 대체제인 Rollup 번들러 플러그인을 별도 수정 없이 그대로 사용하면서도, 빠른 개발 기능과 빠른 성장 속도로 인해 Sapper 당시 전환하려던 Snowpack 연동을 포기하고 수용한 것이다. 그리고 Snowpack 개발 팀은 새로운 개념의 SSR/SSG 프레임워크인 Astro를 개발하였다.
과거 SvelteKit도 그랬던 것처럼, Vite 측에서도 SSR 방식에 대한 이슈가 Vite 4.0이 되면서 많이 안정화 되었다. 조금 남긴 했지만, Vite 연동 현황에 관심이 있다면 이 이슈를 보도록 하자.
SvelteKit 초기 버전에서는 여느 프론트엔드의 풀스택 프레임워크처럼 파일 기반 라우팅을 사용하였으나, 파일 기반 라우팅 시스템이 너무 유연하게 짜여져 그런지 여러 케이스 대응이 어려워지자 중간에 Next.js 처럼 폴더 기반 라우팅으로 완전히 전환했다. 당시 베타 버전 치고는 엄청나게 큰 변경 사항이었으나, 고질적 라우팅 문제도 같이 수정되어 호응이 좋았고, 정식 출시인 1.0 부터는 폴더 방식의 라우팅만 지원한다.
2. 학습
2.1. 웹페이지
2.1.1. 공식 튜토리얼
2.1.2. 블로그
2.2. 도서
[1] 소스를 작은 단위로 쪼개는 기능들이다.