SvelteKit에서 마이그레이션

SvelteKit은 Svelte 위에 웹 애플리케이션을 구축하기 위한 프레임워크입니다.

SvelteKit과 Astro의 주요 유사점

SvelteKit과 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

SvelteKit과 Astro는 모두 최신 JavaScript 정적 사이트 생성기이자 서버 측 렌더링 프레임워크입니다.
SvelteKit과 Astro는 모두 프로젝트 파일용으로 src/ 폴더를 사용하고 파일 기반 라우팅용 특수 폴더를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.
Astro는 Svelte 컴포넌트 사용을 위한 공식 통합을 갖추고 있으며 Svelte용 여러 가지를 포함하여 NPM 패키지 설치를 지원합니다. Svelte UI 컴포넌트를 작성할 수 있으며 기존 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수 있습니다.
Astro와 SvelteKit 모두 데이터용 헤드리스 CMS, API 또는 Markdown 파일을 사용할 수 있습니다. 선호하는 콘텐츠 작성 시스템을 계속 사용할 수 있으며 기존 콘텐츠를 유지할 수 있습니다.

SvelteKit과 Astro의 주요 차이점

Astro에서 SvelteKit 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다.

Astro 사이트는 다중 페이지 앱인 반면 SvelteKit은 기본적으로 서버 측 렌더링을 사용하는 SPA (단일 페이지 애플리케이션)이지만 MPA 또는 전통적인 SPA를 생성할 수도 있고 앱 내에서 이러한 기술을 혼합하여 일치시킬 수도 있습니다.
컴포넌트: SvelteKit은 Svelte를 사용합니다. Astro 페이지는 .astro 컴포넌트를 사용하여 구축되었지만 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS 및 원시 HTML 템플릿도 지원할 수 있습니다.
콘텐츠 중심: Astro는 콘텐츠를 선보이고 필요할 때만 상호 작용할 수 있도록 설계되었습니다. 기존 SvelteKit 앱은 높은 클라이언트 측 상호 작용을 위해 구축될 수 있습니다. Astro에는 페이지 생성과 같은 콘텐츠 작업을 위한 기능이 내장되어 있지만 .astro 컴포넌트를 사용하여 복제하기가 더 어려운 대시보드와 같은 항목을 포함하려면 고급 Astro 기술이 필요할 수 있습니다.
Markdown 지원: Astro에는 내장 Markdown 지원이 포함되어 있으며 특별한 프런트매터 YAML layout 속성은 페이지 템플릿 작성에 파일별로 사용됩니다. SvelteKit Markdown 기반 블로그를 변환하는 경우 별도의 Markdown 통합을 설치할 필요가 없으며 구성 파일을 통해 레이아웃을 설정하지 않습니다. 기존 Markdown 파일을 가져올 수 있지만 Astro의 파일 기반 라우팅에는 각 페이지 경로에 대한 폴더가 필요하지 않으므로 재구성이 필요할 수 있습니다.

SvelteKit에서 Astro로 전환

SvelteKit 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 테마 쇼케이스에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 --template 인수를 create astro 명령에 전달할 수 있습니다. 또는 GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작할 수 있습니다.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Markdown 또는 MDX 페이지를 생성하기 위해 기존 Markdown (또는 선택적 통합이 포함된 MDX) 파일을 콘텐츠로 가져오세요.

파일 기반 라우팅 및 레이아웃 컴포넌트는 Astro와 유사하지만 파일 위치를 알아보려면 Astro의 프로젝트 구조를 읽어보세요.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 astro.new에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 IDX, StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.