프론트엔드
설치 없이 브라우저에서 돌아가는 웹 게임 통합 패턴 — iframe·Canvas·세이브 영속화
테이블플레이의 즉시 플레이 영역을 사례로, 외부 웹 게임을 자기 사이트에 통합하는 패턴을 다룹니다. iframe sandbox, postMessage 통신, Canvas/WebGL 렌더, IndexedDB 세이브 영속화까지 실무 가이드.
studio-web-craft.xyz — frontend · perf · dx
웹 프론트엔드 연구실
빌드·배포·관측을 실무 실험과 문서화로 병행합니다. 짧은 메모와 긴 분석을 같은 블로그에 올립니다.
웹 프론트엔드·렌더링·번들·성능·DX를 브라우저 제품 관점에서 정리한 기술 블로그입니다. React·Next·TypeScript, 테스트·CI는 인용·출처를 우선합니다.
프론트엔드
더보기프론트엔드
정보 가이드형 웹사이트의 SEO·코어 웹 바이탈 점검 — 카지노게임.kr 구조 분석
정보형 가이드 사이트 카지노게임.kr을 코어 웹 바이탈, 내부 링크 구조, 시맨틱 HTML, 구조화 데이터 관점에서 점검하고, 정적 정보 사이트가 SEO에서 챙겨야 할 항목을 프론트엔드 관점으로 정리합니다.
프론트엔드
웹 접근성 완전 가이드: ARIA 패턴과 키보드 인터랙션
웹 접근성 완전 가이드: ARIA 역할/속성/상태, 복잡한 UI 패턴(모달/탭/드롭다운) 접근성 구현, 키보드 포커스 관리, aria-live로 동적 콘텐츠 알림, 스킵 내비게이션, WCAG 2.2 기준을 다룹니다.
성능
더보기성능
HTTP 캐시·브라우저·CDN·엣지: 무엇을 어디서 캐시할지 실무 결정표
Cache-Control 한 줄이 기대와 다르게 동작할 때가 많습니다. 브라우저 캐시·공유 CDN·원본·엣지 함수의 역할을 나누고, GET과 변이 요청, 재검증까지 한눈에 정리합니다.
성능
번들 분석과 코드 스플리팅 — 실무에서 통하는 접근
번들 시각화로 거대 의존성을 찾고, 라우트·기능 단위 dynamic import, 트리셰이킹 친화 설정을 점검합니다.
성능
Core Web Vitals 실무 — LCP·INP 디버깅 순서
필드 데이터와 랩 데이터를 나눠 보고, LCP 요소·상호작용 지연의 흔한 원인을 좁히는 절차를 정리합니다.
## latest
최신 글