Web Workers와 Concurrency

웹 워커(Web Workers)는 자바스크립트에서 멀티스레딩을 구현할 수 있는 기능이다. 자바스크립트는 기본적으로 싱글 스레드로 동작하기 때문에, 복잡하고 시간이 많이 걸리는 작업을 수행할 때 UI가 멈추지 않도록 별도의 백그라운드 스레드에서 코드를 실행할 필요가 있다.

 

웹 워커를 사용하면 메인 스레드가 아닌 별도의 스레드에서 스크립트를 실행할 수 있어, 메인 스레드(주로 UI를 담당)는 사용자 인터랙션과 화면 업데이트에 집중할 수 있고, 워커 스레드에서는 계산이 많이 필요한 작업을 동시에 처리할 수 있다. 이로 인해 애플리케이션이 더욱 빠르고 반응적으로 동작할 수 있다.

 

웹 워커는 데이터를 메인 스레드와 메시지 형태로 교환하며, 이 메시지는 복사되어 전달되므로 메인 스레드와 워커 스레드 사이에 데이터를 공유하지 않는다. 워커 내에서는 DOM에 직접 접근할 수 없으며, 메인 스레드에서 전달받은 데이터를 기반으로 작업을 수행하고 결과를 메인 스레드로 다시 보낸다.

 

예를 들어, 이미지 처리나 파일 다운로드와 같은 무거운 작업을 워커에서 처리하면 메인 스레드는 이러한 처리가 완료될 때까지 멈추지 않고 계속하여 사용자와의 상호작용을 유지할 수 있다.

 

자바스크립트는 싱글 스레드 언어로, 기본적으로 한 번에 하나의 작업만 수행할 수 있다. 그러나 비동기 프로그래밍 모델을 사용하여 동시성(concurrency)을 구현하고, 여러 작업을 효율적으로 처리할 수 있다. 이를 위한 주요 메커니즘으로 이벤트 루프, 콜백 함수, 프로미스(Promises), async/await 등이 있다.

 

자바스크립트의 실행 환경인 브라우저나 Node.js는 이벤트 루프를 사용하여 연속적인 작업을 처리한다. 이벤트 루프는 콜 스택(Call Stack), 이벤트 큐(Event Queue), 백그라운드 작업을 관리한다.

 

콜 스택이 비어있을 때, 이벤트 루프는 이벤트 큐에서 콜백 함수를 하나씩 콜 스택으로 옮겨 실행한다. 이러한 구조 덕분에 자바스크립트는 비동기 콜백을 활용하여 여러 작업을 동시에 처리할 수 있다.

 

프로미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체이다. 콜백 지옥을 피하고, 비동기 코드의 가독성과 작성 편의성을 높이는 데 도움을 준다. 프로미스는 세 가지 상태를 가진다. (대기(pending), 이행(fulfilled), 거부(rejected))

const promise = new Promise((resolve, reject) => {
  if (/* 조건 */) {
    resolve(value); // 작업 성공
  } else {
    reject(error); // 작업 실패
  }
});

promise.then(result => {
  console.log(result); // 성공 결과 처리
}).catch(error => {
  console.error(error); // 에러 처리
});

 

 

async/await는 프로미스 기반의 비동기 코드를 동기 코드처럼 쉽게 작성할 수 있게 해주는 ES2017(ES8)의 문법이다. async로 함수를 정의하면 그 함수는 자동으로 프로미스를 반환한다. await 키워드는 프로미스가 처리될 때까지 함수 실행을 일시 중지하고, 결과 값 또는 에러가 반환될 때까지 기다린다.

async function fetchData() {
  try {
    const data = await fetch('url'); // 프로미스가 이행될 때까지 기다림
    const json = await data.json();
    console.log(json);
  } catch (error) {
    console.error(error);
  }
}

 

이러한 메커니즘을 통해 자바스크립트는 싱글 스레드임에도 불구하고 다수의 비동기 작업을 효과적으로 관리하고, 동시에 여러 작업을 수행할 수 있는 동시성을 제공한다.