[JS 응용] 동기 & 비동기

동기 & 비동기

• 자바스크립트의 동작방식과 관련된 개념.

• 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다.

• 이전 작업이 진행중일 때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 이를 동기 방식의 처리라고 한다.

• 스레드에서 작업하나가 수행되고 있을 때 다른 작업을 동시에 할 수 없는 방식을 블로킹 방식이라고 한다.

• 수행 되어야 하는 작업들이 너무 오래걸리게 될 시 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전 까지 올 스탑되기 때문에 전반적인 흐름이 느려진다.

• 이것이 동기처리 방식의 문제점이다.

• 이를 해결하기 위해 코드를 실행하는 일꾼인 Thread를 여러 개 사용하는 방식인 'MultiThread'방식으로 작동시키면 작업의 분할이 가능하긴 하다. 그러나 자바스크립트는 싱글 스레드로 동작한다. 즉 멀티스레드처럼 일꾼을 여러 개 사용하는 방법을 사용할 수 없다는 것이다.

• 싱글 스레드 방식을 이용하면서 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행시키는 방식을 비동기 작업이라고 한다. 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행하는 것이다. 비동기처리를 할때는 콜백함수를 붙여 그 비동기처리의 결과값을 확인한다.

function taskA() {
  console.log("A 끝")
}

taskA();
console.log("코드 끝");
// 'A 끝' 
// '코드 끝'이 출력된다.

function taskA(a, b, cb) {
  setTimeout(() => {
  	const res = a+b;
    cb(res);
  }, 3000);
}

taskA(3, 4, (res) => {
  console.log("A TASK RESULT :", res);
});
console.log("코드 끝");
// 코드 끝
// A TASK RESULT:7,
// 순으로 출력된다.

JS 엔진은 어떻게 동기적인 코드와 비동기적인 코드를 구분해서 작업할까

• js 작성한 코드는 웹 브라우저에 탑재된 js 엔진에 의해 해석되고 실행된다.

• js 엔진은 Heap과 Call Stack으로 구성되어 있다.

• Heap은 변수나 상수들의 메모리를 저장하는 영역이다.

• Call Stack은 코드의 실행에 따라 호출 스택을 쌓는 영역이다.

• js 엔진은 비동기처리할 setTimeout 함수는 webAPIs로 넘겨버린다. (Call stack에 쌓이지 않는다)