초보를 위한 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), 엣지 런타임, 또는 완전한 정적 호스팅 등 타겟 배포 환경에 맞춰 결과물을 변환해 줍니다.

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