대규모 타임라인에서도 부드럽게 동작하는 에디터 만들기
이진 탐색 기반 시간 인덱스와 rAF 기반 Signal 구독으로 Region 조회와 Canvas 갱신 경로를 분리하고, 측정 결과의 한계까지 설명합니다.
Tag
#canvas
Published writing tagged with canvas.
이진 탐색 기반 Region 시간 인덱스와 rAF Signal 구현하기
Viewport 내 Region만 조회하는 시간 인덱스와 React 실행에서 Canvas draw를 분리하는 rAF 기반 Signal 구독 패턴을 단계별로 구현합니다.
[Part 3.] 오버레이 방식으로 드래그 리렌더 제거하기
타임라인 리전 드래그 중 Canvas 리렌더를 피하기 위해 overlay 기반 이동 구조로 바꾼 과정을 정리합니다.
[Part 2.] 회고록: 정말 최선이었을까?
타임라인 드래그 성능 개선 과정을 다시 검토하며 측정, 병목 분리, 재측정의 중요성을 정리합니다.
[Part 1.] React 경로를 줄이고 한 프레임에 한 번만 그리기
타임라인 드래그 중 React commit과 Canvas draw 비용을 측정하고 rAF 기반 처리로 줄인 과정을 정리합니다.
타임라인 Region 만들기 - Canvas 단일 레이어의 한계와 SVG 분리
타임라인 줌에서 Canvas 크기 한계로 리전이 사라지는 문제를 SVG 레이어 분리로 해결한 과정을 정리합니다.