웹 개발을 하다 보면 "왜 내 페이지가 멈춘 것처럼 느껴질까?"라는 경험을 한 번쯤 해봤을 것이다. 특히 무거운 연산을 처리하거나 대량의 데이터를 다룰 때 브라우저가 먹통이 되는 현상 말이다. 이는 JavaScript가 기본적으로 단일 스레드(Single Thread) 환경에서 동작하기 때문이다. 하지만 Web Worker를 사용하면 이러한 한계를 극복할 수 있다.

1. Web Worker란 무엇인가

1-1) 정의

Web Worker는 웹 브라우저에서 메인 스레드와 별도로 JavaScript 코드를 백그라운드 스레드에서 실행할 수 있게 해주는 API다. MDN 문서에 따르면, "Web Workers는 웹 애플리케이션의 메인 실행 스레드와 분리된 백그라운드 스레드에서 스크립트 작업을 실행할 수 있게 만든다"고 정의되어 있다.

1-2) 레스토랑 비유로 이해하기

Web Worker를 레스토랑으로 비유해보자. 레스토랑에는 크게 두 가지 공간이 있다:

• 홀(메인 스레드): 손님을 맞이하고, 주문을 받고, 음식을 서빙하는 곳. 손님과 직접 소통하는 공간
• 주방(워커 스레드): 실제로 음식을 조리하는 곳. 손님에게는 보이지 않지만 핵심적인 작업이 이루어지는 공간

만약 홀 직원이 주문을 받으면서 동시에 음식까지 직접 조리해야 한다면 어떻게 될까? 손님들은 주문을 하고 싶어도 직원이 주방에서 조리하느라 자리를 비웠기 때문에 기다려야 한다. 이것이 바로 메인 스레드에서 무거운 작업을 처리할 때 발생하는 문제다.

Web Worker는 이 주방 역할을 하는 별도의 직원을 고용하는 것과 같다. 홀 직원(메인 스레드)은 손님 응대에만 집중하고, 주방 직원(워커 스레드)은 음식 조리에만 집중한다. 두 직원은 주문서(메시지)를 통해서만 소통한다.

2. 왜 Web Worker가 필요한가

2-1) JavaScript의 단일 스레드 특성

JavaScript는 기본적으로 단일 스레드 언어다. 브라우저에서 JavaScript는 하나의 메인 스레드(흔히 UI 스레드라고 부른다)에서 실행되며, 이 스레드는 다음과 같은 작업들을 모두 처리한다:

• JavaScript 코드 실행
• DOM 렌더링
• 사용자 이벤트 처리 (클릭, 스크롤 등)
• 가비지 컬렉션