20 lines
1.5 KiB
Markdown
20 lines
1.5 KiB
Markdown
---
|
|
# 💡 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`
|
|
--- |