n년차 프론트엔드 개발자가 이직을 준비하며, 기술 면접에서 자주 출제되는 질문들을 정리한 영상을 제작하고 있습니다.

오늘 다룰 개념은 성능 개선 기술로 널리 알려진 debounce와 throttle에 대한 설명입니다.

https://youtu.be/Cs1HExo2Btg

원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.

debounce와 throttle의 개념에 대해 설명해주세요.
debounce와 throttle은, 일정 시간 동안 동일한 이벤트가 여러번 발생했을 때, 이벤트 핸들링 횟수를 한번으로 제한하는 기술입니다. 불필요하게 이벤트 핸들러가 많이 호출되는 것을 방지함으로써 웹 성능을 최적화하기 위해 사용되는 기술입니다. 일반적으로 짧은 시간 동안 여러번 발생할 수 있는 이벤트들, 예를 들면 resize 이벤트나, keyboard 입력 이벤트에 적용합니다.

debounce와 throttle의 차이를 설명해주세요.
일정 시간 내에 동일한 이벤트가 여러번 발생했을 때, debounce는 마지막으로 발생한 이벤트만 처리하고, throttle은 처음 발생한 이벤트만 처리한다는 차이가 있습니다.

debounce와 throttle이 어떻게 웹 성능을 최적화할 수 있는지 구체적으로 설명해주세요.
키보드 입력 이벤트를 예로 들어 설명드리겠습니다. 일반적으로 키보드 입력 이벤트는 짧은 시간 내에 집약적으로 호출되는 경향이 있습니다. 그렇기 때문에, 그 짧은 시간 동안 발생되는 이벤트들을 모두 처리하는 것은 비효율적일 수 있습니다. 예를 들어, API 호출을 통해 자동완성을 지원하는 입력 필드에서, 모든 입력을 핸들링 하게되면, 자동완성 UI를 다시 그리기 위한 rendering 프로세스와 API 요청을 처리하기 위한 프로세스가 과도하게 호출될 수 있습니다. 이 경우, debounce를 통해 이벤트 핸들링을 마지막 입력으로 제한한다면, 불필요한 리소스 낭비를 방지할 수 있습니다. debounce time을 500ms로 설정하고, "helloworld" 라는 검색어를 입력했을 때, 10번 호출되던 로직을 1번으로 줄일 수 있다는 이점이 있습니다.

그럼 500ms, 즉 0.5초 동안 자동완성 UI 갱신이 지연된다는 의미아닌가요?
네 맞습니다. debounce는 일정 시간 내에 마지막으로 발생한 이벤트만 처리하므로, 사용자가 설정한 시간 동안 delay가 발생할 수 있습니다. 그래서 debounce time과 throttle time은 사용자가 쉽게 인식하지 못할 정도로 짧게 설정하는 것이 일반적입니다.

그럼 throttle은 언제 사용될 수 있나요?
throttle은 resize 이벤트에 따른 레이아웃 변경과 같이 이벤트 발생에 대한 즉각적인 피드백이 필요한 경우 적용합니다.

그럼 resize에 따른 레이아웃 변경 기능에 debounce를 적용하면 어떻게 될까요?
resize가 이벤트가 발생했을 때, 사용자들은 일반적으로 레이아웃이 바로 변경되는 것을 기대하지만, debounce가 적용되게 되면 레이아웃 변경에 delay가 발생하기 때문에, 사용자 경험 저하가 일어날 수 있습니다.

그럼 반대로, 자동완성 입력 필드에 throttle을 적용하면 어떻게 될까요?
throttle은 일정 시간 동안 발생한 이벤트 중 첫번째 이벤트만 처리하기 때문에, throttle time 내에 모든 입력이 완료되면, 첫 입력값을 제외한 모든 입력이 핸들링 로직에서 누락될 수 있습니다.