Javascript는 어떤 언어인가

Javascript: 싱글 스레드 언어

싱글 스레드라는 것은 한 번에 하나의 작업만 할 수 있다는 뜻이다.

자바스크립트는 싱글 스레드 언어이기에 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고, 스택의 맨 위에서부터 차례대로 한 번에 하나의 함수만 처리할 수 있다.

간단한 프로그램이라면 상관없지만 만약에 우리가 아주 복작한 프로그램을 구동한다고 생각했을때, 시간이 매우 오래 걸리는 작업이 스택에 쌓이고 실행되면 그 다음 작업은 무한적 대기할 수 밖에 없다.

이처럼 다른 작업을 실행하기 위해서 이 전 작업이 완료될 때까지 기다려야만 하는 상황을 블로킹(blocking)이라고 한다.

극복하기 위한 해결 방안이 바로 Asynchronous Callbacks(비동기 콜백)이다.

자바스크립트가 싱글 스레드 언어임에도 불구하고 웹 사이트에서 끊김없이 여러 작업을 동시에 할 수 있는 것은 바로 브라우저가 Web APIs 같은 것들을 제공하여 비동기 작업을 가능하게 해주기 때문이다.

실제 사용시에는 멀티 스레드처럼 사용하는데 어떻게 사용하는가

자바스크리브는 인터프리터 언어이며 단일 스레드이다. 자바스크립트에서 동적으로 UI변경 작업이 있을 시에는 UI 스레트라는 공간에서 큐 방식으로 처리 순서를담아 놓는다.
앱 워커는 멀티스레드 기능을 지원하며 워커가 생성될 때마다 자바스크립트를 실행할 수 있는 고유 스레드를 생성하여 속도 성능을 크게 향상시킬수 있다. 워커에서 실행하는 코드는 브라우저 UI에도, 다른 워커에서 실행하는 코드에도 영향을 주지 않는다. 즉, 독립적으로 실행되는 멀티스레드이다.

웹 워커는 다음과 같은 상황에서 사용하기 적절하다.
1. 매우 큰 문자열의 암호화/복호화
2. 복잡한 수학계산(이미지/비디오 처리 포함)
3. 매우 큰 배열의 정렬
=> 즉, 로딩과 실행이 오래 걸리는 자바스크립트 파일

Web worker란

HTML 페이지에서 스크립트를 실행할 때 그 페이지는 스크립트가 완료할 때까지 응답하지 않게 됩니다. 이를 해결하기 위해 Web worker를 사용하는데, Web worker는 페이지의 퍼포먼스에 영향을 주지 않고 다른 스크립트와는 독립적으로 백그라운드에서 실행되는 javascript이다.

기존의 웹은 다중 쓰레드가 불가능했기 때문에 작업이 끝나기 전까지 UI 멈춰버리는 경우가 발생했습니다. 하지만 Web worker 덕분에 웹은 멀티 쓰레드 구동이 가능해졌다. 즉, Web worker는 스레드라는 개념이라고 볼 수 있다.

---

Web worker는 Worker클래스를 사용하며 js 파일을 넘겨주게 된다. [w = new Worker("example_workers.js");] 그러면 Web worker는 넘겨준 js 파일 내의 코드대로 작동하게 된다.

<script>
var w;

function startWorker() {
  if(window.Worker) {
    w = new Worker("example_workers.js");
    w.onmessage = functin(event) {
      alert(event.data);
    };
  } else {
    	alert("Web worker를 지원하지 않는 브라우저 입니다.");
  	}
}
</script>

function timedCount() {
  postMessage("test");
  setTimeout("timedCount()" , 1000);
}

timedCount();

example_workers.js에서는 1초마다 'test'라는 메시지를 브라우저에 보내주게 된다. 그러면 웹페이지에서는 해당 메시지를 받아 작업을 처리한다.
만약 위의 예제가 웹 워커 없이 순수 단일 스레드로 웹페이지에서 작업을 시켰다면 브라우저는 1초 단위로 멈추게 된다. 하지만 Web worker를 통해 웹 브라우저에는 전혀 영향이 없이 작업이 가능하게 된 것이다.

웹 워커 종료 코드

function stopWorker() {
  w.terminate();
  w = undefined;
}

마지막으로 웹 워커를 종료하는 방법이다. Web worker.terminate()를 통해 작업중이던 웹 워커를중지시킨 뒤 undefined로 메모리에서 해제해 준다.

---

비동기적으로 실행되는 것을 동기적으로 코딩하는 방법

자바스크립트에서는 'async'와 'await' 키워드를 사용하여 비동기 코드를 동기 코드처럼 작성할 수 있다. 'async' 함수는 항상 프로미스를 반환하며, 'await' 키워드는 프로미스가 해결될 때까지 기다린다.

예를 들어, 다음과 같은 비동기 코드를 동기적으로 보이게 작성할 수있다.

비동기 코드:

function fetchData() {
    return fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => {
            console.log(data);
        });
}

fetchData();

동기 코드처럼보이게 작성:

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
}

fetchData();

이렇게 하면 비동기 작업이 마치 동기 작업인 것처럼 순차적으로 실행되는 것처럼 보인다. 'await' 키워드는 프로미스가 해결될 때까지 함수의 실행을 일시 정지하므로, 코드의 흐름을 더 이해하기 쉽게 만든다.