커뮤니티 교육 콘텐츠
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로 풀 스택 블로그 구축
- (ES) 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의 스타일을 지정하는 방법을 알아보세요.
CSS
섹션 제목: CSSRSS
섹션 제목: RSS- 이미지를 가져올 때 동적 파일 이름을 사용하세요
- Storyblok의 스토리를 사용하여 Astro에 RSS 피드 추가
- RSS 피드에 데이터를 보내는 방법은 무엇입니까? Astro + RSS 가이드
- Astro에서 RSS 피드 콘텐츠 추가 및 Markdown 이미지 경로 수정
이미지
섹션 제목: 이미지편집기 도구
섹션 제목: 편집기 도구Markdown
섹션 제목: Markdown- Astro의 Markdown 제목으로 목차 작성
- Markdown 파일에서 런트를 제거하는 Remark 플러그인 만들기
- 구성 기반 콘텐츠 작성을 통해 Astro에서 효과적으로 초안 페이지 설정
유틸리티
섹션 제목: 유틸리티- Astro에서 tRPC 사용
- Sentry를 Astro와 통합
- Astro 및 Storyblok 프로젝트를 위한 현지화된 사이트맵 생성
- Pagefind로 사이트에 검색 기능 추가
- Fuse.js를 사용하여 사이트에 검색 기능 추가
- Giscus를 사용하여 Astro 블로그에 댓글 섹션 추가
- Astro를 사용하여 페이지네이션 컴포넌트 만들기
애니메이션
섹션 제목: 애니메이션- Astro에서 GreenSock 애니메이션 플랫폼 (GSAP) 사용
- Astro에서 View Transitions와 함께 GreenSock 애니메이션 플랫폼 (GSAP) 사용
- Astro에서 Animate On Scroll (AOS) 사용 : 단계별 가이드