Web worker(웹워커)에 대해서 알아보자

 

이번에 web-worker를 사용할 일이 생겨서 web-worker에 대해 간단히 정리를 해보려고 한다.

우리 프로젝트의 경우, CSV 파일로 바꿔서 다운로드 할 수 있도록 만드는 경우에 사용하고 있다.

 

---

Web worker란?

Web worker는 Javascript 기반의 기술이며 주로 웹 브라우저 환경에서 사용된다.

이는 멀티스레딩을 지원하기 위한 기술로 별도의 백그라운드에서 실행되며, 메인 스레드와 별개로 작업이 이루어진다.

 

Javascript를 사용하는 사람들이라면 Single-thread에 대해 많이 들어봤을 것이다.

V8 엔진에는 스택이 있는데, 여기서 LIFO 방식으로 하나씩 쌓이고 또 실행이 된다.

그러다보니 만약 많은 양의 데이터나 복잡한 로직을 사용하게 된다면 하나씩 처리되어야 하는 스택에서 정체가 생기게 될 것이고, 이는 메인 UI 스레드의 정체를 야기시킬 것이며 UI가 노출되는 시간이 길어지면서 결국 좋지 않은 사용자 경험을 만들 수 있다.

 

이러한 문제를 해결하기 위해 Web worker를 사용하게 된다.

Web worker를 시용해서 CPU 집중적인 작업이나 장기간 실행되는 작업ㅂ을 메인 스레드의 블로킹 없이 처리할 수 있게 되는 것이다.

 

---

Web worker의 동작 방식

Web worker는 UI를 처리하는 메인 스레드 외에 각각 데이터를 처리할 수 있는 Web worker를 필요한 개수만큼 생성하여 스레드처럼 사용할 수 있다.

또한 별도의 백그라운드 스레드에서 실행되므로 메인 UI 스레드 블로킹 없이 독립적으로 수행 가능하다.

 

메인 스레드와 Web worker는 메시지 통신 기반의 통신 매커니즘을 통해 서로 통신하며 데이터를 주고 받는다.

메인 스레드에 Web worker로 로드할 URL을 넘겨주고 메시지를 주고 받는 콜백을 등록해서 사용할 수 있다.

이러한 데이터 교환을 위해서 'postMessage()'와 'onmessage' 이벤트를 사용한다.

postMessage를 사용해서 Web worker에게 데이터를 전달하고, 메인 스레드에서 결과 값을 전달 받으면 onmessage 이벤트를 감지해 정보를 사용할 수 있는 것이다.

 

물론 new worker()를 통해서 생성해 사용할 수 있지만, React를 사용하는 등의 경우라면 '@shopify/react-web-worker' 라이브러리를 이용해서 사용하는 방법 또한 생각해 볼 수 있을 것이다.

별도의 스크립트 파일을 사용해서 이런 식으로 Web worker를 만들어 사용하면 Web worker 내부에서 실행되는 코드는 메인 스레드와 독립적으로 관리된다.

 

---

장점이 많은 것 같은데 자주 사용되지 않는 이유는?

첫 번째는 주로 백단에서 작업을 하기 때문이다.

대부분 프론트보다 서버단에서 좋은 컴퓨팅 성능을 가진 경우가 대부분이다.

그러다보니 대부분 서버단에서 데이터를 처리하기 때문에 Web worker를 프론트단에서 자주 사용할 일이 없다.

 

두 번째는 제한된 환경 때문이다.

Web worker 내부에서는 DOM제어 및 Window 객체의 일부 함수, 메서드, 프로퍼티 등의 접근이 제한된다.

즉, 메인 스레드에서만 사용 가능하고, Web worker에서는 사용하지 못하는 경우가 있기 때문이다.

이는 Web worker의 안전과 보안을 위한 것이다.

그래서 만약 Web worker에서 DOM을 조작해야하는 경우에는 메시지를 통해 메인 스레드에 요청하고 응답을 받는 방식으로 사용해야한다.

 

세 번째는 전송 비용 때문이다.

복잡한 로직과 계산 때문에 메인 UI 스레드에서 병목 현상이 일어나는 것을 발견했다면 이를 해결하기 위해서 고려해볼 수 있지만, 단순 계산이라면 오히려 메인 스레드와 Web worker 간의 데이터 전송 비용으로 인해 오히려 Web worker를 사용하는 것이 단점이 될 수 있으며, 잦은 사용으로 인해 복잡성만 증가할 수 있다.

 

네 번째는 추가적인 메모리 사용이다.

Web worker를 생성하고 유지하기 위해 추가적인 메모리가 필요할 수 있다.

특히 계획 없이 여러개의 Web worker를 동시에 사용하게 되면 메모리 사용량이 증가할 수 있다.

 

---

그렇다면 언제 사용해야할까?

여러가지 단점들이 많지만 계획적으로 사용하면 분명 도움이 될 것이다.

 

첫 번째는 CPU 집중적인 작업을 해야하는 경우이다.

웹 애플리케이션 내에서 CPU를 많이 사용하는 작업이 필요한 경우 Web worker를 통해 별도의 백그라운드에서 처리 할 수 있을 것이다.

 

두 번째는 시간이 오래 걸리는 작업이다.

첫 번째와 비슷한 이유이기도 한데, 시간이 오래 걸리는 작업의 경우 메인 UI 스레드에 영향을 주게 되므로 UX가 저하될 수 있다.

이런 면에서 봤을 때 사용자의 인터랙션과 응답성을 유지하기 위해 Web worker를 사용할 수 있을 것이다.

 

세 번째는 대용량 데이터 처리이다.

대용량 데이터를 처리해야하는 경우에도 Web worker를 사용할 수 있는데, 데이터를 여러 작은 덩어리로 나누어 병렬 처리하면 처리 속도를 높일 수 있을 것이다.

 

네 번째는 그래픽 렌더링이 필요한 경우이다.

그래픽 랜더링의 경우 복잡한 계산과 그래픽 요소들이 복합적으로 조합되며 화면에 그려진다.

이런 경우 Web worker를 사용하면 블로킹 방지, 멀티 스레드를 이용한 병렬처리 가능, 인터렉션 및 응답성 유지 등의 장점을 얻을 수 있다.

 

다섯 번째는 오프라인 동작이 필요한 경우이다.

PWA에서 오프라인 동작이 필요한 경우가 있다. 이 때 Web worker를 이용하면 백그라운드에서 데이터 동기화 작업이나 캐싱 작업 등을 처리할 수 있을 것이다.

 

이 외에도 몇 가지 이유가 있는데, 대부분의 공통점은 주로 CPU 집중적이거나, 시간이 오래 걸리는 작업을 하는 등의 경우에 응답성을 향상 시키기 위해서 사용된다.

그러나 앞서 말한 것처럼 데이터 통신 비용, 제한적인 환경 등을 고려해야할 것이다.