웹 애플리케이션에서의 스레드와 프로세스 이해: 앱 충돌 원인 및 해결 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 웹 개발자, 프론트엔드 개발자
핵심 요약
- JavaScript는 기본적으로 단일 스레드로 동작하며,
main thread에서의 장시간 작업은 UI 동결을 유발 - Web Workers 사용 시 병렬 처리 가능하지만 DOM 접근 불가능
async/await은 비동기 처리를 제공하지만 실제 병렬성은 지원하지 않음- 이벤트 루프는
call stack과callback queue를 모니터링하여 작업을 순차 처리
섹션별 세부 요약
1. 주요 개념: 단일 스레드와 이벤트 루프
- JavaScript는 단일 스레드로 동작하며,
main thread에서의 무한 루프나 복잡한 계산은 UI 동결 - 이벤트 루프는
call stack이 비어 있을 때callback queue에서 작업을 실행 fetch()호출 시 비동기 처리 되지만,then()실행은 이벤트 루프가 관리
2. 프로세스와 스레드 구분
- 프로세스는 독립적인 메모리 공간을 가지며, 탭별로 분리되어 있음
- 스레드는 프로세스 내에서 실행되며, Web Workers를 통해 별도 스레드 생성 가능
- Web Workers는 메모리 공유 불가능,
postMessage를 통해 통신
3. 비동기 처리와 병렬성
async/await은 비동기 처리를 제공하지만, 실제 병렬성은 지원하지 않음setTimeout(fn, 0)또는requestIdleCallback을 사용하여 작업 분할 가능
4. UI 동결 예방 방법
- 작업 분할: 장시간 작업을 작은 조각으로 나누기
- Web Workers 활용: CPU 집약적 작업을 별도 스레드로 이관
- 이벤트 루프 공간 확보: 무한 루프, 복잡한 계산 회피
5. Web Workers의 한계
- DOM API는 스레드 안전하지 않음 → Web Workers는 DOM 접근 불가
- 렌더링은 main thread에 의존 → UI 업데이트는 main thread에서만 가능
결론
- UI 동결 방지를 위해
Web Workers사용, 작업 분할, 이벤트 루프 이해가 필수적 - async/await는 비동기 처리를 제공하지만, 병렬성은 보장하지 않음 → 주의 필요
- DOM 작업은 main thread에 집중하고, 계산 헤비 작업은 Web Workers로 이관하여 성능 최적화