웹 기술 기초

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

위의 JavaScript를 브라우저에서 실행했을 때 콘솔에 표시되는 문자의 순서로 올바른 것은?

  1. AA → B → C → D
  2. BA → D → B → C
  3. CA → D → C → B
정답과 해설 보기

정답: C. A → D → C → B

페이지의 JavaScript는 하나의 메인 스레드에서 동작하며, 지금 실행 중인 코드가 끝날 때까지 다른 처리는 끼어들지 않습니다. 먼저 동기적인 코드가 모두 실행되어 A와 D가 표시됩니다. Promise의 then에 넘긴 처리는 마이크로태스크로서 지금의 코드가 끝난 직후에 실행되므로, 다음으로 C가 표시됩니다. setTimeout에 0 ms를 지정해도 그 처리는 태스크로서 대기열에 들어가고, 이벤트 루프가 마이크로태스크를 다 처리한 후에 꺼내므로 B가 마지막이 됩니다.

이 분야 연습하기 분야로 돌아가기

웹 기술 기초의 다른 문제

  1. 브라우저의 동일 출처 정책에서 https://www.example.com/app/index.html과 같은 출처로 간주되는 URL은?
  2. https://app.example.com 페이지의 JavaScript가 fetch를 사용하여 https://api.example.net/orders로 Content-Type: application/json 본문을 붙인 POST 요청을 보내려 한다. 이때 CORS의 동작으로 올바른 것은?
  3. Service Worker에 대한 설명으로 올바른 것은?
  4. 스마트폰에도 대응하는 반응형 디자인 페이지에서 <head>에 <meta name="viewport" content="width=device-width, initial-scale=1">을 쓰는 주된 목적은?
  5. 이용자마다 내용이 다른 마이페이지의 응답에 Cache-Control: private, max-age=60을 붙였다. 이 지정의 효과로 올바른 것은?