멍멍이코더

https://kit.svelte.dev/docs/page-options 😎 이 글은 공식문서를 번역한 것입니다. 기본적으로 SvelteKit은 먼저 서버에서 모든 구성 요소를 렌더링(또는 사전 렌더링)하고 클라이언트에 HTML로 보낸다. 그런 다음 hydration라고 불리는 프로세스에서 상호작용 할 수 있도록 컴포넌트를 브라우저에서 다시 렌더링 할 것이다. 이러한 이유로 우리는 컴포넌트가 두 위치에서 모두 실행될 수 있는지 확인해야 합니다. 그런 다음 SvelteKit은 후속 탐색을 인계하는 라우터를 초기화 할 것이다. 우리는 +page.ts 혹은 +page.server.ts에서 옵션을 export하여 페이지별로 이것들을 제어할 수 있다. (혹은 +layout.ts, +layout.server.ts ..

https://kit.svelte.dev/docs/load 😎 이 글은 공식문서를 번역한 것입니다. +page.svelte 컴포넌트가 랜더링되기 전에 우리는 일부 데이터가 필요하다. 이것이 바로 load 함수에 정의되어있다. 1. Page data +page.svelte 파일은 동일한 디렉토리에 +page.ts(혹은 +page.js)를 가질 수 있다. +page.ts는 load함수를 export하며, data prop을 통해 페이지에서 사용할 수 있는 값을 반환한다. // src/routes/blog/[slug]/+page.ts import { error } from '@sveltejs/kit'; import type { PageLoad } from './$types'; export const load ..

https://kit.svelte.dev/docs/routing 😎 이 글은 공식문서를 번역한 것입니다. SvelteKit에서는 /src/routes의 하위 디렉토리가 URL의 경로가 된다. src/routes => '/' 경로 src/routes/about => '/about' 경로 src/routes/blog/[slug] => 'blog/1234' 와 같이 파라미터를 갖는 경로 1. +page 💡 +page.svelte +page.svelte 컴포너트는 페이지를 정의한다. 기본적으로 페이지는 초기 요청에 대해 SSR로 이뤄지고, 이후 탐색에 대해서는 CSR을 통해 브라우저에서 랜더링 된다. Hello and welcome to my site! About my site About this site TO..

Svelte Bundler의 역사 Svelte는 Svelte Framework의 공식 번들툴을 Rollup을 사용하였는데 이는 Svelte를 개발한 리치 해리스가 만든 번든툴이 바로 Rollup이었기 때문입니다. 당시 Rollup에서는 HMR을 지원하지 못했는데 이는 매우 강력한 기능이기에 Svelte에도 이러한 HMR이 되기를 바랬고 Svelte는 Rollup을 버리고 Snowpack을 공식 번들툴로 변경하려고 하는 작업을 하게 됩니다. 그렇게 해서 Svelte의 공식 번들툴이 Snowpack으로 변경이 되면서 Svelte도 esbuild의 빠른 속도와 강력한 HMR기능을 손에 얻게 됩니다. 그러나 snowpack은 안정적이지 못했습니다. 웹팩과 연동해서 사용하는 과정에서 다소 버그들이 있었도 webp..