# debounce

77개의 포스트
post-thumbnail

[실전프로젝트] 검색기능 구현

Debounce와 Throttle Debounce : 이벤트의 마지막 이벤트만 인식 Throttle : 이벤트가 발생하고서 일정 주기마다 이벤트가 발생되도록한다. 사용자가 검색하려고 할때 검색하는 단어 타이핑을 마쳤을 때 api요청을 하는게 자연스럽다. 스로틀의 경

2022년 5월 8일
·
0개의 댓글
post-thumbnail

♾️ 무한 스크롤링 ( + 스로틀링 )

무한 스크롤링, 스로틀링, 디바운스 적용 및 정리

2022년 5월 6일
·
0개의 댓글

22.05.04 (수) Debounce, Throttle, Rx.js

Throttle 와 Debounce 는 자주 사용 되는 이벤트나 함수 들의 실행되는 빈도를 줄여서, 성능 상의 유리함을 가져오기 위한 개념이다 > keyboard 가 한자씩 입력될 때마다, api 로 데이터를 가져오게 되면, 사용자의 의도와 무관한 요청 이 자주 발생되는데, 이를 줄이기 위해, 입력이 끝난후나, 입력되는 중간 중간 200ms 마다 api ...

2022년 5월 4일
·
0개의 댓글

debounce와 throttle

개인노션 작성 글(2022.02.05) 블로그로 이전 중입니다.검색어에 대한 연관검색어를 불러온다고 하면, onchange의 경우 ㄱ,가,감 이런 순서대로 진행될 것입니다.하지만 모든 순서에서 서버에 접근해 데이터를 가지오 오면 엄청나에 요청이 많아질 것입니다.이러한

2022년 4월 22일
·
0개의 댓글

debounce와 throttle

개인노션 작성 글(2022.02.05) 블로그로 이전 중입니다.검색어에 대한 연관검색어를 불러온다고 하면, onchange의 경우 ㄱ,가,감 이런 순서대로 진행될 것입니다.하지만 모든 순서에서 서버에 접근해 데이터를 가지오 오면 엄청나에 요청이 많아질 것입니다.이러한

2022년 4월 22일
·
0개의 댓글

쓰로틀(Throttle)과 디바운스(Debounce)

쓰로틀(Throttle)과 디바운스(Debounce)는 자주 사용되는 이벤트나 함수들(input, scroll 등)의 실행되는 빈도를 줄여 성능상의 유리함을 가져오기 위한 개념입니다.쓰로틀과 디바운스의 예제를 보고 설명하겠습니다.먼저 쓰로틀(throttle)은 여러번

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[WEB] 느림의 미학 - Debounce, Throttle

최적화를 위해 실행 시점을 조절하는 Debounce, Throttle 개념을 소개합니다

2022년 4월 17일
·
0개의 댓글

[JS] 디바운스, 쓰로틀 (Debounce, Throttle) with lodash

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것검색어 자동완성기능을 구현하는 경우를 생각해보자.ㄷ 디 딥 디바 디방 디바우 디바운 디바운ㅅ 디바운스'디바운스' 검색하는데 쓸데없이 api 호출 9번하면 자원낭비 넘 심하고요?이 때 와다다 치

2022년 4월 15일
·
0개의 댓글
post-thumbnail

[React] lodash-debounce 검색 폼 성능 향상

onChange 이벤트는 input에 변화가 감지될 때마다 호출된다. e.target.value을 console에 찍어보면 자음, 모음까지 나뉘어진 단위로 출력된다.해리포터를 검색할 때 'ㅎ', '핼', '해ㄹ' 이런 검색어는 필요가 없다. 이러한 쿼리를 모두 API에

2022년 4월 14일
·
0개의 댓글

디바운스 & 스로틀

디바운싱과 스로틀 모두 DOM이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 이벤트를 제어하는 방법이다. ex) 스크롤 이벤트 => 매번 스크롤을 움직일때마다 이벤트가 발생하고 이벤트에 대한 콜백이 발생하며 이를 모두 실행하면 성능이 저하될 것이다. 트위터 웹

2022년 4월 11일
·
0개의 댓글

[JavaScript] 디바운스(Debounce) vs 스로틀(Throttle)

✅ 공통점 ●짧은 시간에 여러번 발생하는 이벤트를 그룹화해서 , 과도한 이벤트 호출을 방지 ● 엄청나게 빠른속도로 클릭을 여러번 하기 ● 검색창에 키보드로 입력하기 ● 스크롤바를 위아래로 쭉쭉 움직이기 ● 창을 리사이징 하기 ● 등등...

2022년 4월 10일
·
0개의 댓글

debounce VS throttle

동일한 이벤트가 여러번 반복적으로 발생했을 때 가장 최근에 발생한 이벤트만 처리하는 방법 예를 들어 debounce 에 시간을 1초로 설정하고 이벤트를 0.5초간격으로 100번 발생시킬 경우 이벤트 사이 시간이 1초보다 작기 때문에 마지막 100번째 이벤트만 처리하게

2022년 4월 3일
·
0개의 댓글

Jetpack Compose에서 다중 클릭 방지

https://medium.com/@al-e-shevelev/how-to-prevent-multiple-clicks-in-android-jetpack-compose-8e62224c9c5e코루틴에 기반을 둔 방법이 있다. 이 방식에서는 SharedFlow를 생성

2022년 3월 21일
·
0개의 댓글
post-thumbnail

submit event handler에 debounce를 적용하여 서버와의 통신 최소화하기

현재 구현되어있는 상황은 다음과 같다.input에 포커스되어있는 상황에서 enter를 누르거나, submit버튼을 누르면 onsubmit이벤트가 발동되어 서버에 저장되도록 구현했다. 그리고 성공적으로 데이터베이스에 저장되었다면 snackbar형식으로 알림을 띄워준다.이

2022년 3월 21일
·
0개의 댓글
post-thumbnail

읽은 좋은 글들 (~22.3.12)

메일링, 블로그, 구글링 등을 통해 읽은 좋은 글들을 모아놓은 글이다.

2022년 3월 13일
·
0개의 댓글
post-thumbnail

[프로그레스 바] ProgressBar 개념

prgressbar(진행막대)는 작업이 어느정도 진행이 되었는지를 보여줄 때 사용하는 컴포넌트입니다. 파일의 업/다운로드나 로딩이 오래걸리는 페이지를 여는 경우 작업이 완료되려면 어느정도 걸리는지 등 진행상태를 사용자가 시각적으로 볼 수 있게 도와줍니다.스크롤을 내리면

2022년 3월 2일
·
0개의 댓글

[리액트] 무한 스크롤 - throttle, debounce

무한스크롤을 구현하는 방법은 크게 두가지.스크롤 위치에 따라 구현하는 방법스크롤 위치 + throttle(or debounce) 사용먼저 스크롤의 위치를 감지해보자화면 전체의 높이 - (스크롤의 위치 높이 + 위에서부터 현재 화면의 높이)= 아래에 남은 높이아래에 남은

2022년 2월 27일
·
0개의 댓글

Axios를 이용한 JWT Refresh 자동화(with. debounce)

화면에서 페이지가 전환될 때 각각의 컴포넌트들은 생각보다 많은 네트워크 요청을 보낸다. 만약 Token이 만료되어있다면, 각각의 컴포넌트 요청에서 토큰을 갱신하고 기존 네트워크 요청에 연결해야하는데... 적어도 Token Refresh 요청만이라도 통합할수 없을까?

2022년 2월 25일
·
2개의 댓글
post-thumbnail

Combine Cheat Sheet

Apple에서 공개한 API인 Combine. 이제 Rx에서 Combine으로 많이 넘어간다고 한다. 무엇을 하는 것인지, 왜 좋은지, 바로 써먹기 위한 팁은 무엇이 있는지 알아본다.

2022년 2월 16일
·
0개의 댓글

debounce(디바운싱), throttle(쓰로틀링)

JavaScript 라이브러리이며, 배열, 숫자, 객체, 문자열 등으로 작업하는 번거로움을 없애 복합적인 함수 생성에 더욱 쉽게 만들 수 있어 js의 코드를 줄일 수 있고, 빠른 작업이 가능하다.https://www.npmjs.com/package/lodash

2022년 2월 16일
·
0개의 댓글