자바스크립트는 단일 스레드 기반의 언어로서, 동시성과 병렬 처리를 위한 특별한 기능이 제공되지 않습니다. 그러나 최근에는 브라우저와 런타임 환경에서 웹 워커(Worker)와 프라미스(Promise)를 통해 동시성과 병렬 처리를 구현할 수 있는 기능을 도입하여 성능을 향상시킬 수 있게 되었습니다.

동시성(Concurrency) vs 병렬 처리(Parallelism)

동시성과 병렬 처리는 다소 유사한 개념이지만, 약간의 차이가 있습니다. 동시성은 여러 작업이 동시에 실행되는 것처럼 보이도록 하는 개념이며, 실제로는 단일 스레드에서 작업들을 번갈아 가며 처리합니다. 반면에 병렬 처리는 여러 작업이 동시에 실행되는 것을 의미하며, 실제로 병렬 처리를 위해서는 다중 스레드나 분산 시스템 등이 필요합니다.

웹 워커(Worker)

웹 워커는 HTML5에서 도입된 기능으로, 자체적인 스레드에서 스크립트 코드를 실행하는 것을 가능하게 해줍니다. 이를 통해 웹 애플리케이션에서 병렬 처리를 구현할 수 있습니다. 웹 워커는 메인 스레드와 독립적으로 실행되므로, 병렬로 처리해야 하는 작업을 웹 워커에게 할당하여 성능을 향상시킬 수 있습니다.

// 웹 워커 생성
const worker = new Worker('worker.js');

// 웹 워커에 작업을 할당
worker.postMessage('작업 데이터');

// 웹 워커로부터 결과를 받아옴
worker.onmessage = function(event) {
  const result = event.data;
  // 결과 처리
};

// 웹 워커 종료
worker.terminate();

위의 예제 코드에서 worker.js는 웹 워커가 실행할 스크립트 파일입니다. postMessage()를 통해 웹 워커에게 작업 데이터를 전달하고, onmessage 이벤트 핸들러를 통해 결과를 받아옵니다. 필요에 따라 웹 워커를 종료할 수 있습니다.

프라미스(Promise)

프라미스는 비동기 처리를 위한 패턴으로, 콜백 헬(callback hell)을 해결하고 가독성을 향상시킬 수 있는 기능입니다. 프라미스는 비동기 작업이 완료되었을 때 결과를 처리할 수 있는 객체로서, 동시성 처리를 위해 사용될 수 있습니다.

// 비동기 작업
function asyncOperation() {
  return new Promise((resolve, reject) => {
    // 작업 수행
    setTimeout(() => {
      resolve('작업 결과');
    }, 2000);
  });
}

// 비동기 작업 실행
asyncOperation()
  .then(result => {
    // 결과 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 예제 코드에서 asyncOperation 함수는 비동기 작업을 수행하는 함수입니다. Promise 객체를 생성하여 작업이 완료되면 resolve()로 결과를 반환합니다. 비동기 작업을 실행한 후에는 then() 메서드를 통해 결과를 처리하거나, catch() 메서드를 통해 오류를 처리할 수 있습니다.

성능 비교

자바스크립트에서 동시성과 병렬 처리의 성능은 작업의 종류와 크기에 따라 다를 수 있습니다. 일반적으로 웹 워커를 이용한 병렬 처리는 멀티 스레드에서 수행되므로, 대용량의 작업을 처리할 때 효과적입니다. 프라미스를 이용한 동시성 처리는 비동기 작업들이 순차적으로 처리되므로, 작업의 종류와 크기가 작을 때 적합합니다.

점진적 웹 앱(Progressive Web App)을 개발할 때는 적절한 동시성과 병렬 처리를 선택하여 성능을 최적화할 수 있습니다.

#javascript #웹워커 #프라미스