SvelteKit이란?
SvelteKit은 Svelte를 사용하여 웹 애플리케이션을 구축하기 위한 프레임워크입니다. SvelteKit을 사용하면 서버 측 렌더링, 라우팅 및 API 호출을 쉽게 처리할 수 있으며 Node.js, Deno 및 Lambda와 같은 다양한 백엔드와 함께 사용할 수 있습니다. 다양한 환경에 배포할 수 있는 확장 가능한 고성능 웹 애플리케이션을 쉽게 구축할 수 있도록 설계되었습니다.
쉽게 생각하면 React의 Nextjs나 Vue의 Nuxtjs 같은거라고 생각하면 됩니다. 작년 12월 15일에 나온 따끈따끈한 프레임워크입니다.
Svelte는 프론트엔드 프레임워크 중에서 사람들이 가장 많이 관심을 가지고 있는 것이기도 합니다. 위 그림을 보면 4년째 1위를 차지하고 있네요.
Svelte란?
Svelte가 뭔지 간단하게 짚고 넘어가자면 Svelte는 웹 애플리케이션 구축을 위한 JavaScript 프레임워크인데요. 가상 DOM을 사용하지 않고 대신 실제 DOM을 업데이트하는 명령형 코드로 구성 요소를 컴파일한다는 점에서 React 또는 Angular와 같은 프레임워크와는 다릅니다. 이를 통해 보다 효율적인 런타임과 더 빠른 로드 시간이 가능합니다. 또한 문법도 React나 Angular, Vue 보다 간결하고 코드도 짧습니다.
가상 돔을 사용하는게 실제 돔을 조작하는 것보다 빠르다고 생각할 수도 있지만 당연히 레이어가 하나 더 추가되어 있는 것이기 때문에 느립니다. JQuery가 너무 느려서 React나 Vue 같은 가상 돔을 사용하는 프레임워크가 나오긴 했지만 실제 돔을 조작하는 게 더 빠릅니다.
Svelte 데모 앱 실행해보기
Nodejs는 미리 설치가 되어있어야 합니다. 터미널에 다음 명령어를 실행하면 됩니다.
npm create svelte@latest demo그러면 Welcome to SvelteKit! 이라고 나오면서 진행이 됩니다. 중간에 선택하는게 몇개 나오는데 화살표로 선택하고 엔터 누르면 됩니다.
설치가 끝나면 실행하는 방법도 친절하게 알려줍니다. 3번은 안 해도 됩니다.
위에서 설명해준대로 실행하고 localhost:5713으로 접속해보면 데모 앱을 볼 수 있습니다.
SVERDLE에 가면 단어 맞추기 게임도 할 수 있는데 WORDLE에서 따온것 같네요.
간단하게 알아보기
my-app이라는 새로운 프로젝트를 만들고 시작해보겠습니다. Skeleton project 옵션으로 만들었습니다.
npm run dev로 실행해보면 이런 페이지가 나오는데요. 이 상태로 진행해보겠습니다.
라우팅
경로 기반 라우팅
src/routes/+page.svelte를 확인해보면 다음과 같이 되어 있습니다. +pages.svelte는 스벨트에서 페이지입니다. 여기에 HTML과 style, script를 작성하면 됩니다. 기본적으로 SSR을 지원해준다고 합니다.
메인페이지를 간단하게 바꾸어 보았습니다. 작성하고 저장을 누르면 브라우저에서도 바로 변경사항이 적용됩니다.
스벨트킷은 파일시스템 기반 라우팅을 해주는데요 routes경로 아래에 원하는 경로 이름으로 폴더를 만들고 +pages.svelte룰 작성하면 됩니다. 예를 들어 routes/about/+page.svelte를 작성합니다. 실행한 다음 브라우저로 /about 에 접속하면 해당 페이지가 나옵니다. Nextjs와 유사한 라우팅 시스템이라고 보시면 됩니다.
에러 페이지
커스텀 에러 페이지와 레이아웃 페이지도 간단하게 만들 수 있습니다. 원하는 경로에 +error.svelte파일을 작성하면 됩니다. 예를들어 routes/+error.svelte를 작성해보겠습니다. 그리고 /bloh라는 없는 경로로 접속해보겠습니다. 커스텀 에러 페이지가 잘 나오는 것을 확인할 수 있습니다.
레이아웃 페이지
커스텀 레이아웃 페이지는 +layout.svelte 라는 파일을 작성하면 되니다. 저는 routes에다 작성해 보겠습니다. 작성하고 레이아웃 안에 들어갈 페이지 자리에다 <slot />을 넣으면 됩니다. 그럼 그 위치에 페이지가 표시됩니다.
데이터 로딩
데이터를 로딩하는 방법은 +page.svelte 파일 옆에다 +page.js 파일을 만들면 됩니다. 간단하게 작성해 보았습니다.
이렇게 작성하고 나서 +page.svelte에서 데이터를 가져다 쓰면 됩니다.
+page.js를 작성하면 클라이언트에서 요청을 보내는데요. 만약 DB 접속같은게 필요하면 +page.server.js로 작성하면 됩니다. 그러면 서버 사이드에서 요청을 보내기 때문에 클라이언트에 노출되지 않습니다.
백엔드 만들기
스벨트킷으로 백엔드 기능도 만들 수 있습니다. API route라고 하는데요. +server.js 파일을 만들면 됩니다. 예를 들어 routes/api/hello/+server.js를 만들어보겠습니다.
해당 경로로 접속하면 값이 잘 리턴되는 것을 확인 할 수 있습니다. 데이터베이스 접속 같은것도 할 수 있습니다.
결론
예약된 파일명이나 함수명이 좀 많지않나 싶긴 한데 생각해보면 그건 다른 프레임워크도 마찬가지인거 같네요. 재밌는 웹 프레임워크가 나온거 같습니다. 코드고 짧고 간결하고 가상DOM도 사용하지 않다니 좋은거 같은데 리액트와 경쟁할 수 있을지 기대됩니다.