[데브코스 Day49] 2022.12.22

📖오늘 배운  것

requestAnimationFrame()

애니메이션을 향상시킬 수 있는 방법 중 하나. 렌더링 최적화에도 사용될 수 있다.

 

특징

• 백그라운드 동작 및 비활성화시 중지
• 최대 1ms로 제한되며 1초에 60번 동작(프레임 비율을 모니터의 주사율에 맞추어서 실행)
• 다수의 애니메이션에도 각각 타이머 값을 상성 및 참조하지 않고 내부의 동일한 타이머 참조

 

이 함수는 스크롤 이벤트 최적화에 사용될 수 있는데 만약 스크롤 이벤트를 그냥 실행한다면 스크롤을 할 때마다 계속해서 이벤트가 실행될 수 있다. 이 때 최적화하는 방법으로는 쓰로틀링, 디바운스가 있고 그 외의 방법으로 requestAnimationFrame를 사용하는 방법이 있다. 

 

requestAnimationFrame 을 사용하면 브라우저가 렌더링 할 수 있는 만큼만 이벤트를 트리거해주기 때문에 과한 렌더링을 막을 수 있게 된다. 

cancelAnimationFrame()

requestAnimationFrame를 취소하는 함수이다.

 

 

Window.scrollTo()

:문서의 지정된 위치로 스크롤한다.

window.scrollTo(x-좌표, y-좌표)

x - 문서의 왼쪽 상단부터 시작하는 px 단위의 가로축

y - 문서의 왼쪽 상단부터 시작하는 px 단위의 세로축 

 

이 함수는 window.scroll과 효과가 같다.

x좌표와 y좌표 외에도 options을 받을 수 있다.

 

options top: 요소를 스크롤 하기 위해 y축을 기준으로 px 지정 left: 요소를 스크롤하기 위해 x축을 기준으로 px 지정 behaivor: 요소를 특정 위치로 스크롤 할 때 다음 동작 중 하나를 실행할 수 있다.  -auto: 기본값  -smooth: 스크롤이 부드럽게 움직인다.

 

💭배운 점

실습 위주로 강의가 진행되면서 TIL에 작성하는 것은 많이 없지만 강의에서 진행된느 실습 내용을 이해하기 위해 노력중이다. 분명 아는 내용임에도 이해하는 게 쉽지 않다. 아무래도 자주 보면서 익숙해지고 또 직접 재사용해보는 경험이 필요할 것 같다!