본문 바로가기

JS155

디바운스 함수에 대하여 보통 API 콜을 처리하기 위해서 디바운스나 쓰로틀링을 처리하는 경우가 많은데 이글은 그 중 디바운스 함수에 대해서 간단히 분석하고 정리 한 내용이다. 디바운스와 쓰로틀링은 공통적으로 여러 이벤트를 묶어서 한번에 처리하는 방법이다. 그중 디바운스의 경우 사용자 이벤트를 일정한 간격으로 그룹화해서 그중 한번의 입력만을 처리하는 기법을 말하며 쓰로틀링의 경우 일정기간동안 첫 한번의 입력만 수행하고 나머지 기간동안 입력을 무시하는 기법을 말한다. 자바스크립트에서 디바운스 기능을 간단히 구현해보면 보통 이런 코드가 나온다. function debounce(func, wait) { let debounceId = null; const debounced = (...args) => { if (debounceId !==.. 2023. 3. 24.
[JS]스와이프 기능을 만들어보며. 바닐라 js로 다양한 기능을 간단히 만들어보는 js-util 프로젝트의 10번째 모듈로 간단한 스와이프 슬라이드를 만들어 보았다. https://github.com/yoonjonglyu/js-util GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util html, css, js, vanillajs, animation, module & util - GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util github.com 회사에서 자주 쓰이는 프론트엔드 기능중 하나로 슬라이드 기능이 없는 스와이프 기능이 있다. 해당 기능을 구현.. 2022. 7. 2.
[프로그래머스][LEVEL3] 110 옮기기 # 문제 원문 https://programmers.co.kr/learn/courses/30/lessons/77886 코딩테스트 연습 - 110 옮기기 0과 1로 이루어진 어떤 문자열 x에 대해서, 당신은 다음과 같은 행동을 통해 x를 최대한 사전 순으로 앞에 오도록 만들고자 합니다. x에 있는 "110"을 뽑아서, 임의의 위치에 다시 삽입합니다. 예를 programmers.co.kr 0과 1로 이루어진 어떤 문자열 x에 대해서, 당신은 다음과 같은 행동을 통해 x를 최대한 사전 순으로 앞에 오도록 만들고자 합니다. x에 있는 "110"을 뽑아서, 임의의 위치에 다시 삽입합니다. 예를 들어, x = "11100" 일 때, 여기서 중앙에 있는 "110"을 뽑으면 x = "10" 이 됩니다. 뽑았던 "110".. 2022. 4. 1.
[JS] 전역 상태관리 스토어를 만들어보며. 바닐라 js로 다양한 기능을 간단히 만들어보는 js-util 프로젝트의 9번째 모듈로 전역 상태관리 스토어를 만들어보았다. https://github.com/yoonjonglyu/js-util GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util html, css, js, vanillajs, animation, module & util - GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util github.com 바닐라 js로 컴포넌트 단위나 페이지 단위 개발을 진행 할 경우 CSR방식의 SPA 웹애플리케이션의 경우 전역 상태.. 2022. 3. 30.

티스토리툴바