피드로 돌아가기
Dev.toFrontend
원문 읽기
CLAUDE.md 컨텍스트 주입을 통한 Astro JS 번들 최소화 전략
CLAUDE.md for Astro: 13 Rules That Stop AI from Shipping Too Much JavaScript
AI 요약
Context
AI 도구가 Astro의 Islands Architecture에 대한 깊은 이해 없이 일반적인 React 패턴을 적용함에 따른 성능 저하 발생. 무분별한 client:load 사용과 서버 전용 로직의 클라이언트 배치로 인해 JavaScript 번들 크기가 불필요하게 증가하는 구조적 한계 직면.
Technical Solution
- CLAUDE.md 파일을 통한 프레임워크 버전, Output Mode(Static/SSR), UI Framework 명시로 생성 코드의 정합성 확보
- Frontmatter 영역의 Server-only 실행 원칙 강제를 통한 Browser API 호출로 인한 빌드 타임 에러 방지
- client:load 대신 client:idle, client:visible 등 목적별 Hydration Directive를 세분화하여 클라이언트 자원 낭비 제거
- Content Collections API 사용을 강제하여 원시 Markdown import 방식의 타입 안정성 부재 및 성능 저하 해결
- 컴포넌트 활용을 통한 빌드 타임 이미지 최적화 파이프라인 강제 적용
- 인터랙티브 요소가 없는 컴포넌트를 .astro 파일로 전환하여 React 런타임 의존성 및 번들 사이즈 최소화
실천 포인트
- AI 프롬프트에 Astro 버전 및 Output Mode(Static/Hybrid/Server)를 명시했는가 - 모든 인터랙티브 컴포넌트에 최적의 Hydration Directive(idle, visible 등)를 선택적으로 적용했는가 - .astro 파일의 frontmatter 영역에 window, document 등 Browser API가 포함되지 않았는가 - 구조화된 콘텐츠 관리를 위해 src/content/config.ts 기반의 Content Collections를 사용 중인가 - 단순 UI 컴포넌트를 불필요한 Framework Component(React/Vue) 대신 .astro 컴포넌트로 구현했는가