--- id: P-REINFORCE-AUTO-92BBDE category: "[[10_Wiki/πŸ’‘ Topics/Programming & Language]]" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - Throttling Debouncing" --- # [[Throttling Debouncing]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > 슀크둀, ν™”λ©΄ 크기 쑰절(Resize), 타이핑 λ“± 짧은 μ‹œκ°„ λ™μ•ˆ κ³Όλ„ν•˜κ²Œ λ°œμƒν•˜λŠ” μ‚¬μš©μž 이벀트의 μ‹€ν–‰ λΉˆλ„λ₯Ό μ œμ–΄ν•˜μ—¬ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ„±λŠ₯ 병λͺ© ν˜„μƒμ„ λ°©μ§€ν•˜λŠ” μ΅œμ ν™” κΈ°λ²•μž…λ‹ˆλ‹€. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) **1. ν•„μš”μ„± 및 μ„±λŠ₯ 영ν–₯** μ‚¬μš©μžμ˜ ν™”λ©΄ 크기 쑰절, ν‚€λ³΄λ“œ 타이핑, 마우슀 슀크둀 같은 μ΄λ²€νŠΈλŠ” μ•„μ£Ό 짧은 μ‹œκ°„μ— μˆ˜μ‹­~수백 λ²ˆμ”© μ—°μ†μ μœΌλ‘œ λ°œμƒν•©λ‹ˆλ‹€. 이 μ΄λ²€νŠΈλ§ˆλ‹€ 무거운 μ—°μ‚°μ΄λ‚˜ React의 μƒνƒœ μ—…λ°μ΄νŠΈλ₯Ό μˆ˜ν–‰ν•˜λ©΄ λ§€ ν‹±(tick)λ§ˆλ‹€ λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§μ΄λ‚˜ μž¬κ³„μ‚°μ΄ λ°œμƒν•˜μ—¬ μ‹¬κ°ν•œ μ„±λŠ₯ 병λͺ©(Bottleneck) ν˜„μƒμ„ μ΄ˆλž˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. **2. λ””λ°”μš΄μ‹± (Debouncing)** 연이어 λ°œμƒν•˜λŠ” 이벀트λ₯Ό ν•˜λ‚˜λ‘œ λ¬Άμ–΄, νŠΉμ • μ‹œκ°„ λ™μ•ˆ 좔가적인 μ΄λ²€νŠΈκ°€ λ°œμƒν•˜μ§€ μ•Šμ„ λ•Œ λ§ˆμ§€λ§‰μ— 단 ν•œ 번만 이벀트 ν•Έλ“€λŸ¬λ₯Ό μ‹€ν–‰ν•˜λŠ” κΈ°λ²•μž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ `lodash` 라이브러리의 `debounce` ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžκ°€ μ°½ 크기 μ‘°μ ˆμ„ 멈좘 λ’€ 200msκ°€ 지났을 λ•Œλ§Œ λ¦¬μ‚¬μ΄μ¦ˆ 둜직이 μ²˜λ¦¬λ˜λ„λ‘ μ œν•œν•  수 μžˆμŠ΅λ‹ˆλ‹€. **3. μŠ€λ‘œν‹€λ§ (Throttling)** μ΄λ²€νŠΈκ°€ μ—°μ†ν•΄μ„œ λ°œμƒν•˜λ”λΌλ„ μ •ν•΄μ§„ μ‹œκ°„ 간격 λ‹Ή μ΅œλŒ€ ν•œ λ²ˆμ”©λ§Œ ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ„λ‘ 보μž₯ν•˜λŠ” κΈ°λ²•μž…λ‹ˆλ‹€. (이전 λŒ€ν™” μ°Έκ³ : Web Worker둜 마우슀의 μœ„μΉ˜λ₯Ό μ§€μ†μ μœΌλ‘œ ν¬μ›Œλ”©ν•  λ•Œ, λ©”μ‹œμ§€ 큐에 κ³ΌλΆ€ν•˜κ°€ 걸리지 μ•Šλ„λ‘ μ£ΌκΈ°λ₯Ό μ‘°μ ˆν•˜λŠ” 데 μœ μš©ν•˜κ²Œ μ‚¬μš©λ©λ‹ˆλ‹€.) **4. κ΅¬ν˜„ μ‹œ λ²ˆλ“€ μ΅œμ ν™” (Tree Shaking) μ£Όμ˜μ‚¬ν•­** μ΄λŸ¬ν•œ 기법을 μ μš©ν•˜κΈ° μœ„ν•΄ `lodash`와 같은 μ™ΈλΆ€ μœ ν‹Έλ¦¬ν‹° 라이브러리λ₯Ό μ‚¬μš©ν•  λ•ŒλŠ” λ²ˆλ“€ 크기 μ΅œμ ν™”μ— μ£Όμ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€. `import _ from 'lodash';`와 같이 전체 라이브러리λ₯Ό 뢈러였면 λ²ˆλ“€ 크기가 크게 μ¦κ°€ν•˜λ―€λ‘œ, `import { debounce } from 'lodash-es';` λ˜λŠ” `import debounce from 'lodash-es/debounce';` ν˜•νƒœλ‘œ ν•„μš”ν•œ κ°œλ³„ ν•¨μˆ˜λ§Œ 가져와 트리 쉐이킹(Tree Shaking)이 μ™„λ²½νžˆ μ μš©λ˜λ„λ‘ μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** Programming & Language λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[React Performance Optimization]], [[Tree Shaking (λ²ˆλ“€ 크기 μ΅œμ ν™”)]], [[이벀트 ν¬μ›Œλ”© (Event Forwarding)]], [[λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§ λ°©μ§€]] - **Projects/Contexts:** [[μ‹€μ‹œκ°„ 검색 μž…λ ₯(Typing) μ§€μ—° 처리]], [[λ°˜μ‘ν˜• μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ(Resize) 이벀트 처리]], [[μ›Ή μ›Œμ»€ 톡신 μ§€μ—° μ΅œμ†Œν™”]] - **Contradictions/Notes:** μŠ€λ‘œν‹€λ§κ³Ό λ””λ°”μš΄μ‹±μ€ 무거운 연산을 쀄이고 ν”„λ ˆμž„ λ“œλžμ„ λ§‰μ•„μ£Όμ§€λ§Œ, μ„€μ •ν•œ λŒ€κΈ° μ‹œκ°„μ΄ λ„ˆλ¬΄ κΈΈλ©΄ ν™”λ©΄ μ—…λ°μ΄νŠΈκ°€ λŠ¦μ–΄μ Έ μ‚¬μš©μžμ—κ²Œ λŠκΈ°λŠ” λŠλ‚Œμ„ 쀄 수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ μž‘μ—…μ˜ 성격(예: 즉각 λ°˜μ‘μ΄ ν•„μš”ν•œ λ“œλž˜κ·Έ, 멈좘 ν›„ λ°˜μ‘ν•΄λ„ λ˜λŠ” μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ)에 λ§žμΆ”μ–΄ μ μ ˆν•œ μ§€μ—° μ‹œκ°„μ„ νƒ€ν˜‘ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. --- _Last updated: 2026-04-14_ - Raw Source: [[00_Raw/2026-04-20/Throttling & Debouncing.md]] ---