| <colbgcolor=#ffffff,#1c1d1f><colcolor=#4A4A55> 스벨트킷 SvelteKit | |
| <nopad> | |
| 제작자 | 리치 해리스(Rich Harris) |
| 분류 | 풀 스택 웹 프레임워크 |
| 언어 | JavaScript |
| 버전 | 2.43.5 |
| 라이선스 | MIT 라이선스 |
| | |
1. 개요
또한, 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. Svelte와의 차이점
Svelte에는 라우팅 기능이 없지만, SvelteKit에서는 폴더 기반 라우팅을 지원한다.3. 사용법
공식 문서3.1. 설치
기본적으로 Node.js가 필요하다. 아래 내용은 공식 문서 creating-a-project를 설명한다.npx sv create my-app
cd my-app
npm install
npm run devmy-app 부분에는 프로젝트 이름을 넣으면 된다. 프로젝트 이름으로 된 폴더가 생성되고, 그 폴더에 프로젝트가 생성된다. 마지막 npm run dev까지 실행했다면 localhost:5173에 접속해서 페이지를 볼수있다. 개발 서버이므로 실제 배포에는 사용하지 말자.
3.1.1. 설치 옵션
npx create 명령어를 실행할때 여러가지를 물어본다. 처음엔 y를 입력해 시작하자.프로젝트의 종류를 선택할수 있다.
- SvelteKit minimal
가장 기본적인 종류이다. 아무것도 없고 +page.svelte 만 있다. 이 파일에 대해선 Route 문단에서 설명한다. - SvelteKit demo
SvelteKit 으로 만든 예제 웹페이지이다. +layout.svelte 를 포함한 여러가지 기능이 들어있다. - Svelte library
Svelte 의 라이브러리를 생성할수 있다. 이 문서에선 자세히 설명하지 않는다.
3.2. Route[2]
프로젝트를 생성했다면 src/routes 폴더로 가자. demo를 생성했다면 여러가지 파일이 있을것이다. minimal은 +page.svelte 한가지만 있다.- +page.svelte
HTML의 index.html 과 같은 역활이다. src/routes에다 생성한다면 기본 페이지로, src/routes의 하위 디랙토리에 생성한다면 디랙토리의 이름으로 된 페이지를 만들수 있다.[3] - +layout.svelte
말 그대로 레이아웃이다. 어떤 페이지를 들어가든지 이게 있으면 이걸 보여준다.
{{{<script>
</script>
<div>
{@render children()}
</div>}}}
와 같이 +page.svelte의 내용을 보여줄수 있다. {@render children()}부분에 +page.svelte가 렌더링 된다. 네비게이션 바를 만들때 사용한다.
3.3. 기본 문법
#!if (문단 == null) == (앵커 == null)
를#!if 문단 != null & 앵커 == null
의 [[Svelte#s-3|3]]번 문단을#!if 문단 == null & 앵커 != null
의 [[Svelte#|]] 부분을더 많은 내용은 공식 문서를 참고하기 바란다.
기본적으로 JavaScript의 변수 이름을 중괄호 한개로 감싸서 변수의 내용을 페이지에 표시할수 있다.
<script lang="ts">
const user = "김민철";
</script>
<div>
<span>나의 이름은 {user}이야.</span>
</div>
그 외에는 평범한 HTML 처럼 사용할수 있다.
4. 학습
4.1. 웹 페이지
4.1.1. 공식 튜토리얼
4.1.2. 블로그
4.2. 도서
[1] 소스를 작은 단위로 쪼개는 기능들이다.[2] https://svelte.dev/docs/kit/routing[3] src/routes/text/+page.svelte 라면 localhost:5173/test로 들어갔을때 해당 +page.svelte 을 보여준다.