requestAnimationFrame 발생 관련

Question

안녕하세요. 좋은 강의 해주셔서 감사합니다. 궁금한 부분이 있어 문의드립니다. 1. requestAnimationFrame 관련 업데이트 해주신 코드 apple-clone-v5 > 03-canvas-2.html에서 loop함수가 계속 실행되는 이유를 찾아보니, requestAnimationFrame에 의해 로드되는 순간부터 발생을 하고 있네요.  scroll을 하지 않더라도 이 함수가 계속 실행하면 불필요한 자원이 생기는건 아닌지 궁금합니다. (requestAnimationFrame가 많아지면 console.log만 찍어도 브라우저가 버벅이는 현상이 있는것 같더라구요.) scroll 여부에 따라 requestAnimationFrame 또는 cancelAnimationFrame을 해주는 방식으로 하는게 맞을지요. 2. delayedYOffset 문의 smoothscroll.html > 41번째에 있는 아래 구문의 의미가 궁금합니다. delayedYOffset = delayedYOffset + (pageYOffset - delayedYOffset) * acc; 질문에 대한 보충 영상이 있다면 몇 회차인지 알려주셔도 괜찮습니다.

yodj · Answer

답변 감사합니다~~!! 알려주신대로 정주행 + 링크보니 이해가 잘 되었습니다~!!

1분코딩 · Answer

1. 네 맞습니다. 말씀대로 필요 없을 경우에는 cancelAnimationFrame으로 취소해주시면 좋습니다. 우리가 만드는 애플 클론 페이지에서는 말씀처럼 스크롤에 멈추었을 경우 캔슬하는 부분도 포함되어 있으니, 강의를 정주행 하다보시면 보실 수 있답니다^^ 2.  https://www.inflearn.com/course/%EC%95%A0%ED%94%8C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98-%ED%81%B4%EB%A1%A0/lecture/43165 이 강의의 8:00 지점부터 그림을 통해 해당 식을 설명드리는 부분이 있습니다. pageYOffset가 목표지점이고, delayedYOffset은 엘리먼트의 위치에 실제로 적용되는 값이라고 생각하시면 됩니다.