💻 TIL 18 | 디바운스(Debounce)

이번 챕터는 디바운스에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

디바운스

어떤 내용을 입력하다가 특정 시간 동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청을 하는 방법이다.

 $target.addEventListener("keyup", (e) => {
		debounce(e.target.value);
  });

이렇게 keyup이벤트가 발생할 때 debouce를 호출해주면

let timer;
export const debounce = (value) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log("input 요청이 들어왔습니다.", value);
  }, 2000);
};

1. 이벤트가 발생할 때마다 debounce를 호출하는데 이 때 마다 timer를 초기화시킨다.
2. 마지막 이벤트에서만 동작 해야 하므로 setTimeout을 통해 이벤트를 지연시킨다.
3. 키보드 입력이 발생하면 2초 기다리다가가 다시 키보드 입력이 발생하면 시간을 초기화하고 2초를 기다리는 형식으로 진행되다가 마지막 이벤트가 발생하면 2초 뒤에 이벤트가 실행된다.

😰 어려웠던 내용

디바운스,, 커스텀 이벤트,, 그리고 전부^^

🔥 오늘의 느낀점

노션 클로닝을 시작하기 전 16일차까지 강의를 다 들었다. 하지만!!😡 컴포넌트 분리, fetch, route, history.. 등등 내 것으로 만들지 못하였다..ㅠㅠ 오늘 강의 중간부터는 코드를 그냥 따라치는 것 같은..

노션 클로닝을 시작하기 전 자동 완성 편집기를 전체적으로 복습하고 시작해야겠다. 면접 스터디도 딥 다이브 스터디도 노션 클로닝과 병행할 수 있을지 너무 걱정된다😂 너무 미리 겁먹는건가요,,?😞 그래도 지금까지 꾸준히 잘 해왔으니 컨디션 조절도 공부도 화이팅~!💕

🗣 오늘의 TMI

이 글을 보는 모든 프롱이분들께.. 매니저님과 면담 기회 꼭 잡으세요!😘 값진 시간이었어요!

Refer

프로그래머스 데브코스
디바운스와 쓰로틀링에 대해 알아보자!

오늘의 내용 정리

데브코스 Day16