[개발지식] 웹 워커 web Worker 와 서비스 워커 service Worker - 프론트엔드 대용량 데이터 처리 방식

버퍼(Buffer), 스트림(Stream), 스로틀(Throttle)의 목적과 처리 방식을

실무 예시와 표로 정리, 단점·사용처를 비교

실전 코드와 아키텍처 적용 팁

---

목차

1. 웹워커
   1. 개념
   2. 필요성
   3. 특징 요약
   4. 사용 예시
2. 서비스워커
   1. 개념
   2. 핵심 역할
   3. 생명주기
   4. 특징
   5. 사용 예

---

웹 워커와 서비스 워커

 

구분	Web Worker	Service Worker
목적	UI를 막지 않고 무거운 연산을 병렬 처리	네트워크 제어 + 오프라인 + 백그라운드 작업
실행 위치	브라우저 (페이지 내부)	브라우저 (페이지 외부, 백그라운드)
페이지와의 관계	특정 페이지에 종속	페이지와 독립적
생성 시점	JS 코드에서 명시적으로 생성	브라우저에 등록(register) 후 이벤트 기반 실행
종료 시점	페이지 종료 시 함께 종료	페이지 닫혀도 유지 가능 (필요 시 깨어남)
DOM 접근	❌ 불가	❌ 불가
window 객체	❌ 없음	❌ 없음
통신 방식	postMessage	postMessage, Fetch 가로채기
주요 역할	계산, 파싱, 압축, 암호화 등 CPU 작업	캐싱, 오프라인, 푸시 알림, 백그라운드 동기화
네트워크 제어	❌ 불가	✅ 가능 (fetch 이벤트 가로채기)
캐시 제어	❌ 불가	✅ Cache API 사용
오프라인 지원	❌ 불가	✅ 핵심 기능
푸시 알림	❌ 불가	✅ 가능
HTTPS 필요 여부	❌ 불필요	✅ 필수 (localhost 예외)
사용 난이도	비교적 낮음	비교적 높음 (라이프사이클 복잡)

웹 워커

개념

• 브라우저의 “메인 스레드(UI스레드)”와 분리된 작업 전용 스레드
  • 브라우저에서 메인(UI) 스레드와 분리된 실행 컨텍스트를 만들어 무거운 js 작업을 UI 렌더링/입력 처리와 분리하는 기능
• UI 멈춤 없이 연산 처리

필요성

• js는 기본적으로 싱글 스레드 → 무거운 연산 시
  • 클릭 안 됨
  • 스크롤 끊김
  • 렌더링 지연 발생
• Web Worker는 이 작업을 백그라운드로 분리

특징 요약

• DOM에 접근 X (window/document 없음)
• 메인 스레드와는 메시지(postMessage)로만 통신
  • 메시지 : 서로 다른 실행 컨텍스트(스레드/워커/페이지) 사이에서 데이터를 주고받기 위한 통신 단위 (이벤트 기반 데이터 전달)
• 계산 전용
• 상태 오래 유지는 부적
• 큰 데이터 자주 주고 받으면 직렬화/복사 비용이 생김
  • ArrayBuffer 같은 것은 transferable 로 소유권 이동하면 비용 줄일 수 있음

사용 예

• 대용량 JSON 파싱
• 이미지 처리
• 암호화/해시 계산
• 실시간 데이터 가공
• 차트용 데이터 전처

서비스 워커

개념

• 웹 페이지 네트워크 요청을 가로채는 브라우저 백그러운드 스크립트
• 웹의 프록시 서버 + 백그라운드 데몬 → 같은 존재

핵심 역할

• 요청 가로채기 (fetch)
• 캐싱 전략 적용
• 오프라인 동작 구현
• 푸시 알림 수신
• 백그라운드 동기화

생명주기

단계	설명
install	최초 설치, 캐시 초기화
activate	이전 SW 정리 및 활성화
idle	아무 일 없으면 종료 상태
event	fetch/push/sync 발생 시 깨어남

• 항상 실행 중이 아님 → 이벤트 기반

특징

• 페이지 없어도 동작 가능
• 네트워크 요청 제어 가능
• HTTPS 필수
• 상태를 오래 들고 있으면 안 됨

사용 예

• PWA 오프라인 모드
• API 응답 캐싱
• 앱처럼 빠른 로딩
• 푸시 알림
• 네트워크 실패 대비