1. Web Worker

Web Worker는 백그라운드 스레드에서 JavaScript 코드를 실행할 수 있게 해주는 API입니다. Web Worker는 메인 스레드와 독립적이기 때문에 CPU 집약적인 작업이나 대용량 파일 업로드, 복잡한 계산 작업을 수행하면서도 UI가 멈추지 않게 합니다.

Web Worker 작동 방식

• 생성: JavaScript 파일을 별도로 작성해 Worker로 로드합니다.
• 통신: Web Worker는 메인 스레드와 postMessage와 onmessage 메서드를 사용하여 메시지 기반으로 통신합니다.
• 독립성: 메인 스레드와 독립적으로 실행되므로 DOM에 접근할 수 없습니다. 대신, 숫자 계산, 데이터 처리, API 요청 등 브라우저 UI를 방해하지 않는 작업을 처리하기 좋습니다.

Web Worker 예제

먼저, worker 파일을 worker.js로 작성합니다:

javascript
Copy code
// worker.js
self.onmessage = function (event) {
  const data = event.data;
  // 예를 들어, 대용량 파일 청크 처리 또는 연산 수행
  const result = processData(data); // 무거운 작업 처리
  self.postMessage(result); // 처리 완료된 결과를 메인 스레드에 전송
};

function processData(data) {
  // 무거운 작업을 수행
  return data;
}

메인 스레드에서는 다음과 같이 Worker를 생성하고 사용합니다:

javascript
Copy code
// main.js
const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('Worker 결과:', event.data);
};

// 무거운 작업을 Worker로 전달
worker.postMessage(largeData);

2. Service Worker

Service Worker는 네트워크 요청을 가로채 캐시를 관리하거나, 오프라인 지원, 푸시 알림 등을 가능하게 하는 백그라운드 스크립트입니다. 파일 업로드 시 사용자가 네트워크가 불안정한 환경에서도 안전하게 파일 업로드를 수행할 수 있도록 지원합니다. Service Worker는 주로 오프라인 지원과 캐싱 관리를 위해 사용됩니다.

Service Worker 주요 기능

• 네트워크 요청 가로채기: API 요청을 캐시로부터 직접 제공하여 불안정한 네트워크 상황에서도 안정적인 경험을 제공합니다.
• 오프라인 지원: 서버 연결이 끊기더라도 Service Worker가 요청을 캐시에서 제공해 사용자가 계속 작업을 할 수 있도록 합니다.
• 백그라운드 동기화: 네트워크가 끊겼다가 다시 연결되면, 파일 업로드 같은 작업을 자동으로 재개할 수 있습니다.

Service Worker 예제

다음과 같이 Service Worker를 등록하고, 파일 업로드 요청을 가로챌 수 있습니다:

javascript
Copy code
// service-worker.js
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/upload')) {
    event.respondWith(handleUploadRequest(event.request));
  }
});

async function handleUploadRequest(request) {
  // 캐시 처리 로직 또는 오프라인 대체 로직을 구현
  const response = await fetch(request); // 원래 요청을 수행
  return response;
}