#astro

10 개의 글

IntersectionObserver ai alb animation api-gateway architecture astro aws backend blog bug-fix claude-code code-highlighting cost-tracking custom-elements db-design debugging decision-making developer-experience devops dx ecr ecs edge-function firelens flow-logs fluent-bit frontend gemini gfm-alerts git github grafana guestbook http-streaming hydration image-optimization infra islands-architecture isr json-rpc kakao-map llm logging loki lqip markdown mcp mdx mermaid mobile-first mobile-ux mongodb networking nextjs nodejs nvm private-endpoint privatelink protocol react regex rehype rehype-pretty-code remark remix requestIdleCallback retrospective scroll-snap serialization shiki side-project sse ssh subnet supabase tailwindcss tooling transport troubleshooting typescript user-feedback ux vercel vite volta vpc vpc-endpoint web-performance webhook webp wedding-invitation

회고 2026년 3월 22일 13분 소요

블로그 개발일지 #7 — ISR과 Edge Function으로 실시간 배포 구현

Supabase에 게시글을 올리면 자동으로 사이트에 반영되는 시스템을 만들었다. Webhook payload 커스터마이즈 제약을 Edge Function으로 우회해서, 전체 재배포 없이 변경된 페이지만 재생성한다.

vercel isr supabase edge-function webhook astro

회고 2026년 3월 22일 21분 소요

블로그 개발일지 #6 — rehype-pretty-code로 코드 블록 업그레이드

기본 Shiki 하이라이팅에서 rehype-pretty-code로 전환하여 라인 번호, 라인 하이라이트, diff 표시, 복사 버튼, 언어 라벨까지 모든 기능을 갖춘 코드 블록을 구현한 과정. 정규식 패턴 설계부터 CSS 변수 기반 스타일링, 클라이언트 스크립트까지 — 3시간의 업그레이드 기록.

astro rehype-pretty-code shiki code-highlighting ux

TIL 2026년 3월 20일 7분 소요

정규식 앵커와 멀티라인 텍스트 — GFM Alert 렌더링 버그 수정기

블로그의 GFM Alert가 렌더링되지 않던 문제를 해결했다. 원인은 remarkCallout 플러그인의 정규식 패턴이 ^ 와 $ 앵커를 사용해 멀티라인 텍스트 노드를 매칭하지 못했기 때문이다. s 플래그를 추가해 dotAll 모드를 활성화하는 것으로 해결했다.

astro markdown regex gfm-alerts remark

회고 2026년 3월 20일 10분 소요

블로그 개발일지 #4 — Supabase로 콘텐츠 관리 아키텍처 전환

로컬 MDX 파일 기반 블로그를 Supabase로 마이그레이션한 이유와 과정을 기록한다. 커스텀 Astro 로더 구현, MCP 서버 역할 변화, MDX에서 Markdown으로의 전환까지 — 아키텍처를 뒤집은 일주일의 기록.

claude-code ai astro supabase architecture

아티클 2026년 3월 15일 19분 소요

선택적 Hydration 파헤치기 — client:* 지시어는 내부에서 어떻게 동작하는가

Astro의 client:load, client:idle, client:visible, client:media가 각각 어떤 브라우저 API 위에 구현되는지, connectedCallback과 hydrateRoot의 실제 코드를 들여다봅니다.

astro frontend hydration custom-elements requestIdleCallback IntersectionObserver web-performance

아티클 2026년 3월 15일 12분 소요

Astro는 어떻게 동작하는가 — Islands Architecture와 Zero JS의 진짜 의미

Astro의 핵심 철학인 Islands Architecture와 Zero JS by default가 실제로 어떻게 구현되는지, 그리고 Next.js/Remix와 무엇이 근본적으로 다른지 파헤칩니다.

astro frontend islands-architecture hydration nextjs remix web-performance

회고 2026년 3월 15일 11분 소요

블로그 개발일지 #3 — OG 이미지, 공유 버튼, 그리고 remark 플러그인

카카오톡에서 한글이 깨지는 OG 이미지 수정, 공유 버튼 구현, 이미지 최적화 도입, Mermaid remark 플러그인까지 — 블로그를 다듬어간 네 가지 개선 작업을 기록한다.

claude-code ai astro blog dx

회고 2026년 3월 15일 10분 소요

블로그 개발일지 #2 — 세 가지 버그와 정적 사이트의 함정

모바일 메뉴 렌더링 깨짐, 카테고리 필터 미동작, 하드코딩된 카테고리 목록까지 — Astro 정적 블로그에서 만난 세 가지 버그를 해결한 과정을 기록한다.

claude-code ai astro blog debugging

회고 2026년 3월 15일 5분 소요

블로그 개발일지 #1 — Claude Code로 하루 만에 블로그 만들기

Astro + React + Tailwind 기술 블로그를 Claude Code와 협업하여 구축한 첫 번째 개발일지입니다.

claude-code ai astro blog dx

아티클 2026년 3월 15일 1분 소요

블로그를 시작하며

Astro와 MDX로 구축한 개인 기술 블로그의 첫 번째 글입니다.

astro blog mdx