Make Your React App Fast with Web Workers
- 브라우저의 JavaScript는 단일 스레드에서 실행되므로, 무거운 작업은 UI를 멈추게 합니다. 🧵
- 웹 워커는 별도의 스레드에서 코드를 실행하여 UI가 멈추지 않고 앱을 부드럽게 유지합니다. 🚀
- 스레드는 코드 실행 경로이며, JavaScript는 기본적으로 하나의 스레드만 가집니다. 🛣️
- UI 렌더링, 사용자 입력, 모든 JS 로직을 단일 스레드가 처리하여 무거운 작업 시 사이트가 응답하지 않게 됩니다. 🥶
- 웹 워커는 메인 스레드의 작업을 대신 처리하고 결과를 돌려주는 원격 비서와 같습니다. 🧑💻
- 메인 스레드는 워커에게 메시지를 보내고, 워커는 작업을 수행한 후 결과를 다시 메인 스레드로 보냅니다. 📩
- 무거운 계산을 메인 스레드에서 실행하면 UI가 멈추지만, 웹 워커를 사용하면 UI가 계속 작동합니다. ✅
- 대용량 데이터 파싱, 이미지/비디오 처리, 복잡한 계산 등 50ms 이상 걸리는 CPU 집약적 작업에 적합합니다. ⏱️
- 빠른 작업, DOM 접근이 필요한 UI 관련 작업, API 대기(I/O 바운드) 등에는 적합하지 않습니다. 🚫
- CPU 집약적이고 UI 버벅임을 유발하는 작업에는 웹 워커를, 비동기적이지만 블로킹하지 않는 작업에는
async/await를 사용합니다. 💡
데브허브 | DEVHUB | Make Your React App Fast with Web Workers