Skip to content
himprover
GitHubVelog

[번역] Node.js 이벤트 루프 애니메이션

Translate, JavaScript7 min read

banner

이 게시물은 원본 아티클인 Node.js animated: Event Loop 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 Andrew Hu 에게 있습니다.

자바스크립트와 Node.js가 싱글 스레드로 구성되었다는 건 많이 들어보았을 겁니다. 그런데 이건 실제로 무엇을 의미하는 걸까요?

이것은 자바스크립트가 한번에 하나의 작업만 수행 할 수 있음을 의미합니다. 예를들어, 우리는 곱하기와 더하기를 동시에 할 수 없습니다. 보통 우리는 순서를 정해서 하죠. 더한 다음 곱하거나 그 반대로요.

현대의 컴퓨터는 굉장히 빠르고, 두개 또는 그 이상의 연이은 작업을 동시에 진행해 결과를 보여주는 것 처럼 보입니다. 그러나 여기에는 예외가 있습니다.

우리는 느린 웹 사이트에서 데이터를 스크랩(scrape) 하거나, 데이터베이스 쿼리의 결과를 얻기 위해 30초 이상을 기다리기도 합니다. 그렇다면 우리는 느린 데이터베이스 쿼리 때문에 싱글 스레드의 다른 작업들을 실행하지 못하도록 차단하기를 원할까요? 다행히도, Node.js는 Libuv 라는 C++ 라이브러리 덕분에 다른 작업을 실행하는 것을 멈추지 않습니다. Libuv는 이벤트 루프와 네트워크 요청, DNS 해석, 파일 시스템 작업, 데이터 암호화 등 비동기 작업을 처리하는 역할을 담당합니다.

Node.js가 데이터베이스 쿼리 같은 작업을 할 때 내부적으로 무슨 일이 일어나는 걸까요? 코드를 차근차근 단계별로 알아보도록 하겠습니다.

1

자바스크립트의 V8 엔진은 콜스택(CallStack)을 관리합니다. 이는 프로그램의 실행 중인 부분을 추적하는 중요한 핵심 구성 요소 입니다.

언제던지 우리가 자바스크립트 함수를 불러오면, 이는 콜스택에 밀어넣어집니다. (push) 하나의 함수가 끝이나 return 상태에 도달하면 이는 콜스택에서 꺼내집니다. (pop)

예제에서는, console.log('Starting Node.js')코드가 콜스택에 추가되고 Starting Node.js가 콘솔에 출력됩니다. 그렇게 함으로써 이는 log 함수의 끝에 도달하고 콜스택에서 제거됩니다.

2

데이터베이스 쿼리 코드를 확인해볼까요. 이 작업은 아마 오랜 시간이 소요 될 것 같아서 바로 꺼내집니다. 이는 Libuv 로 옮겨져 백그라운드에서 비동기적으로 처리됩니다. 이와 동시에 Node.js는 다른 코드를 실행시켜 싱글스레드가 중단되지 않도록 합니다.

나중에는 Node.js가 쿼리를 처리하는 방법을 알 수 있을 것입니다. 왜냐하면 우리는 콜백 함수를 연결해 작업 결과나 오류를 처리하는 지침을 함께 제공했기 때문입니다. 이 경우에는 간단한 console.log 이었지만, 실제 어플리케이션에서는 복잡한 비즈니스 로직이나, 데이터 가공이 될 것입니다.

3

Libuv가 백그라운드에서 처리하는 동안, 자바스크립트는 멈추지 않고 console.log("Before query result")를 실행할 수 있습니다.

4

쿼리가 끝나면 콜백은 I/O 이벤트 큐로 밀어넣어져 곧바로 실행됩니다. 이벤트루프는 큐와 콜스택을 연결합니다. 그리고 콜스택이 비어있는지 확인하며, 비어있다면 실행을 위해 첫번째 큐를 이동시킵니다.

5

코드는 여기에 있습니다. https://github.com/fabrilallo/event-loop-1

이벤트 루프에 관한 짧은 퀴즈

콘솔에 어떻게 출력이 될 지 생각해보세요.

6 7

결론

이벤트 루프, 위임 및 비동기 처리 메커니즘은 Node.js가 수천 개의 연결을 처리하고, 거대한 파일을 읽고 쓰며 타이머를 처리하는 동안 코드의 다른 부분과 함께 작업하기 위해 사용되는 숨겨진 구성요소 입니다.

이 아티클에서는 Libuv의 중요한 역할과 장기간 실행될 것으로 보이는 여러 작업을 처리하는 능력을 보았습니다. 그리고 동시에 이벤트루프를 살펴보며 I/O 이벤트 큐의 비동기 작업의 콜백과 콜스택 사이의 다리/연결자(Bridge/connecter)로서의 역할을 알아보았습니다.

추가적으로 이 아티클에는 이벤트루프에서 타이머, I/O, 프로미스(promises), **틱(ticks)**이 어떻게 다른 단계로 처리되는지 자세히 정리해두었습니다.


역주 의견

여기서부터는 저(himprover)의 의견 입니다.

개인적으로 이벤트 루프는 개념이 어렵지 않으나 자꾸 까먹게 되는 내용이라고 생각합니다.

이렇게 움직이는 애니메이션과 함께 하니 더 기억에 오래 남을 것 같네요.