자바스크립트 비동기 프로그래밍 Asynchronous Programming

비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다.

 

자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기

 

 

📌  자바스크립트가 비동기적으로 작동해야하는 이유

 

변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다.

이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다.

함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 제거된다.

 

const foo = () => {};
const bar = () => {};

foo();
bar();

 

이 코드의 콜스택의 동작과정은 다음과 같다.

함수의 호출은 곧 콜스택에 실행 컨텍스트가 push되어 실행됨을 의미한다. (이 실행은 pop될때 종료됨)

 

 

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

한 번에 하나의 태스크만 수행할 수 있다는 뜻이다.

이를 "싱글 스레드single thread" 방식으로 동작한다고 말한다.

 

만약 시간이 오래 걸리는 작업이 수행 컨택스트 스택 최상단에 위치해 실행되면,

해당 작업을 처리하기 전까지 다른 작업들은 수행하지 않는다.

 

function sleep(func, delay){
  const delayUntil = Date.now() + delay;
  
  while(Date.now < delayUntil)
  // 코드 이해하고 나서 소리질렀다.
  // delay시킬 시간을 현재 시간에 더해 변수에 저장해놓고
  // 현재 시간이 변수와 같아졌을 때 while문을 끝낸다는 로직이다.
  // while문은 조건을 만족하지 않으면 무한 순회한다는 특성을 이용했다. (신기💚)
  
  func();
}

function foo(){
  console.log('foo');
}

function bar(){
  console.log('bar');
}

sleep(foo, 3*1000);

bar();

// 아 저 코드가 중요한 게 아니고,
// sleep()함수가 먼저 호출되고 
// bar()함수가 나중에 호출되었다는 점이 중요하다.
// 콜스택에 sleep()함수의 실행 컨텍스트가 push되고 실행되고 종료된 후
// bar()함수의 실행 컨텍스트가 push되고 실행되고 종료된다.

// sleep함수는 보다시피 delay인자값만큼 코드의 실행을 늦추는 함수다.
// 이때문에 bar()함수는 늦게 실행될 이유가 없는데도 sleep()함수가 종료될때까지 실행되지 못한다.

 

📍 Synchronous 

현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 "동기synchronous 처리"라고 한다.

장점 : 태스크를 순서대로 하나씩 처리하기 때문에 실행 순서를 보장한다.

단점 : 선행 태스크가 종료할 때까지 이후 태스크들이 블로킹된다.

---

위 예제를 setTimeout 이라는 타이머 함수를 이용해 구현해보자.

 

function foo(){
  console.log('foo');
}

function bar(){
  console.log('bar');
}

setTimeout(foo, 3*1000);
bar();
// bar 호출 -> (3초 경과 후) foo 호출

 

setTimeout 함수는 앞선 sleep 함수와 유사하게 일정시간이 지난 뒤에 콜백 함수를 호출한다.

그러나 setTimeout 함수는 이후의 태스크를 블로킹blocking하지 않고 곧바로 실행한다.

(그래서 foo 함수와 bar 함수의 실행 순서가 뒤바뀐다.)

 

📍 Asynchronous 

현재 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식은 "비동기asynchronous 처리"라고 한다.

장점 : 현재 실행 중인 태스크가 종료되지 않았어도 다음 태스크를 바로 실행하기 때문에 블로킹이 발생하지 않는다.

단점 : 테스크의 실행 순서는 보장하지 못한다.

---

 

📌  자바스크립트의 비동기적 처리를 도와주는 브라우저 환경 💫

 

2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐

Event Loop & Task queue 이벤트 루프와 태스크 큐