개발 기록
이 사이트의 고양이 캐릭터는 프레임워크 없이 순수 HTML·CSS·JavaScript로 만들었습니다. 그 과정에서 부딪힌 문제와 해결 방법을 코드와 함께 기록합니다.
글 3편
- Cloudflare Pages로 정적 사이트 배포하고 도메인 연결하기 wrangler 한 줄로 정적 사이트를 배포하고, 커스텀 도메인을 연결하고, robots.txt·sitemap.xml·ads.txt까지 제대로 서비스되게 만드는 과정을 실제 설정 기준으로 정리했습니다.
- CSS transform이 서로를 덮어쓸 때 — 레이어를 나눠 해결하기 좌우 반전, 통통 튀는 애니메이션, 기울이기를 한 요소에 동시에 걸면 마지막 하나만 살아남습니다. transform 충돌의 원인과 DOM 레이어를 나눠 푸는 방법을 실제 코드로 정리했습니다.
- 라이브러리 없이 화면을 돌아다니는 캐릭터 만들기 — 상태 머신과 requestAnimationFrame 이 사이트의 고양이는 프레임워크 없이 순수 JavaScript로 움직입니다. 걷기·달리기·쉬기 상태 머신, 벽 반사, 클릭과 드래그를 구분하는 처리까지 실제 코드로 설명합니다.