Gridsome에서 마이그레이션

Gridsome은 Vue 및 GraphQL을 기반으로 구축된 오픈 소스 정적 사이트 생성기입니다.

Gridsome과 Astro의 주요 유사점

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

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

Gridsome과 Astro의 주요 차이점

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

Gridsome은 Vue 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 .astro 컴포넌트를 사용하여 구축된 다중 페이지 앱이지만 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS 및 원시 HTML 템플릿도 지원합니다.
SPA로서 Gridsome은 SPA 라우팅을 위해 vue-router를 사용하고 <head>를 관리하기 위해 vue-meta를 사용합니다. Astro에서는 별도의 HTML 페이지를 생성하고 <head> 페이지를 직접 또는 레이아웃 컴포넌트에서 제어합니다.
로컬 파일 데이터: Gridsome은 GraphQL을 사용하여 프로젝트 파일에서 데이터를 검색합니다. Astro는 ESM imports 및 import.meta.glob()를 사용하여 로컬 프로젝트 파일에서 데이터를 가져옵니다. 표준 fetch() API를 사용하여 원격 리소스를 로드할 수도 있습니다. GraphQL은 선택적으로 프로젝트에 추가될 수 있지만 기본적으로 포함되지는 않습니다.

Gridsome에서 Astro로 전환

Gridsome 블로그를 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) 파일을 콘텐츠로 가져오세요.

Gridsome의 프로젝트 구조는 Astro의 프로젝트 구조와 유사하므로 프로젝트의 여러 기존 파일을 새 Astro 프로젝트의 동일한 위치에 복사할 수 있습니다. 그러나 두 프로젝트 구조는 동일하지 않습니다. Astro의 프로젝트 구조를 검토하여 차이점이 무엇인지 확인해 보세요.

Astro는 Gridsome과 다르게 로컬 파일을 쿼리하고 가져오기 때문에 import.meta.glob()을 사용하여 파일을 로드하는 방법을 읽고 로컬 파일 작업 방법을 이해하는 것이 좋습니다.

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