Skip to content

2. 웹 워커

웹 워커를 활용하면 CPU 연산이 많이 필요한 연산을 백그라운드 스레드에서 실행할 수 있다. 백그라운드 스레드에서 실행되는 코드는 사용자가 작업하는 메인 스레드에 영향을 주지 않는다. 애플리케이션에서 CAD를 그리거나 복잡한 지도 계산과 같이 연산하는 작업이 많다면 웹 워커를 사용해서 애플리케이션 전체 성능을 향상시킬 수 있다.


Note

  • 웹 워커에서 Angular를 실행하는 기능은 지원하지 않는다.


1. 웹 워커 추가하기

프로젝트에 웹 워커를 추가하려면 Angular CLI로 ng generate 명령을 실행하면 된다.


ng generate web-worker <위치>


웹 워커를 생성하는 위치는 고정되어 있지 않다. 최상위 컴포넌트 src/app/app.component.ts 파일과 같은 위치에 웹 워커를 생성하려면 이렇게 실행하면 된다.


ng generate web-worker app


이 명령을 실행하면 이런 작업이 실행된다.


  • 프로젝트에 웹 워커 환경설정을 추가한다.


  • src/app/app.worker.ts 파일에 메시지를 받는 기본 코드를 추가한다.


src/app/app.worker.ts
addEventListener("message", ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});


  • src/app/app.component.ts 파일에 메시지를 보내는 기본 코드를 추가한다.


src/app/app.component.ts
if (typeof Worker !== "undefined") {
  // 웹 워커를 생성합니다.
  const worker = new Worker(new URL("./app.worker", import.meta.url));
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage("hello");
} else {
  // 웹 워커를 지원하지 않는 환경입니다.
  // 이 환경에서도 애플리케이션이 제대로 동작할 수 있는 보완 로직을 추가해야 합니다.
}


이제 기본 코드를 기반으로 애플리케이션이 웹 워커와 메시지 통신하는 로직을 추가하면 된다.


Note

  • 애플리케이션이 실행되는 환경이나 플랫폼에 따라 웹 워커를 지원하지 않을 수 있다.
  • 서버 사이드 렌더링할 때 사용하는 @angular/platform-server도 웹 워커를 지원하지 않는다.
  • 그래서 웹 워커가 동작하지 않는 환경에서도 필요한 작업을 실행할 수 있는 보안 로직을 항상 준비해야 한다.

References