쓰로틀링 2

[Front] 디바운싱과 쓰로틀링

프론트에서의 상태 변경과 관련해 매번 백에 API를 요청하는 것이 아닌 일정 시간을 두고 요청하는 것과 관련해, 코치님께서 '디바운싱과 쓰로틀링'을 언급해주셨다. '디바운싱과 쓰로틀링'을 개발과정에서 사용해보고자 정리를 해본다. 디바운싱 함수 실행 요청이 연속적으로 들어온 경우 가장 마지막(혹은 제일 처음) 요청만 수행 ex. 검색창에 "front"를 검색한다고 해보자. 일반적인 경우에는 글자를 입력할 때마다 API 요청을 하게 된다. 이 경우에는 너무 많은 요청이 들어가게 되고 서버에서는 자원 부담 및 부하로 이어질 수 있다. 더불어 아무 글자나 마구잡이로 계속해서 입력하다보면 그 때마다 API 요청이 되어 호출 낭비가 된다. 디바운싱의 경우, 정해진 시간이 지나기 전에 입력이 들어온다면 기존 시간은 ..

IT Study/CS 2023.11.22

[JS] setTimeout의 clearTimeout, 디바운싱, 쓰로틀링

clearTimeout : setTimeout으로 생성한 타이머의 실행을 취소하는 기능 clearTimeout(취소할 타임아웃의 식별자) 디바운싱 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 예를 들어 사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 하면 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번 실행된다. 디바운싱은 성능뿐 아니라 요청 하나하나도 모두 돈인 유료 API를 사용할 때 큰 효과를 볼 수 있다. 디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결..

IT Study/JavaScript 2023.09.06
반응형