튜토리얼 - View Transitions로 확장
View transitions는 방문자가 사이트의 페이지를 탐색할 때 발생하는 상황을 제어하는 방법입니다. Astro의 View Transitions API를 사용하면 부드러운 페이지 전환 및 애니메이션, 방문 페이지 기록 스택 제어, 표시된 콘텐츠를 업데이트하는 동안 일부 페이지 요소 및 상태를 유지하기 위한 전체 페이지 새로 고침 방지 등 선택적 탐색 기능을 추가할 수 있습니다.
요구 사항
<ViewTransitions />
라우터를 가져와 공통head
요소에 추가합니다.- 필요할 때
<script>
를 트리거하기 위해 탐색 프로세스 중 이벤트 리스너를 추가합니다. - 전환 지시어를 사용하여 페이지 전환 애니메이션을 추가합니다.
- 개별 페이지 링크에 대한 클라이언트 측 라우팅을 선택 해제합니다.
필요 조건
섹션 제목: 필요 조건공통 기본 레이아웃 또는 <Head />
컴포넌트가 있는 기존 Astro 프로젝트가 필요합니다.
이 튜토리얼에서는 블로그 만들기 튜토리얼의 완성된 프로젝트를 사용하여 기존 Astro 프로젝트에 view transitions (클라이언트 측 라우팅)를 추가하는 방법을 보여줍니다. 해당 코드베이스를 로컬에 포크하여 사용하거나 StackBlitz에서 블로그 튜토리얼 코드를 편집하여 브라우저에서 튜토리얼을 완료할 수 있습니다.
대신 자신의 Astro 프로젝트에서 이 단계를 수행할 수 있지만 코드베이스에 대한 지침을 조정해야 합니다.
먼저 이 짧은 튜토리얼을 완료하려면 샘플 프로젝트를 사용하는 것이 좋습니다. 그런 다음 배운 내용을 사용하여 자신의 프로젝트에서 view transitions를 만들 수 있습니다.
블로그 튜토리얼 코드 구축
섹션 제목: 블로그 튜토리얼 코드 구축블로그 만들기 개요 튜토리얼에서 Astro의 내장된 파일 기반 라우팅에 대해 배웠습니다. src/pages/
폴더 내 모든 .astro
, .md
, .mdx
파일은 자동으로 사이트의 새 페이지가 됩니다.
이러한 페이지들을 탐색하기 위해 표준 HTML <a>
요소를 사용했습니다. 예를 들어, 소개 페이지에 대한 링크를 만들기 위해, 페이지 헤더에 <a href="/about/">소개</a>
를 추가했습니다. 여러분의 사이트 방문자가 해당 링크를 클릭하면 브라우저가 새로 고쳐지고 완전히 새로운 콘텐츠가 포함된 새 페이지가 로드됩니다.
전체 페이지 탐색 vs 클라이언트 측 라우팅 (SPA 모드)
섹션 제목: 전체 페이지 탐색 vs 클라이언트 측 라우팅 (SPA 모드)브라우저가 새로 고쳐지고 새 페이지를 로드하면 이전 페이지와 새 페이지 사이에 연속성이 없습니다. 클라이언트 측 라우팅을 사용하면 브라우저의 전체 페이지 새로고침 없이 새로운 페이지가 표시됩니다.
클라이언트 측 라우팅은 전체 사이트 또는 앱이 방문자의 상호 작용에 따라 콘텐츠가 업데이트되는 JavaScript인 “한 페이지”로 구성된 단일 페이지 애플리케이션(SPA) 사이트의 기능입니다.
각각의 새 페이지에는 전체 브라우저 새로 고침이 필요하지 않으므로 클라이언트 측 라우팅을 사용하면 여러 가지 방법으로 페이지 전환을 제어할 수 있습니다. 공통 페이지 헤더와 같은 영구적 요소는 화면에 다시 렌더링될 필요가 없습니다. 한 페이지에서 다른 페이지로의 전환이 훨씬 더 부드럽게 나타날 수 있습니다. 그리고 상태를 보존하여 한 페이지에서 다음 페이지로 값을 전송할 수 있으며 방문자가 페이지를 탐색할 때 비디오를 계속 재생할 수도 있습니다!
전체 페이지 브라우저 새로 고침을 원하거나 필요한 경우가 있습니다. 예를 들어 링크를 통해 방문자가 .pdf
문서로 이동하는 경우, 서버에서 해당 새 페이지를 로드하려면 브라우저가 필요합니다. Astro 프로젝트에서 view transitions가 활성화된 경우에도 브라우저가 전체 링크 및 각 링크별로 탐색하는 방법을 지정할 수 있으며 클라이언트 측 라우팅을 완전히 선택 해제할 수도 있습니다.
안내서에서 Astro의 view transitions에 대해 읽어보거나 아래 지침에 따라 기본 블로그를 src/pages/posts/
에서 src/content/posts/
로 변환해 보세요.
여러분의 지식을 테스트해보세요
섹션 제목: 여러분의 지식을 테스트해보세요-
내 Astro 사이트에 view transitions를 추가하는 것은…
-
Astro의 view transitions의 이점이 아닌 것은 무엇입니까?
-
view transitions 라우터는…
View transitions로 블로그 튜토리얼 확장
섹션 제목: View transitions로 블로그 튜토리얼 확장아래 단계에서는 페이지 전환을 향상시키기 위해 클라이언트 측 라우팅을 추가하여 블로그 만들기 튜토리얼의 최종 제품을 확장하는 방법을 보여줍니다.
종속성 업그레이드
섹션 제목: 종속성 업그레이드-
Astro를 최신 버전으로 업그레이드하고 터미널에서 다음 명령을 실행하여 모든 통합을 최신 버전으로 업그레이드하세요.
자신의 프로젝트를 사용하는 경우, 설치한 모든 종속성을 업데이트해야 합니다. 예시 블로그 튜토리얼의 코드베이스는 Preact 통합만 사용합니다.
<ViewTransitions />
라우터 추가
섹션 제목: <ViewTransitions /> 라우터 추가-
<ViewTransitions />
컴포넌트를 가져와서 페이지 레이아웃의<head>
에 추가합니다.블로그 튜토리얼 예시에서
<head>
요소는src/layouts/BaseLayout.astro
에 있습니다. 먼저ViewTransitions
라우터를 컴포넌트의 프런트매터로 가져와야 합니다. 그런 다음<head>
요소 안에 라우팅 컴포넌트를 추가합니다.