🧩 오늘 한 일

• requestAnimationFrame의 개념
• setInterval 과의 차이

🧠 배운 점 / 새로 알게 된 점

기존 setTimeout과 setInterval의 문제점

• 화면 refresh 타이밍과 안맞음
• 브라우저가 숨겨진 탭에서도 실행
• 너무 자주 실행되면 과도한 CPU 사용

→ requestAnimationFrame 사용으로 해결

requestAnimationFrame(rAF)이란?

브라우저가 다음 화면을 렌더링하기 직전에 지정한 함수를 호출하도록 요청하는 API이다.

브라우저의 렌더링 사이클에 맞춰 콜백을 실행하므로 애니메이션을 부드럽게 만들 수 있는 방식이다.

매개변수로 콜백 함수를 받는데, repaint 이전에 실행할 콜백 함수를 인자로 받는다.

실제 화면이 갱신되어 표시되는 주기에 따라 함수를 호출해주기 때문에 자바스크립트가 프레임 시작 시 실행되도록 보장해주어 프레임 밀림 현상을 방지해준다.

requestAnimationFrame의 장점

• 페이지가 비활성 상태이면 paint 작업도 중지되므로 requestAnimationFrame도 렌더링을 중지한다
• 브라우저가 언제 업데이트를 할지 알기 때문에 프레임 손실을 방지한다
• setTimeout은 타이머를 지정해주어야 하지만, rAF은 프레임 단위로 동작하기 때문에 별도의 반복 플래그가 필요 없다