웹 워커로 백그라운드 작업하기

웹 워커를 사용하면 CPU를 많이 사용하는 계산을 백그라운드 스레드에서 실행해서, 메인 스레드가 사용자 인터페이스를 갱신할 수 있도록 합니다. 컴퓨터 지원 설계(CAD) 도면 생성이나 복잡한 기하 계산처럼 많은 계산이 필요한 애플리케이션은 웹 워커를 활용해서 성능을 높일 수 있습니다.

웹 워커 추가하기

기존 프로젝트에 웹 워커를 추가하려면 Angular CLI의 ng generate 명령을 사용하세요.

ng generate web-worker <location>

애플리케이션의 어디에나 웹 워커를 추가할 수 있습니다. 예를 들어 루트 컴포넌트인 src/app/app.ts에 웹 워커를 추가하려면 다음 명령을 실행하세요.

ng generate web-worker app

이 명령은 다음 작업을 수행합니다.

1. 웹 워커를 사용하도록 프로젝트가 설정되어 있지 않다면 해당 설정을 추가합니다.

2. 메시지를 수신할 수 있도록 src/app/app.worker.ts에 다음 기본 코드를 추가합니다.

   src/app/app.worker.ts

   addEventListener('message', ({data}) => {
     const response = `worker response to ${data}`;
     postMessage(response);
   });

3. 워커를 사용할 수 있도록 src/app/app.ts에 다음 기본 코드를 추가합니다.

   src/app/app.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 {
     // 이 환경에서는 웹 워커를 지원하지 않습니다.
     // 프로그램이 정상적으로 실행되도록 대체 수단을 추가해야 합니다.
   }

이 기본 코드를 생성한 뒤에는 워커와 메시지를 주고받아 웹 워커를 사용하도록 코드를 리팩토링해야 합니다.

이런 환경에서도 애플리케이션이 동작하도록 하려면, 워커가 수행할 계산을 대신 실행하는 대체 수단을 제공해야 합니다.