[JS ES6]-[17] 동기, 비동기 핵심만 이해하기(1) - 이벤트루프

 

안녕하세요

이번 글에서는 자바스크립트에서의  이벤트루프 - (동기, 비동기) 핵심만 알려드리겠습니다.

 

1. 동기, 비동기란?

한 번에 코드가 한 줄씩 차례로 실행된다는 걸 동기라고 합니다.(synchronous)

오늘 배울 stack이란 공간에서 코드가 한 줄씩 실행됩니다.

 

반면 실행에 시간이 걸리는 코드를 제쳐두고,

실행이 바로 가능한 코드를 먼저 실행하는 방식을 비동기 라고 합니다.(asynchrounous)

 

자바스크립트는 동기적인 언어며, 동시에 비동기적인 코드를 처리할 수 있습니다.

이벤트루프를 배우며 위의 개념을 이해해봐요!

 

동기, 비동기를 위해 크게 4가지를 아셔야 합니다.

1. event loop(이벤트 루프) (stack, heap, quque)

2. 콜백함수(call back function)

3. 프로미스(promise)

4. async, await

 

오늘은 첫 번째로 event loop에 대해 배워보겠습니다.

 

2. 이벤트 루프(스택, 힙, 큐)

컴퓨터는 0과 1만 이해하는 낮은 수준(기계에 가까운)의 언어입니다.

그래서 고수준(사람의 언어와 가까운) 언어인 js를 컴퓨터가 이해하려면, 코드를 변환해야 하는데요.

js는 브라우저 위에서 동작하는데, 크롬에선 v8엔진이 이 변환을 도와줍니다.

 

이 v8엔진은 스택(stack), 힙(heap), 큐(quque)로 이루어져 있고 이벤트 루프로 비동기를 처리합니다.

결국 비동기를 가능하게 하는건 js자체의 기능이 아니고, 웹브라우저 덕분에 가능한겁니다.

 

그래서 위의 개념을 이해하시면, 자바스크립트가 어떻게 동작하는지 아실 수 있습니다.

 

2.1 스택(stack)

자바스크립트는 싱글스레드로 동작하는 언어입니다.

 

그냥 한 번에 한 개의 작업만 할 수 있는 언어라는 건데요. (스택이 하나밖에 없어서 그렇습니다.)

만약 실행 해야 될 코드를 발견하면 이 스택이란 공간에서 위부터 하나하나 실행시킵니다.

console.log(1);
console.log(2);

stack

 

2.2 힙(heap)

힙은 변수나 함수를 저장하는 공간입니다.

예를 들어 변수 name을 가져올 때, js는 힙이란 공간에서 가져옵니다.

 

var name = 'kim';
console.log(name)  //kim

heap, stack

 

2.3 큐(quque)와 이벤트 루프(event loop)

비동기 함수 처리를 위한 공간입니다.

 

일단 큐라는 공간이 없다고 가정해 보겠습니다.

setTimeout 같은 10초 뒤에 실행되는 함수를 사용했습니다.

그럼 이 함수가 stack에 쌓이게 됩니다.

 

이때 사용자가 버튼을 클릭하게 되면,

stack에 setTimeout이 있기 때문에 버튼은 10초 뒤에 눌리게 됩니다.

 

그럼 버튼클릭하는데 10초를 기다려야 하니깐 아주 불편하겠죠?

그래서 이런 비동기적인 함수들은 큐로 이동하게 됩니다.

대충 ajax, eventlistener, setTimeout 등이 비동기적인 함수들입니다.

 

그리고 대기가 끝난 코드들은 순차적으로 큐에서 줄을 서게 되는데요.

스택이 비면 차례차례 스택으로 올라가서 실행을 시켜줍니다.

 

event loop

이렇게 스택을 계속 감시하고 스택에 함수가 없다면, 큐에 있는 비동기 함수들을 올리는 과정을

이벤트 루프라고 합니다.

 

3. 결론

자바스크립트는 동기적인 언어입니다.

그러나 이벤트 루프의 도움으로 비동기적인 코드도 처리할 수 있습니다.

 

그리고 코드를 짤 때 스택을 힘들게 하면 안 됩니다.

예를 들어 10초 연산이 걸리는 코드를 짰습니다.

이 코드를 실행하면, 버튼 클릭 같은 이벤트가 스택에서 기다리기 때문에,

웹사이트가 버벅거릴 수 있습니다.

 

그래서 아래 무거운 코드를 짤 때는 아래 해결책 중 하나를 이용하면 됩니다.

3.1 작업 분할하기

setTimeout 같은 비동기 함수를 이용해 작업을 분할하는 겁니다.

그럼 나누어진 코드는 큐로 이동하고,

중간중간에 이벤트리스너 같은 코드를 실행할 수 있습니다.

setTimtout(() => {
  for(let i = 0; i< 10000; i++){}
})

setTimtout(() => {
  for(let i = 10000; i< 20000; i++){}
})

3.2 web worker 이용하기

다른 파일을 이용해 작업을 시키고, 완료가 되면 값을 가져오게 할 수 있습니다.

Worker 생성자 함수를 이용하시면 됩니다.

 

//1. worker.js 
  let i = 0;
  for(let b = 0; b<10000; b++;){
    i = b;
  }
  postMessage(i);

//2. script.js
const worker = new Worker('worker.js');

worker.onmessage = function(event){
  console.log(event.data)  //100000
}

web worker 참고 :http://www.tcpschool.com/html/html5_api_webWorker#google_vignette