requestAnimationFrame API

• 웹에서 애니메이션을 만드는 방법에는 CSS를 이용한 방법, JS를 이용한 방법, 그리고 두 가지를 합쳐서 쓰는 방법이 있다. 그 중 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 성능적으로 좋지 않아 애니메이션을 최적화하는 과정이 필요하며, 이때 `requestAnimationFrame`API를 통한 애니메이션 최적화가 필요하다.

• `requestAnimationFrame`API는 다음에 실행해야 하는 애니메이션을 콜백 함수로 전달하고 리페인트 전에 전달한 콜백함수를 실행하는 역할을 해준다. 이를 사용하면 브라우저 비활성화시 리소스 낭비 방지나 좀 더 부드러운 애니메이션을 만드는 등 이점이 있다.

• SVG 이미지를 생성하고, 이를 웹 페이지에 추가하는 코드를 작성하였다. 이후, 이미지가 대각선 위로 이동하는 애니메이션 코드를 추가하였다.

• 애니메이션은 requestAnimationFrame을 사용하여 구현하였고, 이미지가 특정 위치에 도달하면 애니메이션을 취소하는 코드를 작성하였다. 이를 통해 setInterval이나 setTimeout을 사용하는 것보다 더 효율적인 애니메이션 구현 방법을 배울 수 있었다.