Event loop

wonyoung·2024년 2월 12일

Javascript

목록 보기
14/36

이벤트 루프(Event Loop)는 JavaScript의 비동기 동작을 가능하게 하는 중요한 개념입니다. JavaScript는 싱글 스레드 언어이기 때문에, 코드를 한 번에 한 줄씩 순차적으로 실행합니다. 그럼에도 불구하고, 웹 애플리케이션에서는 네트워크 요청, 타이머, 사용자 이벤트 등 비동기적인 작업들을 처리해야 합니다. 이벤트 루프는 이러한 비동기 작업들을 효율적으로 관리하고, 코드 실행을 순차적으로 유지하면서도 비동기 작업을 가능하게 하는 역할을 합니다.

js의 비동기처리와 이벤트 루프 관련 주요 개념:

  1. 콜 스택(Call Stack): 코드에서 호출된 함수들이 쌓이는 곳입니다. JavaScript는 현재 실행 중인 함수가 완료되어야 다음 함수로 넘어갑니다. 즉, 콜 스택의 맨 위에 있는 함수가 현재 실행 중인 함수입니다.

  2. 태스크 큐(Task Queue): 비동기 작업(예: setTimeout, 사용자 이벤트, AJAX 요청의 콜백)이 완료되었을 때, 해당 작업의 콜백 함수가 대기하는 곳입니다. 이벤트 루프는 콜 스택이 비어있을 때 태스크 큐에서 작업을 하나씩 꺼내 콜 스택으로 이동시킵니다.

  3. 이벤트 루프(Event Loop): 콜 스택과 태스크 큐를 모니터링 하면서, 콜 스택이 비어 있고 태스크 큐에 작업이 있으면, 태스크 큐의 작업을 콜 스택으로 이동시키는 역할을 합니다. 이 과정이 반복되며, 이것이 "루프(loop)"라고 불리는 이유입니다.

동작 방식:

  1. 콜 스택에서 현재 실행 중인 코드(함수 등)가 있으면, 그것이 완료될 때까지 실행합니다.
  2. 콜 스택이 비어 있으면, 이벤트 루프는 태스크 큐에서 대기 중인 다음 작업(콜백 함수)을 콜 스택으로 이동시킵니다.
  3. 이동된 작업은 콜 스택에서 실행됩니다.
  4. 이 과정은 반복되며, 비동기 작업들이 순차적으로 실행될 수 있게 합니다.

이벤트 루프는 JavaScript가 비동기적으로 동작할 수 있게 만드는 핵심 메커니즘입니다. 덕분에 JavaScript를 사용하는 개발자들은 네트워크 요청, 타이머, 사용자 상호작용 등을 효과적으로 다룰 수 있게 됩니다.

profile
😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀

0개의 댓글