웹 애니메이션 최적화 requestAnimationFrame

오늘만 3번 읽었는데 더 잘 정리할 자신이 없다.
Inpa Dev 웹 애니메이션 최적화 requestAnimationFrame 가이드

기억 날때마다 읽도록하자

위 글에서 재귀식으로 쓰면 된다라고만 간단하게 나와있는데 추가적인 내용만 정리하겠음

추가 정리

requestAnimationFrame을 재귀적으로 사용하는 것은 연속적인 애니메이션을 만들 때 필요하다. 하지만 모든 경우에 재귀가 필요하진 않다.

재귀가 필요한 경우 :

• 무한 루프 애니메이션
• 실시간 업데이트가 필요한 게임, 시뮬레이션
• 연속적인 상태 변화 추적

재귀가 불필요한 경우 :

• 한 번의 애니메이션(A -> B 지점 이동)
• 이벤트 기반 애니메이션
• CSS 트랜지션으로 충분할 경우

왜 이걸 찾아봤냐면 resizable box를 구현하는데 버벅거림이 있어서 최적화 방안을 찾다가 알게 되었다.
그래서 공부해보고 아래와같이 잘 구현되었음.