--- # πŸ’‘ Lesson Learned: Web Workerλ₯Ό μ΄μš©ν•œ κ³ μ„±λŠ₯ μ•„ν‚€ν…μ²˜ 섀계 (Performance) ## 🎯 문제 상황 (The Problem) ν…ŒνŠΈλ¦¬μŠ€ κ²Œμž„κ³Ό 같이 **맀우 높은 λΉˆλ„(High Frequency)**둜 μƒνƒœ λ³€ν™”κ°€ λ°œμƒν•˜λŠ” μ‹€μ‹œκ°„ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ React의 메인 μŠ€λ ˆλ“œμ—μ„œ μ²˜λ¦¬ν•  경우, UI μ—…λ°μ΄νŠΈμ™€ 물리 계산이 μΆ©λŒν•˜μ—¬ **ν”„λ ˆμž„ λ“œλ‘­(Jank)** ν˜„μƒμ΄λ‚˜ μ„±λŠ₯ μ €ν•˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. ## πŸ”¬ κ·Όλ³Έ 원인 (Root Cause) κ²Œμž„ μ—”μ§„ λ‘œμ§μ€ CPUλ₯Ό 맀우 많이 μ‚¬μš©ν•©λ‹ˆλ‹€. 이 무거운 계산을 메인 μŠ€λ ˆλ“œμ—μ„œ μˆ˜ν–‰ν•˜λ©΄, λΈŒλΌμš°μ €μ˜ UI μ—…λ°μ΄νŠΈ 루프(`requestAnimationFrame`)와 μΆ©λŒν•˜μ—¬ μ‚¬μš©μžμ—κ²Œ λΆ€λ“œλŸ½μ§€ μ•Šμ€ κ²½ν—˜(Poor UX)을 μ œκ³΅ν•˜κ²Œ λ©λ‹ˆλ‹€. ## βœ… ν•΄κ²°μ±… (The Solution) **Web Worker**λ₯Ό μ‚¬μš©ν•˜μ—¬ κ²Œμž„ μ—”μ§„ 둜직 전체λ₯Ό **메인 μŠ€λ ˆλ“œμ—μ„œ μ™„μ „νžˆ 뢄리(Isolate)** ν–ˆμŠ΅λ‹ˆλ‹€. * **원리:** Web WorkerλŠ” λ³„λ„μ˜ λ°±κ·ΈλΌμš΄λ“œ μŠ€λ ˆλ“œμ—μ„œ λ™μž‘ν•˜λ―€λ‘œ, 아무리 λ³΅μž‘ν•œ 계산을 해도 메인 μŠ€λ ˆλ“œμ˜ UI λ Œλ”λ§μ—λŠ” 영ν–₯을 μ£Όμ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ## πŸ’‘ κ΅ν›ˆ (Lesson Learned) > **"μ„±λŠ₯ 병λͺ© ν˜„μƒμ€ μ’…μ’… 'μŠ€λ ˆλ”©(Threading)'의 λ¬Έμ œμ΄λ‹€."** > μ‹€μ‹œκ°„μœΌλ‘œ 높은 μ—°μ‚°λŸ‰μ΄ μš”κ΅¬λ˜λŠ” λͺ¨λ“  μ‹œμŠ€ν…œμ€, λ°˜λ“œμ‹œ Web Worker λ˜λŠ” λ³„λ„μ˜ λ°±κ·ΈλΌμš΄λ“œ ν”„λ‘œμ„ΈμŠ€λ‘œ λ‘œμ§μ„ λΆ„λ¦¬ν•˜μ—¬ μ²˜λ¦¬ν•΄μ•Ό ν•©λ‹ˆλ‹€. ## πŸ”— κ΄€λ ¨ ν‚€μ›Œλ“œ `Web Worker`, `Concurrency`, `High-Frequency Updates`, `Performance Optimization` ---