Learn SvelteKit Remote Functions Tutorial
- SvelteKit의 원격 함수는 실험적인 기능으로, tRPC와 유사하게 클라이언트에서 서버 함수를 일반 함수처럼 호출할 수 있게 하여 데이터 작업을 간소화합니다. ↔️
- 이 기능은
+page.server.ts 파일이나 폼 액션 없이도 데이터 로딩 및 변경을 처리할 수 있게 하여 개발 경험을 크게 향상시킵니다. ✨
- 원격 함수를 사용하려면
svelte.config.js에서 compilerOptions.async: true와 SvelteKit 설정에서 remoteFunctions: true를 활성화해야 합니다. ⚙️
- 주요 원격 함수 유형으로는 동적 데이터 읽기를 위한
query, 폼 처리 및 유효성 검사를 위한 form, 간단한 데이터 쓰기를 위한 command, 그리고 사전 렌더링을 위한 pre-render가 있습니다. 🛠️
query.batch를 사용하여 N+1 문제를 해결하고 여러 요청을 단일 요청으로 묶을 수 있습니다. 📦
form 함수는 Zod, Valibot 등 표준 스키마 라이브러리를 통한 유효성 검사를 내장하여 폼 데이터 처리를 간소화하며, JavaScript 비활성화 시에도 작동하는 점진적 향상을 제공합니다. ✅
getRequestEvent를 사용하여 원격 함수 내에서 요청 객체(예: locals의 사용자 세션 정보)에 접근할 수 있어, 인증/인가 로직을 쉽게 구현하고 재사용 가능한 인증 가드를 만들 수 있습니다. 🔒
- 원격 함수 파일은 반드시
.remote.ts 또는 .remote.js로 끝나야 하며, 라우트, 컴포넌트 옆 또는 lib/api와 같은 원하는 어느 곳에나 배치할 수 있습니다. 📁
- 예제에서는 Drizzle ORM, Better Stack 인증, SQLite를 사용하여 실제 애플리케이션 환경에서의 활용법을 보여줍니다. 🚀