홈페이지>ASP 소스 코드>기타 카테고리
다운로드

Understanding Astro


Astro 이해에 오신 것을 환영합니다!

이 책은 속도를 위해 설계된 차세대 웹 프레임워크인 Astro에 대한 궁극적인 가이드입니다.

Astro를 이해하는 것은 Astro를 파고들고 그 결과를 실용적이고 이해하기 쉬운 방식으로 전달하는 데 몇 달을 보낸 결과입니다.

Astro를 이해하고 싶다면 올바른 출처를 찾아오셨습니다.

다른 프레임워크만 배우지 마세요. 그것을 이해하십시오.

eBook을 다운로드하고 싶습니다.

목차

다음은 Astro를 이해하기 위한 자세한 목차이다.


소개

소개

  • 불쾌해하지 마세요

  • 공식 문서와의 차이점

  • 책이 어떻게 구성되어 있는지

  • 장 개요

  • 전제 조건

  • 표기 규칙


1장: 첫 번째 Astro 애플리케이션 구축

1장: 첫 번째 Astro 애플리케이션 구축

  • 무엇을 배울 것인가

  • 프로젝트 개요

  • 시작하기

    • Node.js 설치

    • 코드 편집기 설정

  • 프로젝트 구조

    • tsconfig.json

    • 패키지.json

    • 패키지-lock.json

    • 천체.config.mjs

    • src/env.d.ts

    • src/페이지/index.astro

  • Astro 페이지 소개

  • Astro 구성요소 분석

  • 구성요소 스타일

  • 페이지 레이아웃

  • 렌더링 구성요소 및 슬롯

  • 구성요소 이름을 대문자로 표기

  • 전역 스타일 지시어

  • 사용자 정의 글꼴 및 전역 CSS

  • 독립적인 Astro 구성 요소

  • 대화형 스크립트 추가

  • 대화형 테마 토글

  • :global() 선택기

  • 이벤트 처리

  • CSS 변수를 통한 테마 지정

  • 전역 클라이언트 개체에 액세스

  • 스크립트의 마법

  • 인라인 스크립트 활용

  • 스크립트의 전역 선택기

  • 마크다운 페이지

  • 페이지 간 탐색

  • 마크다운 레이아웃

  • 레이아웃 구성

  • 구성요소 소품

  • 마크다운 Frontmatter 속성 활용

  • 대화형 탐색 상태

  • 구성요소 구성

  • 데이터의 템플릿 흐름

  • Define:vars의 어두운 면

  • 여러 로컬 파일 로드

  • 정적 Astro 사이트 배포

    • 1. 정적 생산 자산 생성

    • 2. 정적 웹 서버를 통해 정적 자산 제공

    • 수동 배포 문제

    • 정적 웹사이트 배포 자동화

  • Astro 웹사이트는 얼마나 빠른가요?

  • 결론


2장: Astro 구성 요소 심층 분석

  • 2장: Astro 구성 요소 심층 분석

  • 무엇을 배울 것인가

  • 소개

  • Astro의 중추

    • 자바스크립트 런타임 피로

    • 런타임 버리기

  • Astro 구성요소란 무엇입니까?

    • 1. 스타일은 기본적으로 로컬입니다.

    • 2. HTML 요소는 항상 존재합니다

    • 3. 스타일과 스크립트가 호이스팅됩니다.

    • 4. <head> 요소와 그 하위 요소는 호이스팅되지 않습니다.

    • astro 구성 요소는 유효한 HTML을 렌더링할 수 있는 .astro 파일입니다.

    • Astro 구성 요소를 구성하여 복잡한 페이지를 만들 수 있습니다.

  • Astro 구성 요소는 강력한 템플릿 구문을 활용할 수 있습니다.

    • 소비 변수
    • 동적 속성 생성
    • 동적 HTML
    • 동적 태그
    • 슬롯 재방문
    • JSX가 아닙니다.
    • 1. 변수 생성 또는 참조
    • 2. 수입품 취급
    • 3. 데이터 가져오기

    • 구성요소 스크립트

    • 구성요소 템플릿

  • 결론


3장: 나만의 컴포넌트 아일랜드 만들기

  • 3장: 나만의 구성 요소 섬 만들기

  • 무엇을 배울 것인가

  • 우리가 여기까지 어떻게 왔는지에 대한 간략한 역사

    • 부분 수분 공급의 장점

    • 부분 수분 공급의 단점

    • 클라이언트 측 하이드레이션을 사용한 서버 측 렌더링의 장점

    • 클라이언트 측 하이드레이션을 사용한 서버 측 렌더링의 단점

    • 서버사이드 렌더링의 장점

    • 서버사이드 렌더링의 단점

    • 클라이언트측 렌더링(CSR)의 장점

    • 클라이언트 측 렌더링의 단점

    • 모든 것이 시작되는 곳

    • 클라이언트측 렌더링(CSR)

    • 서버 측 렌더링

    • 클라이언트 측 하이드레이션을 사용한 서버 측 렌더링

    • 승리를 위한 부분적인 수분 공급

    • 섬 건축물은 어디에서 왔습니까?

  • 부분 수화섬 아키텍처 구현

    • 뷰

    • 쁘띠뷰

    • 프리액트

    • 클라이언트:유휴 및 클라이언트:미디어 조건 지원

    • 대기 유휴

    • waitForMedia

    • 목표

    • 설치

    • API 디자인

    • 시작하기

    • 콘텐츠 템플릿 요소 활용

    • "client:" 속성을 통해 게으른 수화 처리

    • 지원 프레임워크: Vue, Petite-vue 및 Preact

  • 결론



전자책을 다운로드하고 싶으신가요? 여기를 클릭하세요



4장: 나만의 컴포넌트 아일랜드 구축

  • 4장: 천체섬의 비밀스러운 삶

  • 무엇을 배울 것인가

  • Astro에서 섬이 작동하는 방식

    • 버그가 아닙니다. 특징입니다.

    • 1단계: Astro 사이트 구축

    • 2단계: 프레임워크 통합 설치

    • 3단계: 구성요소 프레임워크 작성

    • 4단계: 구성요소 프레임워크 렌더링

  • 책임 있는 수분 공급

    • 클라이언트:로드

    • 클라이언트:만

    • 클라이언트:표시

    • 클라이언트:미디어

    • 클라이언트:유휴

  • 여러 프레임워크 사용

    • Vue의 찬성 카운터

    • 다양한 프레임워크 구성요소 렌더링

  • 구성요소 아일랜드 간 상태 공유

    • 나노 스토어의 작동 방식

    • 나노스토어 설치

    • 상태 값 생성

    • 프레임워크 구성 요소에서 상태 값 사용

  • 소품과 자식을 프레임워크 구성 요소에 전달

  • 중첩된 프레임워크 구성요소

  • 아스트로 아일랜드 문제

    • 1. 프레임워크 구성 요소에 Astro 구성 요소를 사용하지 마세요.

    • 2. Astro 성분을 수화시키지 마십시오

  • 왜 섬인가?

    • 1. 성능

    • 2. 책임 있는 수분 공급

    • 3. 병렬 로딩

  • 결론


아, 리액트! (React 문서 사이트 복제)

  • 5장: 오, 리액트! (React 문서 사이트 복제)

  • 무엇을 배울 것인가

  • 시작 프로젝트 설정

  • 종속성 설치

  • Tailwind를 사용하여 Astro 프로젝트 스타일링하기

    • Tailwind 설치

    • Tailwind는 어떻게 작동하나요?

    • 순풍 구성

  • Typescript 가져오기 별칭

  • 아일랜드 및 같은 위치에 있는 페이지 구성 요소

  • 구문 강조

    • 장점

    • 단점

    • 장점

    • 단점

    • 기본 코드 구성요소

    • 테마 가져오기

    • 밝은 테마와 어두운 테마 처리

  • 콘텐츠 컬렉션 시작하기

    • 퀵 조드

    • .astro 폴더

    • 콘텐츠 컬렉션은 어떤 문제를 해결합니까?

    • 콘텐츠 컬렉션 구성

    • MDX를 사용하여 콘텐츠 작성

    • 콘텐츠 컬렉션 구성

  • 콘텐츠 컬렉션 쿼리 및 렌더링

  • 동적 라우팅

    • 1. 명명된 매개변수

    • 2. 나머지 매개변수

    • 우선순위

  • 콘텐츠 컬렉션으로 경로 생성

    • 각 블로그 콘텐츠 렌더링

  • MDX 구성 요소

    • 사용자 정의된 HTML 요소

    • 내부 구성 요소

    • 외부 수입

    • 자동 가져오기

  • 통합 스포트라이트: Astro SEO

  • Astro의 사용자 정의 404 페이지

  • 결론


6장: Astro의 서버사이드 렌더링(SSR)

  • 6장: Astro의 서버사이드 렌더링(SSR)

  • 무엇을 배울 것인가

  • SSR은 언제 필요합니까?

  • SSR을 활성화하는 방법

  • SSR 프로젝트 배포

  • 올바른 어댑터를 사용하세요

  • 정적 페이지가 있는 SSR

  • 요청에서 응답까지

    • 요청 객체

    • 응답 객체

    • 응답 리디렉션

    • 쿠키 조작을 위한 유틸리티

    • 요청 IP 주소

  • 환경 변수

    • 환경 변수 검색

    • 기본 환경 변수

    • 환경 변수 만들기

    • 타이프스크립트 IntelliSense

  • 동적 경로

    • 1. 명명된 매개변수

    • 2. 나머지 매개변수

    • 우선순위

  • 서버 엔드포인트

    • 서버 엔드포인트 생성

    • 요청 세부정보

    • 동적 API 경로

    • 전용 API 디렉터리

    • 다른 HTTP 메소드 지원

  • 스트림, 오 스트림

    • 서버 스트리밍이란 무엇입니까?

    • 왜 우리가 귀찮게 해야 합니까?

    • 스트리밍은 쉽지만 어렵다

    • Astro의 서버 스트리밍

    • 스트리밍 활용하기

  • 결론


7장: 소리를 들어보세요! (풀스택 Astro 프로젝트)

7장: 소리를 들어보세요! (풀스택 Astro 프로젝트)

  • 무엇을 배울 것인가

  • 프로젝트 설정

  • 프로젝트 개요

    • 홈페이지

    • 기록 페이지

    • 가입 페이지

    • 로그인 페이지

    • 도우미 구성요소 및 유틸리티

  • 기술 선택

  • 백엔드 설정

  • 인증 처리

    • 클라이언트에서 Firebase 초기화

    • Firebase 에뮬레이터 사용

    • 사용자 가입 처리

    • 사용자 로그인 처리

  • 보호된 페이지 구현

    • 서버에서 Firebase 초기화

    • 홈페이지 경로 보호

    • 리디렉션 URL 업데이트

    • 보호된 페이지에서 사용자 로그아웃

  • 클라우드 스토리지 설정

  • 오디오 녹음 업로드

    • API 경로를 통한 업로드 처리

    • 클라이언트에서 녹음 업로드

    • 프레임워크 구성요소의 UI 변경에 반응

  • 서버에서 데이터 가져오기

  • HTML 양식 제출

  • 결론


1장: 첫 번째 Astro 애플리케이션 구축

  • 8장: 나만의 Astro 통합 구축

  • 무엇을 배울 것인가

  • 아스트로와 바이트

  • Astro 통합이란 무엇입니까?

  • 안녕하세요. 죄송합니다. 안녕하세요, 통합입니다.

    • 프로젝트 목표

    • 첫 번째 맞춤 통합

    • 서버 콘솔에 메시지 인쇄

    • 공장 기능으로서의 맞춤형 통합

  • Astro 후크 수명주기

    • Hooks의 시기와 이유

    • 후크 평가 순서 검토

  • 기본 사전 렌더링 통합 구축

    • 프로젝트 목표

    • 통합 API

    • 기술 솔루션 개요

    • CLI 플래그를 통해 프로젝트 초기화

    • 통합 설정

    • 해결된 Astro 구성 검증

    • 사용자 정의 통합에 Vite 플러그인 적용

    • Astro용 Vite 플러그인 작성

    • AST 구문 분석 및 변환

    • 수동 테스트

  • 렌더러 및 라이브러리 통합 구축

  • 결론


결론

결론



전자책을 다운로드하고 싶으신가요? 여기를 클릭하세요


특허

이 프로젝트는 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE.md 파일을 참조하세요.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체