오늘 공부한 내용 💻
-
고양이 사진첩
-
디바운스 & 스로틀
고양이 사진첩 🐈
고양이 사진첩 강의 내용은 과제와 이어지는 내용이었기 때문에 컴포넌트 구조나 기능 등은 추후 과제 회고때 한번에 작성하도록 하겠습니다 😁
어려웠던 내용 🤢
디바운스(Debounce)
-
디바운스란 ?
연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것이다.
짧은 간격으로 연속된 이벤트가 발생하면 이밴트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후 한 번만 호출한다.
-
언제 사용 ?
resize 이벤트나 input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성, 버튼 중복 클릭 방지 처리에 유용하기 쓰인다 !
쓰로틀(Throttle)
-
쓰로틀이란?
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것이다.
짧은 간격으로 이벤트가 연속으로 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
-
언제 사용 ?
scroll 이벤트 처리, 무한 스크롤 UI구현
정리
- 디바운스, 쓰로틀 둘 다 연속해서 호출되는 이벤트를 제어하는 방법이다.
resize, input, 스크롤이나 마우스 움직임 같은 짧은 시간에 연속적으로 일어날 수 있는 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 줄 수 있기 때문에 디바운스 & 쓰로틀을 사용한다 !
더 공부할 내용 📃
-
디바운스 & 쓰로틀 구현
-
고양이 사진첩 과제
느낀점 👀
5-6주차 강의를 듣고 노션 프로젝트를 하면서 디바운스나 스로틀을 구현해 보기는 했었는데 당시에 이해를 못해서 강사님 코드를 가지고 사용하기만 했었다. 🤣
이번주 커피챗 시간에 멘토님이 디바운스와 스로틀이 매우 중요한 내용이니 공부하는것을 권장하셔서 오늘을 계기로 나도 꼭 알고 넘어가고 싶었는데 왜 쓰이고 어디에 쓰이는지 공부하니 머리에 좀 더 잘 들어왔다. 😁
디바운스는 이벤트가 연속적으로 계속 발생해도 일단 무시하고 설정한 시간 동안 이벤트가 발생하지 않았을 때 한 번만 실행되는 것이고, 스로틀은 설정한 시간 주기로 실행 된다는 점 ! 기억하자아
참고 사이트 🙄
