활용 레시피

Astro 프로젝트에 기능을 추가하는 방법에 대한 안내 예시를 확인하세요.

공식 레시피

섹션 제목: 공식 레시피

Astro의 공식 레시피는 특정 작업의 실제 예제를 완성하는 과정을 안내하는 간단하고 핵심적인 실습 가이드입니다. 레시피는 단계별 지침을 따라 Astro 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다!

• Vite 또는 Rollup 플러그인 설치

  프로젝트에 Rollup 플러그인을 추가하여 YAML 데이터를 가져오는 방법을 알아보세요.

• 번들 크기 분석

  `rollup-plugin-visualizer`를 사용하여 Astro에서 생성된 번들을 분석하는 방법을 알아봅니다.

• 사용자 정의 이미지 컴포넌트 빌드

  getImage 함수를 사용하여 미디어 쿼리를 지원하는 사용자 정의 이미지 컴포넌트를 빌드하는 방법을 알아보세요.

• API 경로를 사용하여 양식 작성

  JavaScript를 사용하여 양식 제출을 API 경로로 보내는 방법을 알아보세요.

• Astro 페이지에서 HTML 양식 작성

  HTML 양식을 작성하고 프런트매터에서 제출을 처리하는 방법을 알아보세요.

• Astro에서 Bun 사용하기

  Astro 사이트에서 Bun을 사용하는 방법을 알아봅니다.

• 서버에서 엔드포인트 호출

  Astro의 서버에서 엔드포인트를 호출하는 방법을 알아보세요.

• Captcha를 사용하여 검증하기

  API 경로를 생성하고 클라이언트에서 가져오는 방법을 알아보세요.

• Docker를 사용하여 Astro 사이트 빌드

  Docker를 사용하여 Astro 사이트를 빌드하는 방법을 알아보세요.

• 동적으로 이미지 가져오기

  Vite의 import.meta.glob 함수를 사용하여 이미지를 동적으로 가져오는 방법을 알아보세요.

• 외부 링크에 아이콘 추가

  Markdown 파일의 외부 링크에 아이콘을 추가하기 위해 rehype 플러그인을 설치하는 방법을 알아보세요.

• 국제화 기능 추가

  동적 라우팅 및 콘텐츠 컬렉션을 사용하여 Astro 사이트에 국제화 지원을 추가하세요.

• 개발 툴바 앱 만들기

  사이트용 개발 툴바 앱을 만드는 방법을 알아보세요.

• 마지막 수정 시간 추가

  Markdown 및 MDX에 마지막 수정 시간을 추가하기 위해 remark 플러그인을 빌드하세요.

• 읽기 시간 추가

  마크다운 및 MDX 파일에 읽기 시간을 추가하기 위해 remark 플러그인을 구축합니다.

• RSS 피드 추가하기

  사용자가 콘텐츠를 구독할 수 있도록 Astro 사이트에 RSS 피드를 추가하기.

• 아일랜드 간 상태 공유

  Nano Store를 사용하여 프레임워크 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.

• Astro 컴포넌트 간 상태 공유

  Nano Stores를 사용하여 Astro 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.

• 스트리밍을 사용하여 페이지 성능 향상

  스트리밍을 사용하여 페이지 성능을 향상시키는 방법을 알아보세요.

• Tailwind Typography를 사용하여 Markdown을 렌더링한 스타일

  @tailwind/typography를 사용하여 렌더링된 Markdown의 스타일을 지정하는 방법을 알아보세요.

• Astro Tips