requestAnimationFrame 으로 프레임 타이밍 맞추기 🎨 글에 들어가기 앞서 브라우저는 화면을 그릴 때 다음과 같은 과정을 반복한다. 자바스크립트 실행DOM 변경 감지스타일 계산Layout (Reflow) – 요소의 위치와 크기를 계산Paint – 계산된 정보를 바탕으로 픽셀을 그리기Composite – 레이어를 조합해 최종적으로 화면에 출력위 사이클은 보통 1초에 60번, 약 16.6ms마다 반복되며, 브라우저는 이 주기에 맞춰 최대한 부드럽게 화면을 렌더링을 하는데, 자바스크립트에서 DOM을 조작하거나 애니메이션을 처리할 때 이 타이밍을 고려하지 않으면, 프레임 드롭, 끊김, 느려진 인터랙션 같은 문제가 쉽게 발생한다고 한다.✨ requestAnimationFrame 이란?window.requestAnimationFrame() 메서드는 브라우저에게 수.. 2025. 3. 30. 🐛 리렌더링 이슈 해결하기 에디터 위에 새로운 기능을 추가하는 에픽을 시작하게 되면서 드래그, 텍스트 입력, 스텝퍼로 attr 값을 업데이트할 수 있는 기능을 개발하게 되었다. 기능 특성상 상태 변화가 자주 발생하기 때문에, React DevTools의 Highlight updates 옵션을 활성화한 상태로 관찰하며 개발을 진행했는데, 스크롤이나 특정 상태 변경이 발생할 때마다 모든 액티비티 블록이 동시에 리렌더링 되는 현상을 발견했다.( 에디터는 각 액티비티마다 하나씩 렌더링 되며, 전체 액티비티가 리스트 형태로 구성되어 있다. 기능적으로는 특정 액티비티 하나만 수정되는 상황이었음에도 리스트에 포함된 모든 에디터가 함께 리렌더링 되고 있었다.)처음에는 내가 추가한 기능에서 발생한 문제라고 생각했지만, 관련된 로직을 하나씩 제거해.. 2025. 3. 23. 이전 1 다음
