Astro 레시피
Astro 프로젝트에 기능을 추가하는 방법에 대한 안내 예시를 확인하세요.
공식 레시피
섹션 제목: 공식 레시피Astro의 공식 레시피는 특정 작업의 실제 예제를 완성하는 과정을 안내하는 간단하고 핵심적인 실습 가이드입니다. 레시피는 단계별 지침을 따라 Astro 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다!
-
Vite 또는 Rollup 플러그인 설치
프로젝트에 Rollup 플러그인을 추가하여 YAML 데이터를 가져오는 방법을 알아보세요.
-
번들 크기 분석
`rollup-plugin-visualizer`를 사용하여 Astro에서 생성된 번들을 분석하는 방법을 알아봅니다.
-
API 라우트를 사용하여 양식 작성
JavaScript를 사용하여 양식 제출을 API 경로로 보내는 방법을 알아보세요.
-
Astro 페이지에서 HTML 양식 작성
HTML 양식을 작성하고 프런트매터에서 제출을 처리하는 방법을 알아보세요.
-
사용자 정의 이미지 컴포넌트 빌드
getImage 함수를 사용하여 미디어 쿼리를 지원하는 사용자 정의 이미지 컴포넌트를 빌드하는 방법을 알아보세요.
-
Astro에서 Bun 사용하기
Astro 사이트에서 Bun을 사용하는 방법을 알아봅니다.
-
Captcha를 사용하여 검증하기
API 경로를 생성하고 클라이언트에서 가져오는 방법을 알아보세요.
-
서버에서 엔드포인트 호출
Astro의 서버에서 엔드포인트를 호출하는 방법을 알아보세요.
-
Docker를 사용하여 Astro 사이트 빌드
Docker를 사용하여 Astro 사이트를 빌드하는 방법을 알아보세요.
-
동적으로 이미지 가져오기
Vite의 import.meta.glob 함수를 사용하여 이미지를 동적으로 가져오는 방법을 알아보세요.
-
외부 링크에 아이콘 추가
Markdown 파일의 외부 링크에 아이콘을 추가하기 위해 rehype 플러그인을 설치하는 방법을 알아보세요.
-
국제화 기능 추가
동적 라우팅 및 콘텐츠 컬렉션을 사용하여 Astro 사이트에 국제화 지원을 추가하세요.
-
개발 툴바 앱 만들기
사이트용 개발 툴바 앱을 만드는 방법을 알아보세요.
-
마지막 수정 시간 추가
Markdown 및 MDX에 마지막 수정 시간을 추가하기 위해 remark 플러그인을 빌드하세요.
-
RSS 피드 추가하기
사용자가 콘텐츠를 구독할 수 있도록 Astro 사이트에 RSS 피드를 추가하기.
-
읽기 시간 추가
마크다운 및 MDX 파일에 읽기 시간을 추가하기 위해 remark 플러그인을 구축합니다.
-
Astro 컴포넌트 간 상태 공유
Nano Stores를 사용하여 Astro 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.
-
스트리밍을 사용하여 페이지 성능 향상
스트리밍을 사용하여 페이지 성능을 향상시키는 방법을 알아보세요.
-
Tailwind Typography를 사용하여 Markdown을 렌더링한 스타일
@tailwind/typography를 사용하여 렌더링된 Markdown의 스타일을 지정하는 방법을 알아보세요.
-
아일랜드 간 상태 공유
Nano Store를 사용하여 프레임워크 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.