코드 땜장이

자바스크립트 이벤트 루프: 싱글 스레드가 비동기 작업을 처리하는 방식 빠른 답 싱글 스레드는 자바스크립트 코드가 실행되는 콜 스택이 하나라는 뜻이지, 런타임 전체가 한 작업만 한다는 뜻은 아닙니다. 타이머, 네트워크, 파일 I/O 같은 대기 작업은 브라우저 Web APIs나 Node.js 런타임이 맡고, 완료된 콜백만 다시 실행 큐로 들어옵니다. Promise.then , queueMicrotask 같은 마이크로태스크는 일반 태스크보다 먼저 처리되므로 setTimeout 보다 앞서 실행될 수 있습니다. 브라우저와 Node.js는 이벤트 루프 구조가 다르고, Node.js 20 이후에는 타이머와 setImmediate 의 상대 순서를 설명할 때 오래된 자료와 차이가 있습니다. 목차 시간 흐름으로 이해하기 흐름으로 보기 싱글 스레드라는 말의 정확한 범위 이벤트 루프가 실행 순서를 정하는 방식 태스크와 마이크로태스크를 구분해야 하는 이유 브라우저와 Node.js의 차이 실행 환경을 남기는 설정 예시 Node.js에서 관찰하는 실행 순서 오류와 로그로 디버깅하기 흔한 오해 시간 흐름으로 이해하기 현재 작업 동기 코드가 콜 스택에서 위에서 아래로 실행됩니다. → 작업 위임 setTimeout , fetch , 파일 I/O 같은 대기 작업은 런타임으로 넘어갑니다. → 완료 대기 타이머 만료, 네트워크 응답, I/O 완료 콜백이 큐에 들어갑니다. → 마이크로태스크 현재 콜 스택이 비면 Promise.then , queueMicrotask 가 먼저 실행됩니다. → 다음 태스크 타이머, 이벤트 콜백 같은 태스크가 실행되고 브라우저는 렌더링 기회를 얻습니다. 흐름으로 보기 흐름 다이어그램 이 흐름에서 자바스크립트 엔진이 직접 모든 일을 붙잡고 있는 것은 아닙니다. 엔진은 현재 실행 중인 함수 본문을 처리하고, 오래 걸리는 대기 작업은 브라우저나 Node.js 런타임에 넘깁니다. 작업이 끝나면 콜백이 큐에 들어가고, 이벤트 루프가 콜 스택이 비는 시점에 맞...

 자바스크립트를 공부하게 되면, setTimeout, setInterval은 특정 시간 이후에 어떤 일을 실행 하거나 반복 하기위하여 책에서 다루는 것을 볼 수 있다. 그러한 책들에는 설명이 ms를 지정하면, 해당 시간에 특정 함수를 실행 혹은 반복 해준다는 것으로 설명을 하지만.... 실제로 설정한 ms 실행이 되는가?  처음에 공부할 때는 대부분의 개발자, 학생분들이 해당 의문을 가지기에는 힘들고, 실제로 추후에 사용 할 때에, 당하고 나서야... 아, 실제로는 ms설정 한 것이 최소 대기시간이구나 하고 느끼는 분들이 많을 것이다.  그렇다면 왜 그럴까? 자바스크립트는 왜 해당 시간에 실행을 해주지 않는 것일까?  이것을 설명하기 위해서는 자바스크립트 런타임과 이벤트루프를 살펴볼 필요가 있다.   위의 그림을 보면 힙, 스택, 큐라고 적혀 있는데, 각각을 설명 해보면  힙: 노란 네모로 표시 된 네개가 객체라고 보면 되고, 회색은 메모리 영역이라고 보면 된다.  스택: 초록색 네모로 그려져있는 것이 함수 호출이라고 보면 된다. 보통 콜스택이라고 부르는데 크롬 디버거에서 쉽게 확인 할 수 있다.  위 처럼 함수 호출하게 되면 foo가 bar를 실행 하게 되었을 시 위와 같이 함수 들이 스택에 쌓이며 당연하게도 선입후출(First In, Last Out)의 구조이다.  큐: 노란색 영역은 메시지 대기열이며, 빨간색은 메시지 이다. 메시지는 할 일 정도로 보면 편안하다. (일반적으로 이 큐는 태스트 큐라고 불린다.)  메시지들은 이벤트 루프 중에 먼저 들어온 메시지 부터 처리가 된다. 문제는 메시지의 처리가 아무때나 되는 것이 아니라, 스택이 모두 비워지고 나서, 메시지를 처리한다.  ***A메시지가 실행 되면 끝날때까지 실행 되고 나서 B메시지가 실행 된다.  => C언어 처럼 A쓰레드가 foo함수를 실행중에 중단 하고 B쓰...