커뮤니티 교육 콘텐츠

Astro로 배우고 구축하는 데 도움이 될 수 있는 것들이 훨씬 더 많이 있습니다! Astro 커뮤니티에서 제작하고 유지 관리하는 교육 콘텐츠는 다음과 같습니다.

모든 링크는 외부 링크이며 Astro의 이전 버전을 기반으로 할 수 있습니다. 커뮤니티 콘텐츠의 날짜를 확인하고 이에 따라 프로젝트에 맞게 조정하세요.

더 많은 Astro 교육 콘텐츠를 보려면 Astro 블로그를 확인하거나 공식 Astro 뉴스레터에 가입하세요. 매달 최고의 커뮤니티 콘텐츠를 요약해 보세요.

강좌 및 튜토리얼

섹션 제목: 강좌 및 튜토리얼

강좌와 튜토리얼은 새로운 개념을 가르치는 데 중점을 두고 있으며, 종종 연습이나 구축할 샘플 프로젝트를 포함합니다. 이는 새로운 개념을 배우고 자신만의 Astro 프로젝트를 작업하는 데 필요한 도구를 제공하는 좋은 방법입니다.

Astro에 대해 자세히 알아보려면 다음 강좌와 튜토리얼을 확인하세요.

입문 튜토리얼

섹션 제목: 입문 튜토리얼

• Astro 웹 프레임워크 집중 강좌 - freeCodeCamp
• 20분 만에 진행되는 Astro 집중 강좌 - Chris Pennington (전체 유료 과정: Astro 알아보기)
• Astro 3.0 집중 강좌 - James Q Quick (전체 유료 과정: Astro로 현대적인 웹사이트 구축)
• 60분 만에 진행되는 Astro 집중 강좌 - @developedbyed
• Astro의 이해 (ebook) - Ohans Emmanuel
• 처음부터 Astro 3 배우기: 초보자를 위한 코스 + Astro 애플리케이션 (스페인어) - @midudev
• Astro 웹 프레임워크 소개 - Udemy의 Tech Razor (유료 강의)

동영상 튜토리얼

섹션 제목: 동영상 튜토리얼

• Astro 빠른 시작 과정: SSR 블로그 구축
• Astro 3.x로 영화 애플리케이션을 만드는 방법
• 여러분은 콘텐츠 컬렉션을 실제로 이해하지 못했을 수도 있습니다…
• Astro 및 Apprwrite를 사용하여 맞춤형 블로그 플랫폼 구축
• Astro JS 포트폴리오 집중 강좌
• Astro로 풀 스택 블로그 구축

레시피 및 가이드

섹션 제목: 레시피 및 가이드

Astro 프로젝트에 기능을 추가하는 예시를 확인하세요.

공식 레시피

섹션 제목: 공식 레시피

Astro의 공식 레시피는 특정 작업의 실제 예시를 완료하는 과정을 독자에게 안내하는 짧은 집중 가이드입니다. 레시피는 단계별 지침을 따라 Astro 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다!

• Vite 또는 Rollup 플러그인 설치

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

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

  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 플러그인을 구축합니다.

• 아일랜드 간 상태 공유

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

• Astro 컴포넌트 간 상태 공유

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

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

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

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

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

직접 추가하세요!

Astro와 함께 동작하는 레시피나 가이드를 게시하셨나요? 이 페이지를 편집하여 아래 섹션에 링크를 추가하세요!

CSS

섹션 제목: CSS

• Astro에서 UnoCSS 사용
• Tailwind CSS를 사용하여 Astro에 다크 모드 추가

인증

섹션 제목: 인증

• Lucia로 Github OAuth 추가
• Lucia로 사용자 이름 및 비밀번호 인증 추가
• Clerk 및 React를 사용한 Astro 사용자 인증

RSS

섹션 제목: RSS

• 이미지를 가져올 때 동적 파일 이름을 사용하세요
• Storyblok의 스토리를 사용하여 Astro에 RSS 피드 추가
• RSS 피드에 데이터를 보내는 방법은 무엇입니까? Astro + RSS 가이드
• Astro에서 RSS 피드 콘텐츠 추가 및 Markdown 이미지 경로 수정

이미지

섹션 제목: 이미지

• Astro RSS 피드에 블로그 게시물 이미지 추가
• Astro 블로그용 Open Graph 이미지 생성

편집기 도구

섹션 제목: 편집기 도구

• Astro와 함께 작동하는 VSCode, ESLint, Prettier 가져오기
• Astro 및 Tailwind CSS와 Prettier 통합

Markdown

섹션 제목: Markdown

• Astro의 Markdown 제목으로 목차 작성
• Markdown 파일에서 런트를 제거하는 Remark 플러그인 만들기
• 구성 기반 콘텐츠 작성을 통해 Astro에서 효과적으로 초안 페이지 설정

성능

섹션 제목: 성능

• Astro 빌드 향상: 빌드 후 HTML 파일 수정
• Astro로 마이크로 프런트엔드 설정
• Astro에서 ISR (증분적 정적 재생성)을 구현하는 방법

유틸리티

섹션 제목: 유틸리티

• Astro에서 tRPC 사용
• Sentry를 Astro와 통합
• Astro 및 Storyblok 프로젝트를 위한 현지화된 사이트맵 생성
• Pagefind로 사이트에 검색 기능 추가
• Fuse.js를 사용하여 사이트에 검색 기능 추가
• Giscus를 사용하여 Astro 블로그에 댓글 섹션 추가

애니메이션

섹션 제목: 애니메이션

• Astro에서 GreenSock 애니메이션 플랫폼 (GSAP) 사용
• Astro에서 View Transitions와 함께 GreenSock 애니메이션 플랫폼 (GSAP) 사용
• Astro에서 Animate On Scroll (AOS) 사용 : 단계별 가이드

국제화 및 현지화

섹션 제목: 국제화 및 현지화

• Crowdin을 사용하여 Astro 웹사이트를 다국어로 만드는 방법: Astro 현지화 가이드
• 콘텐츠 컬렉션 및 하위 페이지에 대한 Astro의 경로 번역

Astro DB

섹션 제목: Astro DB

• Astro DB로 방명록 생성하기
• Astro DB로 조회수 카운터를 구축하는 방법