본문 바로가기
개발/JavaScript

자바스크립트 코어 - Event Loop

by 코드페이퍼 2021. 4. 27.

이벤트 루프 동작 방식

자바스립트는 싱글 쓰레드 기반으로 돌아간다. 이게 무슨 말일까? 한번에 하나의 작업 밖에 못한다는 뜻. 그럼 어떻게 하나의 작업 밖에 하지 못하는지 알아보자.

위 그림에서 보이는것과 같이 Call Stack은 코드가 한줄 한줄 실행되면서 실행 컨텍스트(EC)를 담아 하나씩 처리한다.

function foo() {
	console.log('foo');
}

function boo() {
	foo();
}

boo();

// 위 코드를 실행하면 아래와 같이 Call Stack에 담긴다.

/*
	Stack = [boo()] // 9번째 줄 boo() 호출
    Stack = [boo(), foo()] // boo()를 실행하다 6번째 줄 foo() 호출
    Stack = [boo(), foo(), console.log('foo')] // foo()를 실행하다 2번째 줄 console.log 실행

	// foo
    // 로그에 foo라고 프린트 후 Call Stack에서 제거
    
    Stack = [boo(), foo()]; // foo 종료 및 제거
    Stack = [boo()]; // boo 종료 및 제거
    Stack = []; // 모두 실행했음
    
*/

일반적인 자바스크립트 코드는 이런식으로 동작한다. 그렇다면 비동기 함수들은 어떻게 처리가 될까?

// 비동기 처리

console.log('start');

fetch(api).then(res => console.log('done'));

console.log('end');

/*
	결과:
    start
    end
    done
*/

혹시 start -> done -> end 순서로 결과가 나올거라 예상했나? fetch같은 비동기 함수를 처리할때는 오늘의 주제 Event Loop 개념이 등장한다. 코드를 순차적으로 실행하다 비동기 함수가 나오면 브라우저의 Web API 부분에 이 작업은 너가 좀 처리하라고 보내고 바로 다음 코드를 실행한다. 그렇게 비동기 작업은 Web API가 열심히 작업하고 Call Stack에서는 나머지 코드들이 실행된다. 실행 중 Web API의 작업이 종료되면 작업 결과를 Callback Queue에 보내고 이때 Event Loop이라는 친구는 Call Stack이 완전히 비어질때까지 기다린다. 그리고 Call Stack에 아무것도 없을때 Callback Queue에 대기하던 함수를 Call Stack에 보내주면 Call Stack은 해당 함수를 실행한다.

이런 과정을 아래 그림으로 간단하게 그려보았다.

요약하면 Event Loop이라는 요소는 Callback Queue에 함수가 들어오면 Call Stack이 비워질때까지 계속 체크하고 Queue안에 있는 함수를 전달해주는 역할을 한다.


여기까지 Event Loop이 어떤건지 알아보았다. 그런데 이게 왜 필요할까 생각보자. 만약 비동기를 따로 처리안한다고 예를 들어보자. setTimeout도 비동기 함수다. setTimeout에 5초를 설정해보자. 코드가 위에서부터 실행되다가 setTimeout가 실행되는 순간, 5초 동안은 프로그램은 아무것도 안한다. setTimeout을 사용한 UI 애니메이션 요소가 있다고 가정하면 해당 애니메이션이 끝날동안 화면은 정지상태 일거다. 

5초동안 사용자는 웹사이트가 고장났다고 생각할거다. 이러한 문제를 해결하기 위해 Event Loop을 사용한다.

댓글0