[JS/기술면접] 동기와 비동기 프로그래밍

 동기 vs 비동기 

자바스크립트 엔진은  단 하나의 실행 컨텍스트 스택 을 가지고 있다. 이는 창구가 하나 뿐이라 한 번에 하나의 함수만 실행할 수 있다는 것을 의미한다. 즉, 자바스크립트 엔진은 한 번에 하나의 태스크(task)만 실행할 수 있는  싱글 스레드(single thread) 방식 으로 동작하므로, 이미 어떤 태스크를 실행 중일 때 다른 일은 블로킹(blocking, 작업 중단)이 된다.

 

이러한 환경에서 코드를 어떤 방식으로 실행할 지 결정하는 것은 중요하다. 이와 관련된 개념인 동기와 비동기에 대해 살펴보자.

 

* 기술면접 질문은 맨 아래에 적혀 있습니다

 

728x90

---

1. 동기식 처리 모델

 동기식 처리 모델 은 태스크를 순차적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크는 대기하고 있다.

 

동기식 처리 모델 (Synchronous processing model)

 

아래의 예시를 살펴보면, 

3초가 지날 때까지 foo 함수가 실행되지 않고 대기하고 있다가 3초 이후에 foo 함수와 bar 함수가 순차적으로 실행된다.

function sleep(func, delay) {
  const delayUntil = Date.now() + delay;

  // 현재 시간(Date.now())에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복한다.
  while (Date.now() < delayUntil);
  // 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
  func();
}

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

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

sleep(foo, 3000);
bar();

 

이러한 동기 처리 방식은 코드를 위에서 아래로 순차적으로 실행하므로 실행 순서가 보장된다는 장점이 있지만, 앞에 실행된 태스크가 끝날 때까지 다른 태스크가 실행되지 못한다는 단점이 있다.

 

 

---

2. 비동기식 처리 모델

 비동기식 처리 모델 은 태스크를 병력적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료되지 않았더라도 다음 태스크가 곧바로 실행될 수 있다.

 

비동기식 처리 모델 (Asynchronous processing model)

 

아래의 예시를 살펴보면,

bar 함수 실행 전에 setTimeout 함수 코드 실행이 있지만, 먼저 bar 함수가 실행되고 3초 후에 foo 함수가 실행된다.
즉, bar 함수가 대기하지 않고 setTimeout 함수와 동시에 병렬적으로 실행된다.

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

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

// 타이머 함수 setTimeout은 일정 시간이 경과한 이후에 콜백 함수 foo를 호출한다.
// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);
bar();

 

이러한 비동기 처리 방식은 다음 태스크가 대기 없이 곧바로 실행될 수 있다는 장점이 있지만, 위에 적힌 코드 순서대로 실행되지 않기에 코드의 가독성을 떨어트릴 수 있다는 단점이 있다.

타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러가 비동기 방식으로 동작한다.

 

 

---

3. 이벤트 루프와 태스크 큐

앞서 살펴봤듯이 자바스크립트는 싱글 스레드 방식으로 동작한다. 그러나 여러 브라우저가 동작하는 것을 보면 많은 일(task)들이 동시에 처리되는 것을 볼 것이다. 이러한 자바스크립트의 동시성(concurrency)을 지원하는 것이 이벤트 루프 (event loop)다.

 

이벤트 루프는 브라우저에 내장된 기능 중 하나인데, 이에 대해 이해하기 위해 먼저 자바스크립트 엔진이 어떻게 구성되어 있는지 살펴보자.
살펴보기에 앞서 이벤트와 스택과 큐 자료구조에 대해 익숙하지 않다면 아래의 글을 먼저 보고 오자.

https://valueengine.tistory.com/26

[JS/기술면접] 이벤트 (Event) (1)

 

https://valueengine.tistory.com/4

[자료구조] Stack & Queue

 

 

자바스크립트 엔진은 크게 2개의 공간으로 이루어져있다.

 

1. 콜 스택 (call stack)
   
   소스코드(전역 또는 함수 코드 등) 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료 구조인 실행 컨텍스트 스택을 말한다.
   
   
2. 힙 (Heap)
   
   객체가 저장되는 메모리 공간이다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.

함수가 호출되면 함수 실행 컨텍스트가 하나씩 콜 스택에 들어가 실행된다. 함수가 실행될 때 참조할 변수들은 힙에 저장된다.

그런데 타이머 함수나 Ajax 요청, 이벤트 리스너 등은 바로 실행될 수 없다. 그렇기에 이러한 비동기 함수의 코드들이 실행되기 전에 잠시 태스크 큐에 보관되었다가 대기가 끝난 후(콜 스택이 비었을 때)에 콜 스택으로 보내져 하나씩 실행된다. 이때 콜 스택이 비어있는지 그리고 태스크 큐에 태스크가 남아있는지 반복적으로 확인해주는 것이 이벤트 루프다.

 

자바스크립트는 본래 한 번에 코드 한 줄 씩 실행하는 동기적인 언어이지만, 이러한 이벤트 루프 덕분에 코드가 비동기적으로 일어나는 것처럼 할 수 있다.

 

1. 태스크 큐 (task queue / event queue / callback queue)
   
   비동기 함수의 콜백 함수 또는 이벤트 핸들러가 잠시 대기하는 영역이다.
   
   
2.  이벤트 루프 (event loop)
   
   콜 스택 내에 현재 실행 중인 task가 있는지, 그리고 태스크 큐에 task가 있는지 반복적으로 확인하는 기능이다. 만약 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있다면, 이벤트 루프는 순차적(FIFO)으로 대기중인 함수를 콜 스택으로 보내 실행해준다.

 

이벤트 루프와 브라우저 환경

 

반응형

 

---

🌟 자바스크립트 기술면접 질문

1. 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요? 🔥

 

1. 동기
   
   - 태스크를 순차적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크는 대기하고 있다.
   
   - 실행 순서가 보장된다는 장점이 있지만, 앞에 실행된 태스크가 끝날 때까지 다른 태스크가 블로킹된다는 단점
   
   
2. 비동기
   
   - 태스크를 병렬적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료되지 않았더라도 다음 태스크가 곧바로 실행될 수 있다.
   
   - 다음 태스크가 블로킹 없이 실행될 수 있다는 장점이 있지만, 코드가 순차적으로 실행되지 않아 코드의 가독성을 떨어트릴 수 있다.
   
   - 비동기 방식으로 발생하는 것에는 타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러가 있다.

 

2. 이벤트 루프와 태스크 큐에 대해서 알고 있나요? 🔥🔥

 

1. 태스크 큐
   
   - 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 잠시 대기하는 영역
   
   
2. 이벤트 루프
   
   - 콜 스택 내에 현재 실행 중인 task가 있는지, 그리고 태스크 큐에 task가 있는지 반복적으로 확인하는 기능이다. 만약 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있다면, 이벤트 루프는 순차적(FIFO)으로 대기중인 함수를 콜 스택으로 보내 실행해준다.

 

---

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

---

References

 

• https://poiemaweb.com/js-async
• https://poiemaweb.com/js-event
• https://youtu.be/v67LloZ1ieI
• 도서 <모던 자바스크립트 Deep Dive>