앱이 멈추는 이유: JavaScript 스레드와 Web Workers로 UI 동결 방지

주기 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와 검색 알고리즘 이해로 성능 최적화 기반 확장