| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
재사용 가능한 탐색 컴포넌트 만들기 |
튜토리얼: 첫 번째 Astro 블로그 구축 — 여러 페이지에서 반복되는 요소를 재사용 가능한 컴포넌트로 교체 |
true |
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "/components/Badge.astro"
이제 Astro 사이트의 여러 페이지에 동일한 HTML이 작성되었으므로 중복된 콘텐츠를 재사용 가능한 Astro 컴포넌트로 교체할 때입니다!
- 컴포넌트에 대한 새 폴더 만들기 - 탐색 링크를 표시하는 Astro 컴포넌트 구축 - 기존 HTML을 재사용 가능한 새로운 탐색 컴포넌트로 교체HTML을 생성하지만 웹 사이트의 새 페이지가 되지 않는 .astro 파일을 보관하려면 프로젝트에 src/components/라는 새 폴더가 필요합니다.
-
모든 페이지의 상단에서 페이지를 탐색하기 위해 링크를 복사하여 새로운 파일인
Navigation.astro에 붙여넣습니다.--- --- <a href="/">Home</a> <a href="/about/">About</a> <a href="/blog/">Blog</a>
:::tip
.astro파일의 프런트매터에 아무것도 없으면 코드 펜스를 작성할 필요가 없습니다. 필요할 때 언제든지 다시 추가할 수 있습니다. :::
```astro title="src/pages/index.astro" ins={2}
---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";
const pageTitle = "Home Page";
---
```
-
그런 다음 아래에서 기존 탐색 HTML 링크 요소를 방금 가져온 새 탐색 컴포넌트로 바꿉니다.
<a href="/">Home</a> <a href="/about/">About</a> <a href="/blog/">Blog</a> <Navigation />
-
브라우저에서 미리보기를 확인하고 정확히 동일하게 보이는지 확인하세요. 그게 바로 여러분이 원하는 것입니다!
여러분의 사이트에는 이전과 동일한 HTML이 포함되어 있습니다. 하지만 이제 이 세 줄의 코드는 <Navigation /> 컴포넌트에서 제공됩니다.
동일한 방법을 사용하여 사이트의 다른 두 페이지 (about.astro 및 blog.astro)에서 <Navigation /> 컴포넌트를 가져와 사용합니다.
잊지 마세요
- 코드 펜스 내부의 컴포넌트 스크립트 상단에 import 문을 추가합니다.
- 기존 코드를 탐색 컴포넌트로 바꿉니다.
:::note 코드를 재구성하지만 페이지가 브라우저에 표시되는 방식이 변경되지 않는 것을 리팩터링이라고 합니다. 페이지 HTML의 일부를 컴포넌트로 대체하며 이 단계에서 여러 번 리팩터링하게 됩니다.
이를 통해 프로젝트 전체에 걸쳐 종종 중복되는 작업 코드를 신속하게 시작할 수 있습니다. 그런 다음 사이트의 외관을 변경하지 않고도 기존 코드의 디자인을 점진적으로 개선할 수 있습니다. :::
-
여러 페이지에 반복되는 요소가 있는 경우 이 작업을 수행할 수 있습니다.
개발 서버 다시 시작 재사용 가능한 컴포넌트를 사용하도록 리팩터링 새 페이지 생성 -
Astro 컴포넌트는
재사용 가능 HTML 조각 위 항목 둘 다! -
Astro 컴포넌트는 다음과 같은 경우 사이트에 자동으로 새 페이지를 생성합니다.
`` 포함 리팩터링 `src/pages/` 안에 `.astro` 파일 존재