web api 에 대해 질문이 있습니다.

Question

자바스크립트는 싱글 스레드 언어라고 알고 있습니다. 자바스크립트 자체적으로 실행하지 못하고 Node나 브라우저에서 실행해야 되는데 브라우저에서 실행할 경우 선생님께서 가르쳐주신 콜스택, Callback Queue, WebpAPI 모듈이 EventLoop를 통해 멀티스레드처럼 동작한다고 이해했습니다. 여기서 질문이 있는데요. SetTimeout에서의 콜백이 WEB API에게 던져놓고 시킬 때, 싱글스레드 녀석은 CallStack에서 일한다고 바쁜데 언제 SetTimeout 콜백을 처리하나요? WEB APIs가 콜백을 따로 처리한다는 건 또 다른 스레드가 존재한다는 의미인가요? 그러면 싱글스레드인척하는 멀티스레드인셈인가요?? ㅎㅎ;

프롱트 · Answer

안녕하세요. setTimeout 에 전달된 콜백은 WEB APIs영역에서 실행되는건 아닙니다. 이 콜백함수 역시 call stack에 올라와서 실행되게 됩니다. 그러면 WEB APIs는 뭐하는거냐? 그곳에서는 지정된시간(settimeout에서 지정한 delay time)을 계산해주는 역할이라고 보면됩니다. 그 활동 자체는 별도의 프로세스처럼 동작한다고 생각하셔도 됩니다. 메인쓰레드와 별개로 처리되는것이지요. 그렇게 WEB API의 역할이 끝나면 비로서 콜백함수를 콜백큐에 보내고, 이벤트 루프가 콜스택에 올려서 실행할 수 있는 상태로 만들어주죠. 이해가 되셨으면 좋겠네요 ^^

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이동훈님! 자바스크립트의 동작 방식과 관련된 질문을 해주셨네요. 브라우저 환경에서의 자바스크립트는 싱글 스레드지만, 브라우저 자체가 멀티스레드로 동작하여 비동기 작업을 효율적으로 처리할 수 있습니다. setTimeout 과 같은 함수는 Web API를 통해 비동기적으로 처리됩니다. 자바스크립트 런타임은 다음의 주요 구성요소로 이루어져 있습니다: Call Stack : 여기서 모든 함수가 호출되고 실행됩니다. 자바스크립트는 싱글 스레드로 이 Call Stack을 통해 매 순간 하나의 작업만 처리합니다. Web APIs : 비동기 작업(예: setTimeout , fetch )이 이곳에서 처리됩니다. 이 작업은 Call Stack을 차단하지 않고, 완료되면 Task Queue 에 콜백을 전달합니다. Event Loop : Call Stack이 비어있을 때 Task Queue에 있는 콜백을 Call Stack으로 보내 실행하는 메커니즘입니다. setTimeout 의 콜백 함수는 실제로 Web API에서 바로 실행되지 않습니다. 대신, 지정된 시간이 지나면 Task Queue에 콜백이 추가되고, Call Stack이 비어있을 때 Event Loop가 이 콜백을 Call Stack으로 보냅니다. 결론적으로 Web APIs는 병렬로 동작하지는 않지만, 비동기로 작업을 처리할 수 있도록 도와줍니다. 따라서 자바스크립트는 싱글 스레드이지만, 브라우저의 여러 스레드를 활용하여 마치 멀티스레드처럼 비동기 작업을 처리하는 것입니다. 여기에서 관련된 더 자세한 설명이 있는 질문 링크 를 참고하시면 도움이 될 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.