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