무슨 일이 있었나요?
Svelte 팀이 SvelteKit 3을 발표했어요. SvelteKit 2가 2023년 12월에 나왔으니 3년 가까이 만의 메이저 업데이트예요. SvelteKit이 낯선 분들을 위해 설명하면, React에는 Next.js가 있고 Vue에는 Nuxt가 있듯이 Svelte로 풀스택 웹앱을 만들게 해주는 프레임워크예요. 라우팅, 서버 사이드 렌더링(SSR, 서버에서 HTML을 미리 그려서 보내는 것), 데이터 로딩, 배포용 어댑터까지 한 번에 챙겨주죠.
메이저 버전이 올라간다는 건 하위 호환이 깨지는 변경(breaking change)이 들어간다는 뜻이에요. SvelteKit은 전통적으로 메이저 버전에서 그동안 deprecated(곧 없어질 예정)로 표시해둔 API를 정리하고 최소 지원 버전을 올려왔어요. 2.0 때도 Vite 5와 Svelte 4를 필수로 바꾸고 throw redirect()를 redirect()로 쓰게 하는 등 정리 작업이 중심이었죠. 그러니까 3.0을 제대로 이해하려면 2.x 기간에 무엇이 새로 들어오고 무엇이 낡은 방식이 됐는지부터 아는 게 지름길이에요. 정확한 변경 목록은 공식 블로그와 마이그레이션 가이드에 있으니, 여기서는 그 변화들의 맥락을 중심으로 풀어볼게요.
배경 1: Svelte 5와 룬(Runes)
2024년 10월에 나온 Svelte 5는 반응성(값이 바뀌면 화면이 알아서 갱신되는 성질)을 다루는 방식을 완전히 바꿨어요. 예전에는 let count = 0이라고만 써도 컴파일러가 알아서 반응형으로 만들어줬어요. 편하긴 했지만 어디까지가 반응형인지 헷갈린다는 문제가 있었죠. Svelte 5부터는 $state, $derived, $effect, $props 같은 룬으로 명시적으로 표시해요. let count = $state(0)처럼요. 마법처럼 굴러가던 동작이 명확한 규칙으로 바뀐 셈이에요.
배경 2: $app/stores에서 $app/state로
룬에 맞춰 SvelteKit도 2.12에서 $app/state 모듈을 내놨어요. 예전에는 현재 페이지 정보를 $page.url처럼 스토어 문법으로 꺼냈는데, 이제는 page.url처럼 일반 객체를 읽듯이 쓰면 돼요. 기존 $app/stores는 deprecated로 표시됐으니, 아직 쓰고 있다면 업그레이드 전에 바꿔두는 게 좋아요.
배경 3: 리모트 함수(Remote Functions)
2.27에서 실험 기능으로 들어온 리모트 함수는 최근 SvelteKit의 가장 큰 변화예요. 이게 뭐냐면, 서버에서 실행할 함수를 .remote.ts 파일에 써두면 컴포넌트에서 일반 함수처럼 불러 쓸 수 있는 기능이에요. 중간에 필요한 API 엔드포인트와 fetch 코드는 SvelteKit이 대신 만들어주고, 타입도 그대로 이어져요.
// src/routes/posts.remote.ts
import { query } from '$app/server';
import { db } from '$lib/server/db';
export const getPosts = query(async () => {
return await db.getPosts();
});
데이터를 읽을 땐 query, 폼을 제출할 땐 form, 폼 없이 데이터를 바꿀 땐 command, 빌드할 때 미리 만들어둘 땐 prerender를 써요. 기존 load 함수는 데이터를 페이지(라우트)에 묶어요. 반면 리모트 함수를 쓰면 데이터를 그 데이터가 필요한 컴포넌트 바로 옆에 둘 수 있어요.
배경 4: 비동기 Svelte
같은 시기에 Svelte 본체에는 컴포넌트 안에서 await를 바로 쓰는 실험 기능이 들어왔어요. 리모트 함수와 합치면 마크업에 {#each await getPosts() as post}처럼 쓸 수 있어요. 로딩 중 화면은 <svelte:boundary>의 pending 스니펫이 처리하고요. 로딩 상태를 관리하는 코드가 눈에 띄게 줄어들죠.
업계 맥락
“서버 함수를 그냥 호출하기”를 먼저 대중화한 건 React 진영이에요. Next.js App Router, React Server Components, Server Actions가 그 주인공이죠. 강력하지만 서버 컴포넌트와 클라이언트 컴포넌트를 나눠서 생각하는 멘탈 모델이 어렵다는 평도 많아요. Svelte는 서버 컴포넌트라는 개념 없이 컴파일러와 서버 함수 전용 파일로 같은 목표에 다가가요. 길은 서로 다르지만, “서버 호출은 함수처럼, 비동기 렌더링은 자연스럽게”라는 방향으로 모이고 있다는 점이 흥미로워요.
한국 개발자에게 주는 시사점
업그레이드는 순서대로 하는 게 안전해요. 먼저 최신 2.x로 올려서 deprecation 경고를 모두 없애세요. Svelte 4 문법이 남아 있다면 npx sv migrate svelte-5로 룬 문법부터 옮기고, 그다음에 3.0으로 넘어가면 돼요. 2.0 때처럼 자동 마이그레이션 도구가 있는지, 지금 쓰는 어댑터(node, vercel, cloudflare, static 등)의 호환 버전도 꼭 확인하세요.
AI 코딩 도구를 쓴다면 주의할 점이 있어요. 많은 LLM이 예전 Svelte 4 문법으로 학습돼 있어서 옛날 코드를 자주 만들어내거든요. Svelte가 제공하는 LLM용 문서(llms.txt)를 컨텍스트로 넣어주면 결과가 훨씬 나아져요.
국내 채용 시장은 여전히 React 중심이에요. 그래도 사이드 프로젝트나 사내 도구, 작은 팀의 서비스라면 SvelteKit은 적은 코드로 빠르게 결과물을 낼 수 있는 좋은 선택지예요.
마무리
SvelteKit 3은 룬, 리모트 함수, 비동기 렌더링으로 이어진 2.x 시절의 변화를 정리하고 다음 단계로 넘어가는 이정표예요.
여러분은 리모트 함수 같은 “서버 함수 직접 호출” 방식이 기존 API 엔드포인트 방식보다 낫다고 보시나요? 실무에 도입한다면 무엇이 가장 걱정되세요?
🔗 출처: Hacker News