1.5 KiB
1.5 KiB
💡 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 또는 별도의 백그라운드 프로세스로 로직을 분리하여 처리해야 합니다.