# Throttling & Debouncing
Debouncing & Throttling
Debouncing 디바운싱: 특정 함수를 여러번 계속해서 호출했을을시 마지막 호출로 부터 지정한 시간이 지났을때 실행을 함 onChange를 사용하여 State값을 변경할때 한글자 한글자 변경시 마다 리렌더링이 일어나서 비효율적이다 Debouncing을 사용하면 이 리렌더링을 줄일수 있다 Lodash라이브러리를 사용했다 위의 코드는 input을 입력시 onChange가 일어나게 되고 getDebounce이 호출된다 그럼 이 디바운스는 0.5초간 다음 호출이 없으면 getDebounce함수를 실행하게 되는것이다 여기서 0.5초가 지나기 전에 다시 입력을 해서 onChange가 일어나면 다시 0.5초부터 시작한다 위 gif는 검색어를 입력후 디바운싱에 의해 0.5초후 해당 데이터
한 주의 정리 - WIL
이번주(2월 27일 ~ 3월 5일) 백엔드와 프론트엔드가 프로젝트를 만들고 서로 협업을 경험하는 시간이었다. 이번주 Weekend, I Learend **1. 리엑트 쿼리를 사용하면서 staleTime이라는 것을 알게 되었다. staleTime은 리엑트 쿼리가 캐싱한 데이터가 stale하다고 판단해 서버에서 데이터를 refetch해오는 것을 늦춰준다. ** 2. refetchOnWindowFocus는 데이터가 stale 상태일 경우 원도우 포커싱 될 때마다 refetch를 실행하는 옵션이다. 기본적으로 true로 되어있지만, false로 바꾸면 포커싱이 되어도 refetch를 하지 않는다. **3. debounce란 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 헨들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간이 경과한 후에 한번만 호출하는 것이다.가령 예를 들면 일력값 실시간 검색 혹은 화면의 resize이벤트가 있다. Throttling이란 시간 간
리엑트 - throttling & debouncing
3월 1일 여정 52일차이다. 오늘의 Today I Learned 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이 바로 쓰로틀링과 디바운싱이다. 이러한 개념은 이벤트 발생과 그에 따른 이벤트헨들러 콜백함수를 다루는데 있어 중요한 개념이다. 특히 클릭처럼 단순한 이벤트가 아닌 스크롤 이벤트인경우 마우스 롱링으로도 몇백번의 이벤트가 발생한다. 그러면 계속 서버에 api요청을 보내게 되고, 서버 과부화가 일어나게 된다. 그럼 debounce란 정확히 무엇일까? 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하는 것이 바로 debounce이다. 가령 예를 들면 일력값 실시간 검색 혹은 화면의 resize이벤트가 있다. 
Throttling & Debouncing
free-board review 이미지 업로드를 하기 위한 폴더구조를 만들어 주었다. uploadFile =>Uploads01.container, Uploads01.presenter, Uploads01.queries, Uploads01.styles, Uploads01.types, Uploads01.validation >validation 파일은 이미지 업로드의 사진크기와 용량을 규제하기 위해서 만든 파일이다. 
Throttling & Debouncing
디바운스와 쓰로틀은 짧은시간 연속으로 발생하는 이벤트를 그룹화하여 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다. 이는 모든 변화를 감지하여 바로 바로 렌더하는 것이 아니라, 일정 조건하에 호출 빈도를 줄여 서버의 성능 개선에 도움을 줄 수 있다. Throttling > 쓰로틀링(Throttling)이란 마우스 이동, 스크롤 이동을 감지하면 특정 이벤트를 실행시키고, 이동이 멈출때까지, 이벤트가 재실행 되지 않도록 막기 위해 사용한다. 즉, 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는데 이를 돕는 라이브러리로 lodash가 있다. 사용예시: 무한스크롤 스크롤을 내리는 매 순간 리패치가 되지 않고 일정구간 스크롤 후 다시 리패치된다. Debouncing > 디바운싱(Debouncing)은 이벤트가 반복되어 호출되는 동안 특정시간이 지날때까지 이벤트가 반복적으로 일어나지 않도록 돕는다. 즉 다음 함수가 실행되기 전 일정 시간을 대기한다
24) Throttling & Debouncing
search debouncing onClickSearch에 있는 refetch를 onChangeSearch 에 refetch한다. 하지만 네트워크 창을 보면 changeEvent가 될 때마다 fetch가 되어 많은 데이터가 들어간다. onChange가 모두 입력되고 1초정도 쉴 때 fetch를 해주면 효율적으로 데이터를 불러올 수 있다. 이것을 디바운싱이라 한다. 디바운싱: 특정 시간을 기준으로, 해당 시간 내에 요청된 내용들은 무시 디바운싱 해주는 라이브러리: import _ from 'lodash' 를 해