๐Ÿ˜† My name is Ez : ์‰ฝ๋‹ค ์‰ฌ์›Œ ๊ฐœ๋ฐœlife

[Performance] : Debouncing(๋””๋ฐ”์šด์‹ฑ),Throttling(์“ฐ๋กœํ‹€๋ง) ๋ณธ๋ฌธ

โŒจ๏ธ Web Front-End/ETC

[Performance] : Debouncing(๋””๋ฐ”์šด์‹ฑ),Throttling(์“ฐ๋กœํ‹€๋ง)

์ด์ง€ํ‚˜ 2023. 7. 21. 22:57

๐Ÿคฆ๐Ÿปโ€โ™‚๏ธ ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ๋‹ค...

์˜ค๋Š˜์€ ์•„์นจ Front๊ฐœ๋ฐœ์ž ํšŒ์˜๋ฅผ ํ•˜๋‹ค.  ๋ฐฑ์•ค๋“œ ์‹œ๋‹ˆ์–ด๋ถ„๊ป˜์„œ input์— ํƒ€์ดํ•‘๋งŒ ํ•ด๋„ ๋ชจ๋“  ํ™”๋ฉด์—์„œ ๋žœ๋”๋ง์ด ๋œ๋‹ค๊ณ  ํ•ด์„œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋ฉด ์ข‹์„์ง€ ํ”„๋ก ํŠธ ์‹œ๋‹ˆ์–ด๋ถ„๊ป˜ ์งˆ๋ฌธ์„ ํ•˜์…จ๋‹ค.

๊ทธ๋•Œ ํ•˜์‹  ๋ง์”€์ด lodash - Debouncing์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข€ ์ค„์–ด๋“ค ๊ฑฐ๋ผ๊ณ  ํ•˜์…จ๋Š”๋ฐ ๋‚œ ๋ฌด์Šจ ๋ง์ธ์ง€ ๋ชฐ๋ผ์„œ ใ…Žใ…Ž ๋ฉ”๋ชจ์žฅ์— ๊ฐœ๋…๋งŒ ์จ๋‘์—ˆ๋‹ค. 

 

์ •๋ง ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ๋‹ค...  (๊ฐœ๋…์€ ๊ฐ€๋ณ๊ฒŒ ์ตํžˆ๊ณ  ์‹ค์ œ๋กœ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ •๋„ ์ž‘์„ฑํ•ด๋ณผ๊นŒ ํ•œ๋‹ค.) - lodash ์‚ฌ์šฉ ์˜ˆ์ •


 

1. Debouncing(๋””๋ฐ”์šด์‹ฑ)

 ๋””๋ฐ”์šด์‹ฑ์ด๋ž€?
์œ ์ €๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์ผ์ •ํ•œ ์‹œ๊ฐ„๊ฒฉ์ฐจ๋ฅผ ๋‘๊ณ , ์—ฐ์†์—์„œ ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ, ์ฒ˜์Œ์ด๋‚˜ ๋งˆ์ง€๋ง‰ ํ•œ ๋ฒˆ์— ํ•ด๋‹น ์š”์ฒญ(์ด๋ฒคํŠธ)์„ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค.

 

์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ์˜ ๊ธ€๋“ค์„ ์ฝ์–ด๋ณธ ๊ฒฐ๊ณผ

 ๋Œ€๋ถ€๋ถ„ ๊ฒ€์ƒ‰ํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์„ค๋ช…์œผ๋กœ ์•Œ๋ ค์ฃผ์…จ๋‹ค.

 

ใ„ท, ๋””, ๋”ฅ,๋””๋ฐ”,๋””๋ฐฉ,๋””๋ฐ”์šฐ,๋””๋ฐ”์šด,๋””๋ฐ”์šดใ……,๋””๋ฐ”์šด์‹œ,๋””๋ฐ”์šด์‹ฑ => ์š”๋ ‡๊ฒŒ ์ด๋ฒคํŠธ๊ฐ€ ์—ฐ์†์ ์œผ๋กœ ๋ฐœ์ƒํ•  ๋•Œ ๊ณ„์†ํ•ด์„œ ajax์š”์ฒญ์„ ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

์ด๋Ÿฐ ์“ธ๋ฐ์—†๋Š” ์š”์ฒญ์„ ๋ง‰๊ธฐ ์œ„ํ•ด์„œ ์ผ์ • ๊ฐ„๊ฒฉ์„ ๋‘๊ณ  ํ•œ ๋ฒˆ์— ๋ฌถ์–ด์„œ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์ฐฝ์— ๋””๋ฐ”์šด์‹ฑ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ ๋„คํŠธ์›Œํฌ ์š”์ฒญํƒญ๋งŒ ๋ด๋„ ๋ณด์ธ๋‹ค.

๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์ฐฝ

 

 

lodash์—์„œ debounce ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ดํŽด๋ณด๋ฉด

 

lodash ์„ค์น˜

npm install lodash
npm install @types/lodash

 

import _, { debounce } from "lodash"
 
const handleDebouce = _.debounce((text: string) => {console.log(text)}, 500);
 
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const text = e.currentTarget.value;
  handleDebouce(text);
};

 

lodash๋ฅผ import ํ•˜๊ณ  handleDebouce์—์„œ debouceํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์›ํ•˜๋Š” ์‹œ๊ฐ„๊ฐ„๊ฒฉ(ms ๋‹จ์œ„)๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์™„๋ฃŒ! 

์ฝ˜์†”์— ์ฐํžˆ๋Š” ์š”์†Œ๊ฐ€ ํ•˜๋‚˜๋กœ ๋ฌถ์—ฌ์„œ ํ‘œ์ถœ๋œ๋‹ค.


2. Throttling(์“ฐ๋กœํ‹€๋ง)

์“ฐ๋กœํ‹€๋ง?
์œ ์ €๊ฐ€ ์—ฐ์ด์–ด์„œ ์ด๋ฒคํŠธ ์š”์ฒญ์„ ํ•˜๋ฉด ์ผ์ •ํ•œ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์„ ๋‘๊ณ , ์—ฐ์†์ ์ธ ์ด๋ฒคํŠธ๋ฅผ ๋ฌด์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค. ๊ฒฐ๊ตญ, ์ผ์ •์‹œ๊ฐ„์˜ ๊ฐ„๊ฒฉ๋™์•ˆ ์š”์ฒญ๋œ ์ด๋ฒคํŠธ๋Š” ๋ฌด์‹œํ•˜๋Š” ๊ฒƒ์ด๋‹ค. (๋”œ๋ ˆ์ด ๋œ ์‹œ๊ฐ„ ๋™์•ˆ์˜ ์ด๋ฒคํŠธ๋Š” ๋ฌด์‹œ)

์“ฐ๋กœํ‹€๋ง ์Šคํฌ๋กค ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด์„œ ๋งŽ์ด ๊ธ€์„ ์“ฐ์…จ๋Š”๋ฐ

์‹ค์ œ๋กœ scroll ์ด๋ฒคํŠธ์— ์ฝ˜์†”๋กœ๊ทธ๋ฅผ ์ฐ์–ด์„œ ๋ณด๋ฉด ๋งˆ์šฐ์Šค ํœ ์„ ๋Œ๋ฆด ๋•Œ๋งˆ๋‹ค ์—„์ฒญ๋‚˜๊ฒŒ ์ฝ˜์†”์ด ์ฐํžˆ๋Š” ๊ฒƒ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

 

์“ฐ๋กœํ‹€๋ง์„ ์ฒ˜๋ฆฌํ•˜๋ฉด ์ผ์ • ์‹œ๊ฐ„ ๋™์•ˆ์€ ์ฝ˜์†”์ด ์ฐํžˆ์ง€ ์•Š๋Š”๋‹ค. (๋„ˆ๋ฌด ์‹ ๊ธฐ..)

 

const scrollEvent = () => {
    console.log("์Šค๋กœํ‹€๋ง ํ…Œ์ŠคํŠธ!!");
}

window.addEventListener('scroll', scrollEvent);

 

 

import _, { throttle } from "lodash"
 
const handleScrollDebouce = _.throttle((evnt:any) => { ... }, 500);

 

๋””๋ฐ”์šด์‹ฑ๊ณผ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ throttle๋งŒ ๋ณ€๊ฒฝํ•ด์„œ ์ ์šฉ์‹œํ‚ค๋ฉด ๋œ๋‹ค. 

 


3. ๊ฒฐ๋ก 

์•„์ง์€ ๋‘ ๊ฐ€์ง€ ๊ฐœ๋…์„ ๋“ฃ๊ณ  ์˜ค๋Š˜ ์ดํ•ดํ•œ ๋ฐ”๋ฅผ ์ •๋ฆฌํ•œ ์ •๋„๋ผ์„œ ์ดํ›„์— ์‹ค์ œ๋กœ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด์„œ ์ตœ์ ํ™”๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค.

์ด๋ฒคํŠธ ์ตœ์ ํ™” ์ด์™ธ์—๋„ ๋‹ค๋ฅธ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฉด์˜ ๋ฐฉ๋ฒ•๋„ ๋งŽ์„ ํ…Œ๋‹ˆ... ํ‹ˆํ‹ˆ์ด ๊ณต๋ถ€ํ•ด์„œ ์•Œ์•„๋‘ฌ์•ผ๊ฒ ๋‹ค.

 

( loadsh๋Š” ์ฒ˜์Œ ์ฝ”๋”ฉ ๋ฐฐ์šธ ๋•Œ, ์ •๋ ฌํ•  ๋•Œ ํ•œ๋ฒˆ ์จ๋ณด๊ณ  ๋”ฐ๋กœ ์จ๋ณธ ์ ์ด ์—†์—ˆ๋Š”๋ฐ ์—ญ์‹œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€๋‹ค. 

๋‚ด๊ฐ€ ๋ชจ๋ฅด๋ฉด ์—†๋Š” ๊ธฐ๋Šฅ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ์”์“ธํ•˜๋‹ค ใ…Žใ…Ž.. )