Astro 레시피

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

공식 레시피

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

• Vite 또는 Rollup 플러그인 설치

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

• 번들 크기 분석

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

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

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

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

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

• API 라우트를 사용하여 양식 작성

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

• Astro에서 Bun 사용하기

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

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

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

• Captcha를 사용하여 검증하기

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

• 빌드 출력의 파일 이름 사용자 정의하기

  Vite의 Rollup 옵션을 사용하여 Astro 프로젝트의 JavaScript, CSS, 이미지와 같은 빌드된 자산의 명명 패턴을 변경하는 방법을 알아보세요.

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

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

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

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

• 외부 링크에 아이콘 추가

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

• 국제화 기능 추가

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

• 개발 툴바 앱 만들기

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

• 마지막 수정 시간 추가

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

• 읽기 시간 추가

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

• RSS 피드 추가하기

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

• Astro 컴포넌트 간 상태 공유

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

• 아일랜드 간 상태 공유

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

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

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

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

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

커뮤니티 리소스

Astro Tips에서 커뮤니티에서 작성하고 제출한 더 많은 레시피를 확인하세요.