자바스크립트 동기/비동기 부셔버리기

평소 Python, Java만 쓰다가 프로토타입 기반 언어인 자바스크립트를 사용하려고 하니 분명히 함수를 호출하고 나면 결과를 받아오고 나서 다음 줄의 코드를 순차적으로 실행해야하는데 순차적으로 동작하지 않는 것이다. 이 과정에서 벽을 느꼈다.... 

그래서 먼저 동기/비동기 방식이 어떠한 메커니즘으로 웹 브라우저에서 작동하는지 살펴보겠다.

먼저 자바스크립트가 어떻게 동작하는지 큰 그림부터 알아보자

왼쪽은 크롬 브라우저에서 오른쪽은 Node.js 에서 자바스크립트가 작동하는 방식이다.

크롬 브라우저에서는 Web API를 통해 작동하고  Node.js에서는 libuv라는 C기반 라이브러리를 통해 동작을 한다.

이 부분부터가 어려운데 쉽게 생각하면 Node.js 이벤트 주도, 논 블로킹 방식을 지원하고 싱글 스레드로 동작하며 libuv통해 시스템 커널에 작업을 위임하여 비동기 작업을 진행한다.

=> 웹에서는 이러한 기능은 Web API가 지원해준다.

 

위 그림의 자료구조 설명은 다음과 같다.

• Heap: 메모리 할당이 발생하는 곳
• Stack(Call Stack) : 실행된 코드의 환경을 저장하는 자료구조, 함수 호출 시 Stack에 push 됩니다.
• Web API: DOM, AJAX, setTimeout 등 브라우저가 제공하는 API
• Callback Queue: 이벤트 발생 시 실행해야 할 callback 함수가 Callback Queue에 추가.
• Event Loop: Stack이 비어있을 경우, Callback queue에서 함수를 꺼내 Call Stack에 추가한다. Call Stack과 Callback Queue를 감시.
  
  그러면 웹에서 동기/비동기 방식이 어떻게 동작하는지 그림을 그려 알아보자

function event() {
    console.log('하나');
    setTimeout(function callback(){ // setTimeout 브라우저 API 0초 후에 실행해라
        console.log('둘')}, 0);
    console.log('셋');
}

event();

위 코드는 절차 지향일 경우 한줄씩 실행되면 하나, 둘, 셋이라는 결과 값이 나와야하지만 비동기 방식을 사용했기때문에 하나, 셋, 둘이라는 결과가 나오게 된다. 

console.log(‘하나’)를 Call Stack에 push

console.log(‘하나’)가 실행되어 화면에 출력된 뒤, Call Stack에서 pop

SetTimeout(function callback())함수를 Call Stack에 push

SetTimeout(function callback()) 함수가 실행 되면서 브라우저에서 제공하는 Web API를 호출 한 뒤 Call Stack에서 pop

console.log(‘셋’)를 Call Stack에 push

console.log(‘셋’)가 실행되어 화면에 출력된 뒤 Call Stack에서 pop

SetTimeout()함수에 전달한 인자값 0초가 지난뒤 콜백으로 전달한 함수 callback 함수가 Callback Queue에 push

Event Loop는 Call Stack이 비어있는것을 확인 하고 Callback Queue를 살펴 본다.

callback() 함수를 발견하고 Event Loop는 Call Stack에 해당 함수를 push한다.

callback() 함수가 실행되고 내부에 있던 console.log('둘')이 Call Stack에 push된다.

console.log('둘')가 화면에 출력되고 Call Stack에서 pop

callback()함수를 Call Stack에서 pop

 

이러한 동기/비동기 처리 방식만 그림으로 알고있다면 코드를 작성할때 큰 도움이 될것이다.

추가로 이것 말고도 비동기 처리 방식에는 callback, Promise, async/await 방식이 있는데 다음 포스팅을 참고 하면 된다.
https://health-coding.tistory.com/56

자바스크립트 리마인드