SvelteKit의 새로운 원격 함수 기능 소개
이 영상은 SvelteKit에 새롭게 추가된 실험적인 원격 함수 기능에 대해 소개하고, 이 기능이 SvelteKit 개발 방식을 어떻게 변화시킬지에 대해 설명합니다.
주요 내용
원격 함수란?
- TRPC와 유사하게, SvelteKit 내에서 타입 안전성을 갖춘 RPC(Remote Procedure Call) 스타일의 함수를 정의할 수 있는 기능입니다. [0:31]
- 쿼리(Query): GET 요청과 유사하며, 서버에서 데이터를 가져오는 데 사용됩니다. [0:40]
- 폼(Form): Form Action을 대체하며, POST 요청과 유사하게 폼 데이터를 처리합니다. [1:01]
- 커맨드(Command): 일반적인 POST 요청과 유사하며, 특정 폼에 종속되지 않는 서버 데이터 조작에 사용됩니다. [1:16]
- 사전 렌더링(Pre-render): 빌드 시점에 데이터를 미리 렌더링하여 정적 콘텐츠를 제공합니다. [1:29]
쿼리 (Queries)
- 서버에서 비동기 함수로 정의하고 클라이언트에서
await를 사용하여 호출할 수 있습니다. [1:32] - React Query와 유사한 상태 관리 기능을 제공하여
error,loading,data등의 상태를 쉽게 관리할 수 있습니다. [1:57] - 인자(arguments)를 받을 수 있으며,
valibot이나zod와 같은 라이브러리를 사용하여 강력한 런타임 유효성 검사를 적용할 수 있습니다. [2:35] -
getPost.refresh()를 통해 캐시된 쿼리 데이터를 쉽게 새로고침할 수 있습니다. [4:08]
- 서버에서 비동기 함수로 정의하고 클라이언트에서
폼 (Forms)
- 기존 SvelteKit의 Form Actions를 대체하며, 타입 안전성이 향상되었습니다. [5:10]
- 단일 요청으로 서버에서 데이터를 변경하고 클라이언트에 즉시 반영하는 싱글 플라이트 뮤테이션(Single Flight Mutations)을 지원합니다. [5:41]
- 폼 제출 후
createPost.results를 통해 반환된 데이터를 타입 안전하게 사용할 수 있습니다. [6:43] - 기존 Form Actions의 점진적 향상(Progressive Enhancement) 기능도 유지되어, JavaScript 없이도 기본적인 동작이 가능합니다. [7:14]
커맨드 (Commands)
- 특정 폼에 국한되지 않는 일반적인 POST 요청과 같은 기능을 수행합니다. [7:44]
-
delete버튼이나 설정 변경과 같이 다양한 시나리오에 유용합니다. [7:44] - 클라이언트에서 함수처럼 호출하며, SvelteKit의 전반적인 함수 중심 개발 철학과 잘 맞습니다. [8:14]
- 주의: 쿠키(cookies)는 커맨드 또는 폼 액션에서만 설정할 수 있습니다. [10:48]
사전 렌더링 (Pre-render)
- 블로그 게시물과 같이 빌드 시점에 정적 콘텐츠를 미리 생성하는 데 사용됩니다. [12:21]
- CDN에서 JSON 데이터를 가져오는 방식으로 동작하며, 동적 데이터에는 적합하지 않습니다.
기타 특징
-
getRequestEvent를 통해 요청 이벤트 객체에 접근할 수 있습니다. [10:17] - 리다이렉트(redirects)는 쿼리, 폼, 사전 렌더링에서 지원되지만, 커맨드에서는 지원되지 않습니다. [12:51]
- 실험적인 기능이므로 프로덕션 환경에서는 아직 사용에 주의가 필요합니다. [13:10]
-
핵심 takeaways
- 함수 중심 개발: SvelteKit의 원격 함수는 클라이언트와 서버 간의 통신을 마치 함수 호출처럼 단순화하여 개발자의 사고방식과 일치시킵니다. [8:14, 15:10]
- 타입 안전성: 쿼리, 폼, 커맨드 전반에 걸쳐 강력한 타입 안전성을 제공하여 버그를 줄이고 개발 생산성을 높입니다. [0:31]
- 개선된 경험: 이전의 Form Actions의 불편함을 해소하고, React Query와 유사한 편리한 상태 관리 기능을 제공하여 개발 경험을 크게 향상시킵니다. [5:10, 1:57]
- Svelte의 발전 방향: SvelteKit이 웹 개발을 위한 강력한 프레임워크로 발전하고 있으며, 클라이언트-서버 통신 문제를 효과적으로 해결하고 있음을 보여줍니다. [13:21]
이 새로운 기능들은 SvelteKit을 더욱 강력하고 사용하기 쉬운 풀스택 프레임워크로 만들어 줄 것으로 기대됩니다.