[VanillaJS] 이벤트 핸들러를 지연시키는 디바운스(debounce)

🚀 들어가며

프론트엔드 데브코스 진행 중 재미있는 것을 배웠다. '디바운스'라는 것인데, 나에겐 굉장히 참신했고 한 번 제대로 이해하면 앞으로 유용하게 활용할 것 같아 포스팅하기로 결심했다.

 

 

✅ 디바운스 (Debounce)

디바운스는 전자 공학에서 온 용어라고 한다. 예를 들어, TV 리모컨은 버튼을 누를 때 여러 번의 클릭 신호가 감지되는 것을 방지하기 위해 버튼 클릭의 저점과 고점 사이의 신호를 무시하는 디바운스 기법을 활용한다고 한다.

자바스크립트에서의 디바운스도 이와 같은 맥락이다. 자바스크립트에서 디바운스란, 짧은 간격으로 연속된 이벤트가 발생할 때 이벤트 핸들러가 과도하게 호출되어 성능의 저하가 발생하는 것을 방지하기 위해 일정 시간이 경과한 이후에 한 번만 이벤트 핸들러를 호출하는 것을 말한다.

Editor.js - input 태그의 value 속성과 textarea 태그의 text에 keyup 이벤트 발생 시 onEditing 콜백함수 호출

PostEditPage.js - onEditing 함수 정의 : keyup 이벤트가 발생할 때 마다 API를 호출하게 된다.

 

위의 코드에서 keyup 이벤트가 발생할 때 마다 API 통신을 통해 DB에 변경된 데이터가 저장되게 된다. 변경된 데이터가 즉각적으로 API 통신을 통해 저장되므로 정확하게 데이터가 저장되지만 키가 하나씩 입력될 때마다 API가 호출되어 성능에 저하를 일으킬 수 있는 치명적인 단점이 있다.

이러한 경우 디바운스를 통해 API가 과도하게 호출되는 것을 막을 수 있다. 

디바운스 : setTimeout과 clearTimeout 사용

 

setTimeout 함수를 사용하여 디바운스를 구현할 수 있다.

먼저, timer를 null 값으로 초기화하고, onEditing 함수 내부에 작성된 코드를 setTimeout 함수의 콜백 함수에 붙여넣고 딜레이 시간을 지정한다. 그 후 clearTimeout 함수를 통해 setTimeout 함수 실행 시 지정된 타이머를 초기화 시킨다. 

이제 keyup 이벤트 발생 시 이벤트 핸들러에 포함된 onEditing 콜백 함수가 호출되게 되면, clearTimeout 함수를 통해 timer가 계속 초기화되게 된다. 즉, setTimeout 함수의 콜백 함수인 API 호출이 지연되게 된다.

 

 

✅ 디바운스 응용해보기

학습한 디바운스를 응용해보기로 했다.

keyup 이벤트 발생 시, 즉각적으로 로컬스토리지에 데이터가 저장되고 30초 후 API 통신을 통해 DB에 저장하는 코드를 작성해보았다. 또, 새로고침 시, 로컬스토리지에 저장된 작성 시간(tempSaveDate 프로퍼티의 값)과 API 통신으로 불러온 데이터의 작성 시간(updated_at)과 비교하여 더 크다면(최신이라면) '불러오기' confirm 창을 띄우고, 각 버튼에 따라 다른 데이터를 편집기에 render 하도록 코드를 작성했다.

Editor.js - keyup 이벤트 핸들러는 동일하게 작성

PostEditPage.js - keyup 이벤트 발생 시 즉각적으로 로컬에 데이터가 저장되고, API는 이벤트 발생이 완전히 멈춘 끝난 30초 뒤에 호출된다.

App.js - 로컬스토리지에 저장된 데이터의 작성 시간과 DB에 저장된 데이터의 업데이트 시간을 비교하여 confirm창을 띄운다.

이제 아래와 같이 confirm 창이 팝업되고, 버튼에 따라 다른 데이터가 편집기에 render 된다.

sidebar의 post를 클릭 시, post의 데이터가 로컬에만 저장되고 DB에 저장되지 않았다면 confirm 창이 뜨게 된다.

확인을 누르면 로컬스토리지에 저장된 데이터를 불러온 후 이어서 작성할 수 있다.

취소를 누르면 이전에 API 통신을 통해 DB에 저장된 데이터를 이어서 작성할 수 있다.

 

 

🛸 마치며

내가 현재 작성중인 티스토리도 포스팅 중인 글의 자동 저장이 수시로 되고, 임시저장을 하지 않은 상태에서 페이지를 이동한 후 다시 포스팅 페이지에 접근하면 '이전에 작성하던 글을 불러올까요?' 라는 confirm 창이 팝업되게 된다.

물론 내가 응용해본 디바운스 예시와 완전히 동일한 방식은 아니겠지만, 중요한 것은 쾌적한 UX를 위한 고민이라는 것이다. 티스토리가 사용자에게 쾌적한 UX를 제공하기 위한 방법으로 위와 같은 방식을 사용한 것처럼, 나도 디바운스를 통해 사용자에게 쾌적한 UX를 제공하기 위해 노력해야겠다.