태그: Astro
11편
-
Astro Islands 아키텍처: client 디렉티브로 필요한 컴포넌트만 Hydration하기
Astro에서 client:load·client:idle·client:visible 같은 디렉티브로 필요한 컴포넌트만 Hydration하는 방법, React·Vue·Svelte를 한 페이지에 섞어 쓰는 설정, Next.js·Qwik과의 구조적 차이를 예제로 살펴봅니다.
-
Markdown 파서 이해하기: CommonMark vs GFM, AST 변환, 플러그인 확장, MDX
마크다운을 “문법만” 알고 쓰는 단계를 넘어, 파서가 무엇을 보장하는지, 중간 표현(AST)에서 무엇이 일어나는지, 확장은 어디에 끼워 넣는지, MDX가 왜 별도인지, 운영 환경에서 무엇을 고정해야 하는지를 정리합니다.
-
Astro 5 가이드 — Content Layer·Server Islands·Sessions 새 기능과 실전
Astro 5의 Content Layer로 외부 데이터를 커스텀 Loader로 불러와 타입 안전하게 쓰는 법, Server Islands로 정적 캐시를 유지하면서 개인화 영역만 서버에서 렌더링하는 법, Actions와 Sessions 사용법을 예제로 설명합니다.
-
Astro Content Collections 심화 가이드 — 스키마·타입 안정성·i18n·동적 라우팅
Content Collections 심화: Zod 빌드 검증, 캐시·증분, reference 해석, astro sync 타입, 프로덕션 운영·Git·CMS까지 정리합니다. Astro Content Collections는 정적 콘텐츠를 “코드베이스의 일급 데이터”로 취급하게 해 줍니다.
-
Astro View Transitions 심화 가이드 — 부드러운 페이지 전환과 MPA UX
Astro ClientRouter와 View Transitions API로 전환을 설계하는 방법. transition:name·animate·persist, 커스텀 애니메이션, 폴백·성능·라이프사이클 이벤트와 프로덕션 네비게이션 패턴을 정리합니다.
-
Astro DB와 Turso: libSQL 스키마·시드·Drizzle 쿼리와 엣지 복제
Astro DB에서 defineTable로 스키마와 시드 데이터를 정의하고 스키마 푸시, Drizzle 쿼리와 조인을 작성한 뒤, Turso 원격 DB와 임베디드 복제본을 연결해 로컬·원격 개발을 오가는 방법을 설명합니다.
-
Astro + Cloudflare Pages 블로그 스택 분석 | Vercel·Netlify
Astro + Cloudflare Pages로 블로그를 운영할 때의 장단점을 실전 경험 기반으로 정리합니다. Next.js + Vercel, Hugo + Netlify, WordPress, Ghost와 비교하며 속도·비용·유지보수·SEO·확장성을 분석합니다.
-
Astro로 기술 블로그 만들기 | 콘텐츠 컬렉션·MDX·SEO·배포까지
Astro로 기술 블로그를 만들면서 Content Collections 스키마, MDX 컴포넌트, 태그·시리즈 라우팅, Pagefind 검색, RSS와 Sitemap의 lastmod 설정, 페이지네이션 중복 URL 처리, Satori OG 이미지, Cloudflare Pages 배포를 차례로 구현합니다.
-
Astro 4에서 달라진 것: Dev Toolbar, Content Collections v2, View Transitions
Astro 4의 Dev Toolbar, Zod 스키마를 쓰는 Content Collections v2, View Transitions를 실제 설정 예제로 살펴보고, 아일랜드와 부분 수화가 빌드·런타임에서 어떻게 동작하는지, Vite 설정으로 빌드를 튜닝하는 방법을 설명합니다.
-
Astro로 정적 사이트 만들기: 아일랜드 하이드레이션, 콘텐츠 컬렉션, Vite 빌드 파이프라인
Astro 컴포넌트와 레이아웃, client:load·visible·idle·only 하이드레이션 선택자, 콘텐츠 컬렉션, React·Vue 통합, API Routes를 예제로 따라가며 Cloudflare Pages 배포까지 진행해 봅니다.
-
Astro Content Collections로 타입 안전한 블로그 만들기: Zod 스키마, loader, 페이지네이션
Astro Content Collections로 타입 안전한 콘텐츠를 관리하는 방법. 스키마 정의, MDX, 동적 라우팅, 페이지네이션, 관련 글, RSS, 다국어까지 블로그 구축 예제로 정리합니다.