이벤트가 함수 반환보다 먼저 도착할 때
완료 이벤트가 접수 응답보다 먼저 도착하면 버려도 반영해도 문제가 됩니다. 보관했다가 식별자 확정 후 꺼내는 방법입니다.
프레임 정규화와 체크섬
이미지 생성으로 만든 프레임은 배경이 투명하게 나오지 않습니다. 크로마키 관용값이 양쪽으로 위험한 이유와, 프레임 수백 장을 픽셀 수로 검증하는 방법을 실측과 함께 정리했습니다.
스프라이트 시트 규격 정하기
스프라이트 시트를 행·열 계산으로 읽으면 프레임이 한 행을 넘는 순간 조용히 틀립니다. 걷는 동작이 절반에서 튀는 원인과 명시 좌표로 바꾼 이유를 실제 매니페스트와 함께 정리했습니다.
비동기 응답에서 오래된 결과가 최신 것을 덮어쓸 때 — 세대 번호
취소한 요청의 응답이 나중에 도착해 화면을 덮을 때, 요청 ID 만으로는 부족합니다. 세대 번호로 무효화하는 방법을 정리했습니다.
setInterval로 만든 애니메이션이 미세하게 떨릴 때
setInterval 33ms 틱과 60Hz 화면의 위상이 어긋나 애니메이션이 떨립니다. 실측으로 원인을 잡고 rAF 로 옮긴 과정입니다.
앱이 멈췄다 깨어나면 캐릭터가 순간이동하는 이유 — dt 클램프
앱이 멈췄다 깨어나면 밀린 시간이 한 틱에 몰려 순간이동이 납니다. dt 상한을 두고 나머지를 버리는 이유와 값을 정하는 기준입니다.
타이머 콜백이 겹쳐 실행될 때 막는 법
타이머 콜백이 겹쳐 실행되면 오래된 호출이 최신 상태를 덮어씁니다. 진행 중 플래그로 막는 법과 finally 가 필수인 이유를 정리했습니다.
AI가 “이건 못 뗀다”고 한 코드를 실제로 떼어 보면
소스를 읽고 내린 판단과 실제로 해 본 결과가 갈렸습니다. 못 뗀다고 적어 둔 코드 둘이 떼어 보니 됐고, 그 차이가 어디서 생기는지 정리했습니다.
투명·클릭 통과 창을 직접 만들어 보기
화면 위에 항상 떠 있으면서 빈 곳의 클릭은 뒤로 통과시키는 창을 만드는 법입니다. UI 를 알파값보다 먼저 봐야 하는 이유와 pointer-events 가 창 전체를 먹는 함정을, 돌아가는 최소 예제와 함께 정리했습니다.