자바스크립트 비동기 처리 - 이벤트 루프

Feb 27, 2024

Contents

💡

자바스크립트는 단일 스레드 언어로, 데이터 처리를 동기적(순차적)으로 실행한다. 동기적 방식은 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 그래서 자바스크립트는 비동기 방식으로 데이터를 처리한다.

1. 비동기적 처리

프로그래밍에서 코드가 위에서 부터 아래로 차례로 동작하는 방식을 동기적(Synchronous) 방식이라고 한다.

동기적 방식은 간단하지만, I/O 과정 등 작업시간이 오래 걸리는 처리의 경우 순차적으로 진행되기 때문에 하나의 처리가 끝날 때 까지 기다려야 한다. 그러면 전체적인 성능과 UX 가 떨어지게 된다.

💡

순차적으로 처리가 이루어지기 때문에 처리 시간이 가장 짧더라도 가장 오래 걸린다.

자바스크립트는 웹에서 동적인 페이지를 만들기 위해 개발된 스크립트 언어이다. 개발 당시 복잡한 처리가 필요하지 않아 싱글 스레드로 구현되었다. 싱글 스레드 방식은 하나의 작업만 처리가능한 동기적 처리가 이루어지기 때문에 이를 해결하기 위해 이벤트 루프를 이용한 비동기적 처리를 활용한다.

💡

비동기적 방식은 처리 시간이 오래 걸리는 업무들은 이벤트 루프에 넣어두고, 그 다음 코드를 순차적으로 처리한다. 그리고 모든 코드가 종료되면 이후에 이벤트 루프를 실행하게 된다. 이때 코드가 종료된 후 이벤트 객체를 확인하기 위해 프로미스(Promise) 객체가 필요하다.

2. 이벤트 루프

💡

이벤트 루프(Event Loop)는 자바스크립트 엔진 내부의 처리 흐름을 제어하는 구조이다.

이벤트 루프는 크게 콜 스택(Call Stack), 백그라운드(Background), 태스크 큐(Task Queue)로 구성되어 있다.

콜 스택(Call Stack): 현재 실행 중인 작업(함수)이 쌓이는 곳. 콜 스택이 비어 있으면, 즉 실행 중인 함수가 없으면 이벤트 루프는 태스크 큐에서 다음 작업을 가져와 콜 스택에 넣는다.

백그라운드(Background): setTimeout 같은 비동기 함수의 콜백 함수를 대기시키는 곳. 설정한 시간이 지나면 백그라운드에서 콜백 함수를 태스크 큐로 이동 시킨다.

태스크 큐(Task Queue): 백그라운드에서 완료된 콜백 함수들이 대기하는 곳. 이벤트 루프는 콜 스택이 비어 있을 때 태스크 큐의 작업을 콜 스택으로 이동 시킨다.

3. 쿼리로 비동기적 방식 확인


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>

    <h2>JavaScript While Loop</h2>

    <p id="demo"></p>

    <script>
        console.log("1");

        setTimeout(() => {
            console.log("after 3s")
        }, 3000)

        console.log("2");

        setTimeout(() => {
            console.log("after 5s")
        }, 5000)

        console.log("3");
    </script>

</body>

</html>

순차적으로 진행되면 콘솔에 1, after 3s" , 2 , after 5s, 3 이 출력되어야 한다.