์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- nextjs
- ํ๊ณ ๋ก
- typescript
- backend
- frontend
- ํฐ์คํ ๋ฆฌ
- javascript
- ๊ฐ๋ฐ๋ธ๋ก๊ทธ
- ๊ฐ๋ฐ์
- react
- Today
- Total
๐ My name is Ez : ์ฝ๋ค ์ฌ์ ๊ฐ๋ฐlife
[Performance] : Debouncing(๋๋ฐ์ด์ฑ),Throttling(์ฐ๋กํ๋ง) ๋ณธ๋ฌธ
[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๋ ์ฒ์ ์ฝ๋ฉ ๋ฐฐ์ธ ๋, ์ ๋ ฌํ ๋ ํ๋ฒ ์จ๋ณด๊ณ ๋ฐ๋ก ์จ๋ณธ ์ ์ด ์์๋๋ฐ ์ญ์ ๋ค์ํ ๊ธฐ๋ฅ์ ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ค.
๋ด๊ฐ ๋ชจ๋ฅด๋ฉด ์๋ ๊ธฐ๋ฅ์ด๋ผ๋ ์๊ฐ์ด ์์ธํ๋ค ใ ใ .. )
'โจ๏ธ Web Front-End > ETC' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ETC] : ๊ณตํต์ปดํฌ๋ํธ? ์? (0) | 2023.08.04 |
---|---|
[Day.js] : Moment.js (Day.js๋ก ๋ณ๊ฒฝ) (0) | 2023.07.24 |
[StoryBook] : ์คํ ๋ฆฌ๋ถ์ด ๋ญ์ง? (0) | 2023.07.22 |