inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

AI시대의 웹개발 : 비동기 프로그래밍과 데이터 통신 최적화(프롱트 특강)

이벤트루프와 단일쓰레드의 부정확성

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

87

이동훈

작성한 질문수 6

0

자바스크립트는 싱글 스레드 언어라고 알고 있습니다.

자바스크립트 자체적으로 실행하지 못하고

Node나 브라우저에서 실행해야 되는데

브라우저에서 실행할 경우 선생님께서 가르쳐주신 콜스택, Callback Queue, WebpAPI 모듈이 EventLoop를 통해 멀티스레드처럼 동작한다고 이해했습니다.

 

여기서 질문이 있는데요.

SetTimeout에서의 콜백이 WEB API에게 던져놓고 시킬 때,

싱글스레드 녀석은 CallStack에서 일한다고 바쁜데 언제 SetTimeout 콜백을 처리하나요?

WEB APIs가 콜백을 따로 처리한다는 건

또 다른 스레드가 존재한다는 의미인가요?

 

그러면 싱글스레드인척하는 멀티스레드인셈인가요?? ㅎㅎ;

javascript promise frontend fetch-api

답변 2

0

프롱트

안녕하세요.

setTimeout 에 전달된 콜백은 WEB APIs영역에서 실행되는건 아닙니다.

이 콜백함수 역시 call stack에 올라와서 실행되게 됩니다.

 

그러면 WEB APIs는 뭐하는거냐?

그곳에서는 지정된시간(settimeout에서 지정한 delay time)을 계산해주는 역할이라고 보면됩니다.

그 활동 자체는 별도의 프로세스처럼 동작한다고 생각하셔도 됩니다.

메인쓰레드와 별개로 처리되는것이지요.

 

그렇게 WEB API의 역할이 끝나면 비로서 콜백함수를 콜백큐에 보내고, 이벤트 루프가 콜스택에 올려서

실행할 수 있는 상태로 만들어주죠.

 

이해가 되셨으면 좋겠네요 ^^

 

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이동훈님!

자바스크립트의 동작 방식과 관련된 질문을 해주셨네요. 브라우저 환경에서의 자바스크립트는 싱글 스레드지만, 브라우저 자체가 멀티스레드로 동작하여 비동기 작업을 효율적으로 처리할 수 있습니다. setTimeout과 같은 함수는 Web API를 통해 비동기적으로 처리됩니다.

자바스크립트 런타임은 다음의 주요 구성요소로 이루어져 있습니다:

  1. Call Stack: 여기서 모든 함수가 호출되고 실행됩니다. 자바스크립트는 싱글 스레드로 이 Call Stack을 통해 매 순간 하나의 작업만 처리합니다.

  2. Web APIs: 비동기 작업(예: setTimeout, fetch)이 이곳에서 처리됩니다. 이 작업은 Call Stack을 차단하지 않고, 완료되면 Task Queue에 콜백을 전달합니다.

  3. Event Loop: Call Stack이 비어있을 때 Task Queue에 있는 콜백을 Call Stack으로 보내 실행하는 메커니즘입니다.

setTimeout의 콜백 함수는 실제로 Web API에서 바로 실행되지 않습니다. 대신, 지정된 시간이 지나면 Task Queue에 콜백이 추가되고, Call Stack이 비어있을 때 Event Loop가 이 콜백을 Call Stack으로 보냅니다.

결론적으로 Web APIs는 병렬로 동작하지는 않지만, 비동기로 작업을 처리할 수 있도록 도와줍니다. 따라서 자바스크립트는 싱글 스레드이지만, 브라우저의 여러 스레드를 활용하여 마치 멀티스레드처럼 비동기 작업을 처리하는 것입니다.

여기에서 관련된 더 자세한 설명이 있는 질문 링크를 참고하시면 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

imagesLoaded에 관한 질문

0

12

2

useEffect와 lifecycle문의

0

16

1

프론트엔드 학습 수준 문의

0

27

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

42

2

최근 코테, 과제 테스트 트렌드

0

59

2

lucide react 아이콘 설치

0

36

2

17강 zustand store 서버에서 생성

1

30

1

문의관련 문의

0

37

2

next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?

0

47

2

76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.

0

42

2

ai 도구 질문

0

30

1

저는 왜 콘솔에서 props가 한 줄만 찍히나요?

0

45

1

렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.

0

46

2

렌더링 차단 리소스 관련해서 CSS 질문이 있습니다.

0

34

2

데이터 로딩중 화면만 계속 나와요!!

0

51

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

76

2

02-04 layout.tsx 구조가 달라요

0

57

2

불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?

0

50

1

개인 프로젝트로 앱 개발해서 다운로드 1300 달성했는데 어느 정도 의미가 있을까요? (안드로이드 개발자)

0

68

1

22강 강의 영상 문의 드립니다.

0

47

2

20강 마무리작업에서

0

37

2

아래 위치에 동영상이 보이지 않습니다.

0

51

1

9강하고 11강 동영상이 똑같은데요?

0

141

2

동영상오류인거 같아요

0

80

1