주기 4 - 앱이 멈추는 이유: 스레드, 프로세스, 그리고 UI 동결의 원리
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 웹 개발자, 앱 성능 최적화에 관심 있는 중급/고급 개발자
핵심 요약
- JavaScript는 기본적으로 단일 스레드로 동작하며, 메인 스레드를 차단하면 UI가 동결됨
- Web Workers를 사용해 백그라운드 작업을 병렬 처리해야 UI 동결 방지 가능
- 이벤트 루프는 콜 스택과 콜백 큐를 모니터링해 비동기 작업을 처리하는 핵심 메커니즘
섹션별 세부 요약
1. **단일 스레드 vs. 프로세스**
- 브라우저는 각 탭을 별도 프로세스로 격리하지만, JavaScript는 하나의 메인 스레드에서 실행
- 무한 루프(
while (true)
)나 무거운 연산은 메인 스레드를 차단해 UI 동결 발생
2. **Web Workers의 역할**
- Web Workers는 메인 스레드와 독립적인 스레드로 실행되며, DOM 접근 불가
postMessage
메시지 통신으로 데이터 교환 가능
3. **비동기 처리와 이벤트 루프**
async/await
은 동기 처리가 아니며, 이벤트 루프에 의존- 이벤트 루프는 콜 스택이 비어 있을 때 콜백 큐에서 작업을 처리
4. **UI 동결 방지 전략**
- 작은 작업 조각으로 나누기
setTimeout(fn, 0)
또는requestIdleCallback
사용- Web Workers로 무거운 작업 백그라운드 이전
5. **DOM과 스레드 안전성**
- DOM API는 스레드 안전하지 않음 → 여러 스레드가 접근 시 버그 발생 가능성
- 렌더링은 메인 스레드만 처리 가능
결론
- UI 동결 방지를 위해 무거운 작업은 Web Workers로 이전하고, 작은 단위로 작업 분할해야 함
- 이벤트 루프는 비동기 작업 관리의 핵심 → 스레드 차단을 피해야 함
- 다음 주제: B-Tree와 검색 알고리즘 이해로 성능 최적화 기반 확장