당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 알고리즘
  • 회고
  • graphql
  • next.js
  • 코딩 부트캠프
  • HTML
  • react
  • javascript
  • JS
  • 자바스크립트
  • typescript
  • refreshtoken
  • 배포
  • React-hook-form
  • emotion
  • 배열
  • 팀 프로젝트
  • 리액트
  • 부트캠프
  • 프로그래머스
  • algorithm
  • 코드캠프
  • javascrpit
  • CSS
  • 코딩
  • 프론트엔드
  • ssg
  • 팀프로젝트
  • 팀플
  • 공통 컴포넌트

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

Throttling & Debouncing
프론트엔드✏️/코드캠프

Throttling & Debouncing

2022. 6. 6. 00:55
728x90
반응형

 

 쓰로틀링과 디바운싱은 일종의 프로그램 기법이다. 

둘의 차이는 이벤트를 언제 처리하느냐에 있다.

 

Throttle : 조르다, 압력 조절. 

요청, 이벤트가 너무 많이 발생할 때, 처음 이벤트만 처리하고 일정시간 동안 그 뒤의 요청과 이벤트는 무시하는 방식

 

Debouncing : 전자공학쪽에서 bouncing개념과 함께 쓰이는 것 같다. 코딩에서 디바운싱은 요청, 이벤트에 대한 작업이 너무 자주 실행되지 않도록 함수가 호출되는 것을 제한하는 프로그래밍 기법이다. 딜레이를 주고 그 딜레이가 임계값에 도달하면 그때 함수 처리를 한다.

 

즉, 사용자가 입력을 중지한 후 x초 후 에만 검색을 수행하게 한다 -> debouncing 

사용자가 입력하는 동안 x초 마다만 검색을 수행한다 -> throttling

 

자동 완성 기능이 있는 검색창을 구현할 때, 그 리스트를 보여주기 위해서는 타이핑을 할 때마다 API 요청을 해야 하는데 이런 방식은 너무 과도한 API 요청을 발생시킨다.  디바운싱을 사용하면 함수 호출은 여러번 일어나지만, 일정 시간의 마지막 호출에 대해서만 API를 요청한다. 

 

리액트에서 타이머, useCallback을  이용하여 구현할 수 있다. 

 

간단하게 구현해보는 건...! 다음주에 해보겠다. 진짜로. 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글

220607 프론트엔드 부트캠프 28일차 : 다 함수야!, graphql 궁금, globalstate  (0) 2022.06.07
220606 프론트엔드 부트캠프 27일차 : 이미지 여러개, 검색, 디바운싱, 쓰로틀링  (0) 2022.06.07
Shallow Routing  (0) 2022.06.05
Object.keys(), values, entries, assign  (0) 2022.06.05
220603 프론트엔드 부트캠프 중간고사  (0) 2022.06.05
    '프론트엔드✏️/코드캠프' 카테고리의 다른 글
    • 220607 프론트엔드 부트캠프 28일차 : 다 함수야!, graphql 궁금, globalstate
    • 220606 프론트엔드 부트캠프 27일차 : 이미지 여러개, 검색, 디바운싱, 쓰로틀링
    • Shallow Routing
    • Object.keys(), values, entries, assign
    당근먹는하니
    당근먹는하니

    티스토리툴바