프론트엔드
웹 접근성 완전 가이드: ARIA 패턴과 키보드 인터랙션
웹 접근성 완전 가이드: ARIA 역할/속성/상태, 복잡한 UI 패턴(모달/탭/드롭다운) 접근성 구현, 키보드 포커스 관리, aria-live로 동적 콘텐츠 알림, 스킵 내비게이션, WCAG 2.2 기준을 다룹니다.
studio-web-craft.xyz — frontend · perf · dx
웹 프론트엔드 연구실
빌드·배포·관측을 실무 실험과 문서화로 병행합니다. 짧은 메모와 긴 분석을 같은 블로그에 올립니다.
웹 프론트엔드·렌더링·번들·성능·DX를 브라우저 제품 관점에서 정리한 기술 블로그입니다. React·Next·TypeScript, 테스트·CI는 인용·출처를 우선합니다.
프론트엔드
더보기프론트엔드
Vite 플러그인 개발 가이드: 커스텀 빌드 도구 만들기
Vite 플러그인 개발 완전 가이드: Rollup 기반 플러그인 훅, transform/resolveId/load 훅 구현, 가상 모듈 패턴, HMR 커스터마이징, 환경별 플러그인 적용, 플러그인 테스트 전략을 다룹니다.
프론트엔드
CSS 스크롤 기반 애니메이션: JavaScript 없이 스크롤 인터랙션 구현
CSS Scroll-Driven Animations 완전 가이드: animation-timeline: scroll()과 view()로 스크롤 연동 애니메이션, @scroll-timeline, scroll-timeline-name, ViewTimeline API, 진행률 바, 패럴랙스, 등장 애니메이션 구현을 다룹니다.
성능
더보기성능
HTTP 캐시·브라우저·CDN·엣지: 무엇을 어디서 캐시할지 실무 결정표
Cache-Control 한 줄이 기대와 다르게 동작할 때가 많습니다. 브라우저 캐시·공유 CDN·원본·엣지 함수의 역할을 나누고, GET과 변이 요청, 재검증까지 한눈에 정리합니다.
성능
번들 분석과 코드 스플리팅 — 실무에서 통하는 접근
번들 시각화로 거대 의존성을 찾고, 라우트·기능 단위 dynamic import, 트리셰이킹 친화 설정을 점검합니다.
성능
Core Web Vitals 실무 — LCP·INP 디버깅 순서
필드 데이터와 랩 데이터를 나눠 보고, LCP 요소·상호작용 지연의 흔한 원인을 좁히는 절차를 정리합니다.
## latest
최신 글