니엘의 개발일지

모니터의 화면 주사율은 hz로 나타내는데 보통의 모니터는 60hz이다 hz는 1초에 몇번의 프레임을 쏘는지에 대한 단위 이며, 인간이 인지할 수 있는 초당 프레임의 갯수는 60프레임을 넘어가지 않기 때문에 60hz로 많이 쓴다. requestAnimationFrame 자바스크립트에서 제공하는 객체로 화면주사율에 맞게 함수를 실행하는 단위이다. requestAnimationFrame(함수) 형태로 넣어주면 함수는 화면 주사율에 맞게 단위별로 실행된다. 리페인트 등의 개념이 있는데, 어럽게 생각할 필요 없이 애니매니션 같은 경우는 1초에 60번만 실행되면 되니깐 1초에 60번의 함수호출 기회가 균등하게 있고, 콜백으로 들어간 함수는 그 호출 클럭에 실행이 된다고 생각하면 된다. 따라서 재귀적으로 실행 되더라..

차이점은 동기이냐 비동기이냐의 차이 이다. For문은 동기적으로 실행되기 때문에 오류가 나면 거기서 멈춰버리고 더이상 동작하지 않는다 ForEach문은 비동기적으로 실행되기 때문에 각각이 독립적으로 큐에 들어가서 하나가 오류가 나도 나머지는 모두 실행 된다. 따라서 속도는 비동기적으로 처리되는 ForEach 문이 빠르다 비동기적으로 작동하는 API요청이나, Dom에 이벤트 리스너들을 심어 줄 때에는 ForEach문이 적합하다.

DOM 이벤트 객체의 deltaY값을 활용하면 된다. deltaY값은 스크롤 이벤트당 절대적인 픽셀의 이동값을 나타낸다. 스크롤을 내릴땐(화면이 올라갈땐) 음수로, 스크롤을 올릴땐(화면이 내려갈땐) 양수로 표현이 되기 때문에 방향을 알 수가 있다. window.addEventListener('mousewheel', e => { console.log(e.deltaY); if(e.deltaY > 0 ) console.log('wheel down') if(e.deltaY < 0 ) console.log('wheel up') })