Svelte와 SvelteKit

스벨트(Svelte)와 스벨트킷(SvelteKit)의 관계는 리액트(React)와 넥스트제이에스(Next.js), 또는 뷰(Vue)와 넉스트제이에스(Nuxt.js)의 관계와 유사합니다.

 

간단히 말해, 일반 스벨트는 사용자 인터페이스(UI)를 구축하기 위한 컴포넌트 프레임워크이자 컴파일러이고, 스벨트킷은 스벨트를 기반으로 완전한 웹 애플리케이션을 만들기 위해 다양한 백엔드 및 라우팅 기능이 추가된 **공식 애플리케이션 프레임워크(메타 프레임워크)**입니다.

 

구체적인 차이점과 스벨트킷이 제공하는 추가 기능은 다음과 같습니다.

 

 

1. 렌더링 방식의 확장 (SSR, SSG 지원)

• 일반 스벨트: 기본적으로 클라이언트 사이드에서만 렌더링(CSR)을 수행하여 단일 페이지 애플리케이션(SPA)을 만듭니다.
• 스벨트킷: 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 하이브리드 렌더링을 모두 지원합니다. 이는 초기 페이지 로딩 속도를 높이고 검색엔진 최적화(SEO)를 개선하는 데 매우 중요합니다.

2. 파일 기반 라우팅 및 네비게이션

• 일반 스벨트 자체에는 라우팅 기능이 내장되어 있지 않아 외부 라이브러리를 사용해야 합니다. 반면, 스벨트킷은 파일 및 폴더 구조를 기반으로 작동하는 강력한 클라이언트 사이드 라우팅 시스템을 기본적으로 제공합니다.

3. API 엔드포인트 및 풀스택 개발

• 스벨트킷을 사용하면 동일한 프로젝트 내에서 프론트엔드 UI뿐만 아니라 서버 사이드 로직을 처리하는 API 라우트(엔드포인트)를 만들고 데이터를 로딩할 수 있습니다. 이를 통해 별도의 백엔드 서버 없이도 풀스택 웹 애플리케이션 구축이 가능해집니다.

4. 어댑터(Adapter)를 통한 유연한 배포

• 스벨트킷은 어댑터 시스템을 통해 구축된 앱을 다양한 환경에 쉽게 배포할 수 있도록 도와줍니다. Node.js 서버, 서버리스 함수(Serverless Functions), 엣지 런타임, 또는 완전한 정적 호스팅 등 타겟 배포 환경에 맞춰 결과물을 변환해 줍니다.

요약하자면, 스벨트 언어의 문법과 컴포넌트 작성 방식을 학습할 때는 '일반 스벨트'를 다루게 되지만, 실제 중대형 규모의 프로덕션용 웹 서비스나 풀스택 애플리케이션을 구축할 때는 라우팅, 서버 렌더링 등의 필수 기능이 모두 통합된 '스벨트킷'을 사용하는 것이 권장됩니다.