#9 이벤트 루프

https://www.notion.so/simsimjae/9-e61ca697d9eb4094a55267d11cffe399

아래 글들은 검색엔진 노출을 위한 글입니다. 

노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment)

---

제가 직접 만든 프로젝트입니다.

http://pickvs.com : 닥전닥후

---

 

Q&A

자바스크립트는 싱글스레드인데, 어떻게 비동기 처리가 가능한거지?

• 자바스크립트 자체에서 비동기 처리를 하는게 아니라 브라우저의 도움을 받는다.
• 자바스크립트는 비동기 요청문을 보면 그걸 자기가 실행하는게 아니라 브라우저API를 사용해서 브라우저에게 비동기 처리를 맡겨버린다.
• 비동기 처리는 브라우저 내부의 자바스크립트 코어 상위단에서 일어나게 된다.

브라우저 내부를 살펴보자

 

힙

• 객체, 변수등이 이곳에 저장된다.

스택

• 함수를 호출하면 스택에 프레임이 생긴다. 자바스크립트는 스택에 있는 함수들을 순차적으로 처리한다. (동기적으로)

브라우저API

• 웹 브라우저에 내장된 API
• 자바스크립트 코어 상위에 존재하고, 이것 덕분에 우리가 JS만으로 할 수 없는 일들을 추가로 할 수 있게된다.
• 이 브라우저 API는 복잡한 C++코드로 짜여져 있음

코드에 대한 깊은 이해

function main() { console.log('A'); setTimeout( function display() { console.log('B'); } , 0); console.log('C'); } main(); //A, C, B 순서로 출력

위 코드가 실행되면 어떤일이 펼쳐지는지 자세히 살펴보자.

1. 먼저 main함수가 콜스택에 삽입된다.

2. main함수가 실행되고 console.log('A'); 구문이 실행되어 콘솔에 A가 찍힌다.

3. setTimeout함수가 실행되는데 이 함수는 브라우저에게 0초 뒤에 display() 콜백함수를 실행시켜달라는 명령이다.(자바스크립트 코어 → 브라우저)

4. 브라우저는 명령을 받자마자 0초가 지나서 콜백함수를 큐에 삽입한다.

5. JS엔진은 그 다음 문장인 console.log('C');를 콜스택에 삽입하고 실행시킨다. 따라서 콘솔에 C가 찍힌다.

6. 그리고 브라우저는 콜스택이 비워졌으므로 큐에 있는 콜백함수 display()를 콜스택에 삽입한다.

7. JS엔진은 콜스택에 삽입된 display()콜백함수를 실행한뒤, 실행이 끝나면 스택에서 pop해버린다.

8. 그림으로 보면 다음과 같은 과정들이 일어난다.

    

    

setTimeout( function, delay ) : 정확히 delay시간 후에 function을 실행하지 않는다. 여기서의 delay는 최소 대기 시간을 의미한다. 즉, 최소한 delay만큼은 기다려야 함수가 실행될거라는거다. delay보다 더 오랜 시간이 걸릴 수 있는데 그건 누구도 장담하지 못한다. 그냥 브라우저가 delay이후에 콜백함수를 큐에 넣어줄뿐이다. 그 후에 콜스택이 비워져있어야 큐에 있는 콜백함수가 스택으로 삽입되어 실행된다.

코드에 대한 더 깊은 이해

function main() { console.log('A'); setTimeout( function exec() { console.log('B'); } , 0); runWhileLoopForNSeconds(3); console.log('C'); } main(); function runWhileLoopForNSeconds(sec) { let start = Date.now(), now = start; while (now - start < (sec*1000)) { now = Date.now(); } } // A C B 출력

1. main()이 콜스택에 올라와서 실행됨
2. setTimeout이 실행되어 exec콜백을 브라우저에게 전달 ⇒ 브라우저는 0초뒤 바로 큐에 콜백 삽입
3. runWhileLoopForNSeconds 함수가 콜스택에 push되고 실행됨 → 3초간 콜스택에서 상주하며 메인스레드에서 실행됨. → 다른 함수들의 실행을 막는다 하여 이런 함수를 blocking statement라고 불림.
4. runWhileLoopForNSeconds가 끝나면 console.log('C'); 실행
5. 콜스택이 비어서 큐에서 기다리던 exec()콜백이 스택으로 push된 후 실행됨.

중요!! setTimeout의 delay는 최소 이정도는 기다려라의 의미이다. 절대로 "정확히 delay시간 후에 이 함수 실행시켜주세요." 가 아니다.