[javascript] Angular와 자바스크립트에서의 멀티스레드 개념 이해하기

21 Dec 2023

javascript

자바스크립트와 Angular는 단일 스레드 방식으로 동작하며, 이는 한 번에 하나의 작업만을 처리할 수 있다는 것을 의미합니다. 이러한 제약은 대규모 루틴이나 병행 작업을 처리하기에는 어려움을 초래할 수 있습니다. 그러나 웹 워커 (Web Worker)를 사용하면 멀티스레드와 유사한 환경을 구축하여 이러한 제약을 극복할 수 있습니다.

웹 워커 (Web Worker)란?

웹 워커는 주 스레드와 별도로 실행되는 백그라운드 스레드로, 복잡한 작업이나 연산 집약적인 작업을 수행함으로써 주 스레드가 블로킹되지 않도록 합니다. 이를 통해 웹 어플리케이션의 반응성을 향상시키고 사용자 경험을 향상시킬 수 있습니다.

Angular에서의 웹 워커 활용

Angular에서 웹 워커를 사용하는 방법은 다음과 같습니다.

웹 워커 파일 생성: app.worker.ts와 같은 웹 워커 파일을 생성하고, 필요한 작업을 정의합니다.

 // app.worker.ts
 addEventListener('message', ({ data }) => {
   // Perform heavy computations or any other complex task here
   postMessage(result);
 });

웹 워커 서비스 생성: app.worker.service.ts와 같은 웹 워커 서비스를 생성하여 Angular에서 사용합니다.

 // app.worker.service.ts
 // Import the web worker script
 const worker = new Worker('./app.worker', { type: 'module' });

 export class AppWorkerService {
   performTask(data: any) {
     // Send data to the worker
     worker.postMessage(data);
   }
 }

웹 워커 서비스 사용: Angular 컴포넌트에서 웹 워커 서비스를 주입하고, 작업을 수행합니다.

 // app.component.ts
 export class AppComponent {
   constructor(private workerService: AppWorkerService) {
     const data = /* data for the task */;
     this.workerService.performTask(data);
   }
 }

결론

웹 워커를 사용하여 Angular 웹 어플리케이션에서 멀티스레드와 유사한 환경을 구축할 수 있습니다. 이를 통해 병행 작업을 효율적으로 처리하고, 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

Angular 공식 문서 - Web Workers