astro frontend masters

이것은 Frontend Masters의 Astro 과정에 대한 동반 저장소입니다.

설정

이 저장소의 start 분기에는 몇 가지 추가 자산이 포함되어 있으며 과정의 시작점으로 사용됩니다.

이 과정에서는 Node 버전 18을 사용하는 것이 좋습니다.

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

우리는 무엇을 만들고 있나요?

많은(대부분?) 웹사이트가 따르게 되는 몇 가지 공통 작업 흐름을 사용하는 소규모 비즈니스 사이트입니다.

• 마케팅 랜딩 페이지
  • 히어로 이미지
    • 이미지 처리
  • 카드
    • 주요 제품
  • 뉴스레터 캡처
• 가게
  • 고급 레이아웃(중첩)
  • 공유 상태
    • 솔리드 카트
    • React 항목 버튼(장바구니에 추가)
    • 상태를 공유하는 나노 매장
• 블로그
  • 콘텐츠 컬렉션
    • 가격 인하
  • 동적 경로
  • RSS 피드
• 에 대한
  • 마크다운 페이지
• 404페이지

우리가 다루고 싶은 기능은 무엇입니까?

• 새로운 Astro 사이트 초기화 중
• 지역 발전
• 페이지
  • 지원되는 파일 형식
    • 아스트로
    • 가격 인하
    • HTML
  • 기본 라우팅
  • 모래밭
  • 사용자 정의 404 페이지
• Astro 부품
  • 머리말
  • 슬롯
• 레이아웃
  • 기본 레이아웃
  • 고급 레이아웃
• 데이터를 가져오는 중
  • Astro 및 기타 구성 요소에서 fetch 사용
  • API 데이터 로드
  • 헤드리스 CMS에서 로드
• 스타일링
  • Astro 구성 요소의 스타일링
    • 범위가 지정된 스타일
    • 글로벌 스타일
  • CSS를 위한 Astro의 맛있는 음식
    • class:list
    • define:vars
  • 스타일시트 가져오기
    • 현지의
    • npm 패키지
  • 프레임워크에서:
    • CSS 모듈
• 동적 경로
  • 빌드 시 페이지를 한 번 렌더링하고 싶은 경우
• 쪽수 매기기
• 콘텐츠 컬렉션
  • 기본 설정 및 구성
    • 스키마 정의
    • 맞춤형 슬러그
  • 컬렉션을 사용하여 페이지 구축
    • 목록 페이지
    • 전체 항목 페이지
• 엔드포인트
  • RSS
  • 아피스
    • 공전
• SSR 모드
  • 동적 라우팅
  • 모든 요청에 ​​대해 페이지를 렌더링하려는 경우
  • API 엔드포인트
• 이미지 처리
  • assets 디렉토리
• JS 구성 요소 수화
  • client:* 지시어
  • 여러 프레임워크 사용
  • 섬 간 상태 공유
  • 프레임워크 간 상태 공유