FE
[SvelteKit] Svelte와 SvelteKit란?
| 간단한 소개
Svelte는 React, Vue처럼 컴포넌트 기반의 프론트엔드 프레임워크입니다.
하지만 가장 큰 특징은 “가볍고 빠르다”는 점이에요.
대부분의 프론트엔드 프레임워크(React, Vue 등)는 런타임 시점에 Virtual DOM을 이용해 화면을 갱신하지만,
반면 Svelte는 빌드(compile) 단계에서 이런 과정을 미리 계산하여 최적화된 JavaScript 코드로 변환합니다.
즉, 브라우저는 별도의 프레임워크 런타임 없이 순수 JS 코드만 실행하면 됩니다.
1) Svelte의 특징
특징 | 설명 |
Virtual DOM 없음 | Virtual DOM 비교 단계를 생략하고, 변경 지점을 직접 DOM 업데이트 코드로 변환 |
컴파일 기반 | 빌드 시점에 최적화된 JavaScript로 컴파일되어 런타임 오버헤드 최소화 |
성능 우수 | Virtual DOM 연산이 없고, 런타임 코드가 작아 초기 렌더링 속도 빠름 |
간결한 문법 | let count = 0;처럼 변수만 변경해도 UI 자동 업데이트 |
CSS 스코프 자동화 | 컴파일 시점에 클래스명을 고유화하여, 각 컴포넌트의 CSS가 다른 컴포넌트에 영향을 주지 않음 |
| 런타임 프레임워크와의 차이점
일반적으로 React, Vue 같은 프레임워크는 Virtual DOM을 이용해 상태 변화를 계산하고,
변경된 부분만 실제 DOM에 반영합니다.
React: 상태가 변하면 → Virtual DOM 생성 → 이전 DOM과 비교 → 변경된 부분만 실제 DOM에 반영
Vue: 유사하게 Virtual DOM을 활용하여 상태 변화를 추적
하지만 Svelte는 Virtual DOM이 없습니다.
Svelte는 빌드 시점에 이미 “어떤 변수가 바뀌면 어떤 DOM이 갱신돼야 하는지”를 계산해
그 결과를 순수 JavaScript 코드로 변환합니다.
즉, DOM 업데이트 코드 자체가 컴파일 결과물에 포함됩니다.
1) React, Vue와의 차이점
구분 | Svelte | React | Vue |
작동 방식 | 컴파일 타임 | 런타임 (Virtual DOM) | 런타임 (Virtual DOM) |
상태 관리 | 변수(let count = 0)로 직접 반응형 | useState, useEffect 훅 | data(), reactive() 등 |
문법 복잡도 | 매우 간결 | 상대적으로 복잡 | 중간 |
번들 크기 | 작음 | 큼 | 중간 |
렌더링 성능 | 매우 빠름 | 빠름 | 빠름 |
학습 난이도 | 쉬움 | 중간 | 중간 |
풀스택 프레임워크 | SvelteKit | Next.js | Nuxt.js |
| SvelteKit
SvelteKit은 Svelte 위에 라우팅, 서버 렌더링(SSR), 데이터 로딩, API 엔드포인트를 결합한 공식 풀스택 프레임워크입니다.
React 생태계의 Next.js처럼, SvelteKit은 클라이언트 렌더링(CSR)뿐 아니라 서버 렌더링(SSR)과 정적 사이트 생성(SSG)도 지원합니다.
즉, 단순한 SPA(Single Page Application)부터 SEO가 필요한 MPA(Multi Page Application)까지 모두 구현할 수 있습니다.
그렇다면, Svelte와 SvelteKit의 차이점이 무엇일까요?
관점 | Svelte (Vite) | SvelteKit |
라우팅 | 직접 라우터 설치 및 설정 필요 | /routes 폴더 기반 자동 라우팅 |
페이지 구조 | 단일 진입점 (SPA) | 파일 기반 다중 페이지 (MPA/SSR) |
데이터 로딩 | 각 페이지에서 fetch 직접 호출 | load() 함수로 표준화된 데이터 패칭 구조 |
인증 / 세션 관리 | 클라이언트 사이드 전용 | SSR/CSR 모두 지원 — 확장성 높음 |
유지보수성 | 규모 커질수록 복잡해짐 | 라우팅과 데이터 흐름이 구조적으로 관리됨 |
| Re:Log 프로젝트에 적용
현재 개발 중인 Re:Log 프로젝트는 단순한 정적 페이지가 아니라,
사용자별 데이터를 다루고 여러 화면 간 전환이 일어나는 인터랙티브한 웹 애플리케이션입니다.
페이지 간 전환과 데이터 기반 상태 관리가 핵심이기에,
라우팅 시스템과 클라이언트 상태를 효율적으로 관리할 수 있는 구조가 필요합니다.
물론 Svelte(Vite) 환경에서도 라우팅과 상태 관리를 직접 구현할 수는 있습니다.
하지만 SvelteKit은 라우팅과 데이터 로딩 흐름이 내장되어 있어,
같은 기능을 훨씬 일관되고 유지보수하기 쉬운 방식으로 구축할 수 있습니다.
특히 Re:Log처럼 사용자 인증과 여러 페이지 전환이 필요한 서비스에서는,
SvelteKit의 파일 기반 라우팅 구조와 통합된 데이터 흐름(load 함수)이 큰 강점이 된다고 생각합니다.
즉, 아래의 경우를 고려하면서 SvelteKit이 Re:Log에 가장 적합한 선택이라 생각했습니다.
페이지가 여러 개인 사용자 중심 서비스이고,
로그인 상태와 데이터 흐름이 명확히 분리되어야 하며,
확장 가능한 폴더/라우팅 구조를 고려할 때,
| 프로젝트 시작 방법
SvelteKit은 내부적으로 Vite를 사용하며, 프로젝트를 생성하면 기본적으로 아래와 같은 구조로 세팅됩니다.
1) 기본 세팅 명령어
# 1. Vite로 Svelte 프로젝트 생성
npm create svelte@latest my-svelte-app
# 2. 디렉토리 이동
cd my-svelte-app
# 3. 패키지 설치
npm install
# 4. 로컬 서버 실행
npm run dev2) 실행 후 폴더 구조
my-svelte-app/
├── README.md
├── eslint.config.js
├── package-lock.json
├── package.json
├── src
│ ├── app.css
│ ├── app.d.ts
│ ├── app.html
│ ├── lib
│ │ ├── assets
│ │ │ └── favicon.svg
│ │ └── index.ts
│ └── routes
│ ├── +layout.svelte
│ └── +page.svelte
├── static
│ └── robots.txt
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts