동기와 비동기 처리 방식 (Asynchronous processing model)

본 포스팅은 https://poiemaweb.com/js-async 에 대한 글을 발췌한 포스팅임을 알려드립니다.    

    

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

동기식 처리 모델은 직렬적으로 task를 수행한다. 

즉, task는 순차적으로 실행되며 어떤 작업이 수행중이면 다음 작업은 블로킹(blocking, 작업중단) 된다. 

블로킹과 논블로킹 방식을 나타낸 그림

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다.

동기식 처리 모델 (Synchronous processing model) - 서버에서 res가 올때까지 이후 task는 blocking 된다.

아래 코드는 동기적으로 동작하는 코드로, 위에서부터 아래로 순차적으로 실행된다.

function func1() {
  console.log("first func!");
  func2();
}
function func2() {
  console.log("second func!");
  func3();
}
function func3() {
  console.log("third func!");
}

func1();

 

 

2. 비동기식 처리 모델 (Asynchronous processing model 또는 Non-Blocking processing model)

비동기식 처리 모델은 병렬적으로 task를 수행한다.

즉, task가 종료되지 않은 상태라고 하더라도 대기하지 않고 바로 다음 task를 실행한다.

예를 들어서 서버에서 데이터를 가져와서 화면에 표시하는 task를 수행할때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될때까지 기다리지 않고(Non-Blocking), 즉시 다음 task를 수행한다.

이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속해 수행한다.

 

자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

 

비동기식 처리 모델 (Asynchronous processing model) - 요청을 하고 즉시 다음 task를 수행하고 res가 오면 해당 task를 이어서 수행한다.

 

 

아래의 코드는 비동기적으로 동작하는 코드이다. 순차적으로 실행되지 않는다.

function func1() { 
  console.log('func1'); 
  func2(); 
} 

function func2() { 
  setTimeout(function() { 
    console.log('func2'); 
  }, 0);
 
   func3(); 
 } 
 
 function func3() { 
   console.log('func3'); 
 } 
 
 func1();

위의 예제 코드에서 setTimeout 메서드에 두번째 인수인 인터벌을 0초로 설정해도 콘솔에는 "func1 func2 func3"의 순서로

로그가 출력되지 않는다.

왜냐하면 setTimeout 메서드가 비동기 함수이기 때문이다.

그림과 같이 setTimeout 메서드는 대표적인 비동기 함수이다.

 

함수 func1 이 호출되면 함수 func1은 Call Stack에 쌓인다.

그리고 함수 func1은 func2를 호출하므로 함수 func2가 Call Stack에 쌓이고 setTimeout()이 호출된다.

setTimeout()의 콜백함수는 즉시 실행되지 않고, 지정된  대기시간만큼 기다리다가 "tick"이벤트가 발생하면 태스크 큐로 이동한 후

Call Stack이 모두 비어졌을 때 Call Stack으로 이동되어 실행된다.

 

이벤트 루프(Event Loop)에 의한 setTimeout 콜백함수의 실행

 

이벤트 루프는 아래의 포스팅을 참고바랍니다.

https://dev-coderkim.tistory.com/78

이벤트 루프란? [ 자바스크립트 동작원리 ]

 

오늘도 긴글 읽어주셔서 감사합니다.

모두 즐코하세요!!! :)