개요

코틀린 Flow의 debouce() 함수와 sample() 함수에 대해 알아보기

Debounce

프론트엔드에서 유저와의 상호작용으로 서버 API 호출 시 매 상호작용 (예를 들어 텍스트입력 등)마다 요청을 전달하면 서버 리소스 낭비, 과부하를 유발한다.

따라서 자주 발생하는 서버 요청 이벤트는 적절하게 필터링되어 전달될 필요가 있다.

0_KzSxcmsyLPaujawF.webp

프로그래밍에서 debounce는 요청을 그룹화 하여 일정 시간 동안 이벤트가 발생하지 않으면 마지막 이벤트를 전달하는 기법이다.

위의 그림에선 일정 시간 기준으로 들어오는 요청들을 버퍼에 저장해두고,

설정한 시간동안 더 이상의 이벤트가 없을때마다 버퍼에 마지막으로 입력된 이벤트를 전달하고 있음을 확인할 수 있다.

debounce기법을 사용하는 대표적인 예시로 위에서 언급한 검색이 있다.

검색바에 텍스트를 입력하고, 검색버튼과 같은 요청버튼이 있는 경우가 아니라

검색바에 텍스트가 입력될때마다 실시간으로 이 텍스트로 서버에 요청해 결과를 받아오는 경우 유용하게 사용할 수 있다.

우리 프로젝트 역시 검색화면에서 검색창에 노래제목, 가수 등을 입력하면 해당 텍스트로 애플뮤직 API 의 검색결과를 받아와 화면에 표시하는데

이 debounce를 잘 사용해볼 수 있을 것이라 생각하였다.