앞 강의와 비교했을 때 어느 것이 더 나은가요??

Question

커서를 따라 움직이는 사각형을 구현했잖아요?? 앞에서는 자바스크립트를 이용해서 자연스러운 움직임을 구현했고, 이번 강에서는 transition을 통해서 구현했는데요.  둘의 차이가 뭔가요?? 그리고 현업에서는 어떤 것이 더 낫나요? 그냥 보기에는 자바스크립트를 이용하면 움직이지 않을때도 뭔가가 계속 돌아가고 있어서 메모리 낭비가 아닌가 생각이 듭니다,,

코딩일레븐 · Answer

안녕하세요 이번 강에서는 '클릭한 곳'으로 이동하는 것을 transition 을 이용한 거고 앞에서 나온  requestAnimationFrame 은 마우스 위치를 계속 체크해주는 거라  방식은 다르다고 할 수 있습니다.  오히려 mouse move 와는 비슷합니다. 엄청난 크기의 이미지나, blur 등의 css filter를 준 이미지를  움직인다면 버벅일겁니다. 그게 requestAnimationFrame의 문제는 아닙니다. 해외사이트에서 볼 수 있는 3d 모션이나 화려한 이펙트 배경등도 전부 requestAnimationFrame 을 사용합니다. canvas animation 에서는 저거 없이는 아무것도 할 수 없을 정도입니다. 그리고 브라우저 탭을 바꾸면 (새창) 작동이 멈춥니다. 작은 이미지가 마우스를 따라다니는 수준은 전혀 문제 없으니 편하게 사용하셔도 됩니다. 모바일도 물론 잘 돌아갑니다. https://news.joins.com/DigitalSpecial/290 위 페이지도  requestAnimationFrame 이 돌고 있는데 전혀 무리가 없는 것을 볼 수 있습니다.