JavaScript - 이벤트 루프와 비동기 동작

이벤트 루프와 비동기 동작에 대해 공부하기 전 알아두기!

 

1. Heap

객체는 힙에 할당됩니다. 힙은 단순히 메모리의 큰 (그리고 대부분 구조화되지 않은) 영역을 지칭하는 용어입니다.

2. Stack

스택(stack)은 제한적으로 접근할 수 있는 나열 구조입니다. 그 접근 방법은 언제나 목록의 끝에서만 일어납니다. 끝먼저내기 목록(Pushdown list)이라고도 합니다.

 

스택은 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형 구조(LIFO - Last In First Out)으로 되어 있습니다. 자료를 넣는 것을 '밀어넣는다' 하여 푸쉬(push)라고 하고 반대로 넣어둔 자료를 꺼내는 것을 팝(pop)이라고 하는데, 이때 꺼내지는 자료는 가장 최근에 푸쉬한 자료부터 나오게 됩니다.

 

 

3.Queue

기본적인 자료구조의 한가지로, 먼저 집어 넣은 데이터가 먼저 나오는 FIFO(First In First Out)구조로 저장하는 형식을 말합니다. 영어 단어 queue는 표를 사러 일렬로 늘어선 사람들로 이루어진 줄을 말하기도 하며, 먼저 줄을 선 사람이 먼저 나갈 수 있는 상황을 연상하면 됩니다.

나중에 집어 넣은 데이터가 먼저 나오는 스택과는 반대되는 개념입니다.

프린터의 출력 처리나 윈도우 시스템의 메시지 처리기, 프로세스 관리 등 데이터가 입력된 시간 순서대로 처리해야 할 필요가 있는 상황에 이용됩니다.

 

 

 

이벤트 루프

- JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다.

 

 

시각적 표현

JavaScript의 이벤트 루프

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7) // 42를 baz에 할당

위 코드의 실행 순서는 다음과 같습니다.

1. bar를 호출할 때, bar의 인수와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다.
2. bar가 foo를 호출할 때, foo의 인수와 지역 변수를 포함하는 두 번째 프레임이 생성되어 첫 번째 프레임의 위로 푸시됩니다.
3. foo가 반환하면, 맨 위의 프레임 요소를 스택 밖으로 꺼냅니다. (bar 호출 프레임만 남음)
4. bar가 반환하면, 스택이 빕니다.

 

JavaScript는 웹 프론트엔드 개발에서 빼놓을 수 없는 언어 중 하나입니다. 그리고 JavaScript에서 비동기(asynchronous) 동작을 다루는 것 은 매우 중요합니다. JavaScript는 단일 스레드(single-thread) 언어로, 한 번에 하나의 작업(task)만 처리할 수 있습니다. 그러나 이벤트 루프 (event loop)라는 메커니즘을 사용하여 비동기 동작을 지원합니다.

 

이벤트 루프는 브라우저나 Node.js와 같은 환경에서 실행되는 JavaScript 코드의 동작 방식을 제어합니다. 이벤트 루프는 큐(queue)에 있는 작업(task)을 순서대로 실행하며, 이 작업이 완료되지 않았을 때 블로킹(blocking)되지 않고 다음 작업을 수행할 수 있습니다.

 

이벤트 루프는 다양한 요소로 구성되어 있습니다. 먼저 Call Stack이 있습니다. Call Stack은 현재 실행 중인 함수의 정보를 저장하는 공간입 니다. 다음으로 Web APIs가 있습니다. Web APIs는 브라우저에서 제공하는 API들입니다. 예를 들어, setTimeout()이나 XMLHttpRequest 객체 등이 여기에 속합니다. Web APIs에서는 비동기 동작이 일어납니다. Web APIs에서 발생한 콜백 함수들이 Callback Queue에 저장됩니 다. Callback Queue는 Web APIs에서 발생한 콜백 함수들이 저장되는 공간입니다. 마지막으로, Event Loop가 있습니다. Event Loop는 Call Stack과 Callback Queue를 모니터링하며, Call Stack이 비었을 때 Callback Queue에 있는 콜백 함수를 Call Stack으로 이동시킵니다.

 

이벤트 루프의 동작 방식을 이해하면, JavaScript에서 비동기 동작을 하는 메서드를 사용할 때 어떻게 동작하는지 이해할 수 있습니다. setTimeout() 메서드를 사용하여 일정 시간이 지난 후에 함수를 실행하도록 할 때, 이벤트 루프는 Web APIs에서 일정 시간을 기다린 후에 콜 백 함수를 Callback Queue에 추가합니다. 그리고 Call Stack이 비었을 때, 콜백 함수를 Call Stack으로 이동시켜 실행합니다.

 

이벤트 루프는 JavaScript에서 비동기 동작을 가능하게 하며, 콜백 함수와 Promise, async/await와 같은 도구들도 이벤트 루프 위에서 동작합 니다. 따라서 JavaScript를 사용하는 개발자라면 이벤트 루프의 동작 방식을 이해하고, 비동기 동작을 적절하게 다룰 수 있도록 하는 것이 중요 합니다. 이벤트 루프를 이해하는 것은 JavaScript를 더욱 효과적으로 다룰 수 있는 기반을 만드는 것입니다.

 

 

 

 

비동기 동작

JavaScript에서는 많은 비동기 동작을 다루어야 합니다. 이벤트 루프가 이러한 비동기 동작을 제어하기 위해 사용되는데, 대표적인 비동기 동 작으로는 setTimeout(), setInterval(), Promise, async/await 등이 있습니다.

 

setTimeout()은 일정 시간이 지난 후에 콜백 함수를 실행하는 메서드입니다. 이때, 일정 시간이 지난 후에 실행되는 콜백 함수는 Web APIs에 서 실행됩니다. setInterval()은 일정한 간격으로 콜백 함수를 실행하는 메서드입니다. 이 메서드도 setTimeout()과 동일하게 Web APIs에서 실행됩니다.

 

Promise는 비동기 처리를 위한 객체입니다. Promise를 사용하여 어떤 작업을 비동기적으로 처리하고, 작업이 완료됐을 때 결과를 반환할 수 있습니다. Promise는 미래에 완료될 작업을 대신하여 대기(waiting)하는 객체입니다. Promise를 사용하면 콜백 지옥(callback hell)과 같은 문제를 해결할 수 있습니다.

 

async/await는 Promise를 더욱 쉽게 사용할 수 있도록 만든 문법입니다. async 함수는 항상 Promise를 반환하며, await 키워드는 Promise 가 결과를 반환할 때까지 함수의 실행을 일시 중지합니다. 이를 통해 동기적인 코드와 유사한 구문으로 비동기적인 코드를 작성할 수 있습니다.

 

JavaScript에서 비동기 동작을 다루는 방법은 다양하지만, 이벤트 루프의 동작 방식을 이해하면 어떤 방법을 사용하더라도 코드를 더욱 효과 적으로 작성할 수 있습니다.

 

 

 

자바 스크립트의 이벤트 루프와 비동기 동작을 공부하면서 Qt를 이용한 프로그램 제작에서 Thread의 개념을 공부할 때 이와 비슷하다는 느낌을 많이 받았습니다. 왜냐하면 Thread 역시 Multi Thread를 통해 여러가지 동작을 동시에 수행하면서 성능을 높힐 수 있듯이 자바 스크립트 역시 한개의  Main Thread 이외에 비동기 동작을 선언 해줌으로서 더욱 복잡한 동작을 빠르게 수행 할 수 있기 때문입니다.

 

 

 

#출처

1 . 엘리스 AI 트랙 JavaScript 101 - (10) 이벤트 루프와 비동기 동작

2.  mdn - Javascript - 이벤트 루프

https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop#%EC%8B%9C%EA%B0%81%EC%A0%81_%ED%91%9C%ED%98%84

3. 위키백과(Stack, Queue)

https://ko.wikipedia.org/wiki/%EC%8A%A4%ED%83%9D(스택)

스택 - 위키백과, 우리 모두의 백과사전

https://ko.wikipedia.org/wiki/%ED%81%90_(%EC%9E%90%EB%A3%8C_%EA%B5%AC%EC%A1%B0) (큐)