Medium
동기와 비동기 그 사이 어딘가
자바스크립트에서 동기와 비동기의 경계에 있는 개념들을 탐구하는 글로, 마이크로태스크 큐·매크로태스크 큐·이벤트 루프의 세밀한 동작 방식을 설명합니다. Promise, queueMicrotask, setTimeout 등이 실제로 어떤 순서로 실행되는지 이해함으로써 예상치 못한 실행 순서 버그를 방지할 수 있습니다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 자바스크립트에서 동기와 비동기의 경계에 있는 개념들을 탐구하는 글로, 마이크로태스크 큐·매크로태스크 큐·이벤트 루프의 세밀한 동작 방식을 설명합니다. Promise, queueMicrotask, setTimeout 등이 실제로 어떤 순서로 실행되는지 이해함으로써 예상치 못한 실행 순서 버그를 방지할 수 있습니다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해 비동기 작업을 처리한다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해
자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해 비동기 작업을 처리한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해를 개념으로만 기억하고 맥락 없이 적용하면 자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해 비동기 작업을 처리한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
마이크로태스크
마이크로태스크(Promise, queueMicrotask)는 매크로태스크(setTimeout, setInterval)보다 항상 먼저 실행된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
마이크로태스크를 개념으로만 기억하고 맥락 없이 적용하면 마이크로태스크(Promise, queueMicrotask)는 매크로태스크(setTimeout, setInterval)보다 항상 먼저 실행된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
동기 코드 실행 후 콜 스택이 비면 마이크로태스크
동기 코드 실행 후 콜 스택이 비면 마이크로태스크 큐를 모두 비운 뒤 매크로태스크를 하나씩 처리한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
동기 코드 실행 후 콜 스택이 비면 마이크로태스크 를 개념으로만 기억하고 맥락 없이 적용하면 동기 코드 실행 후 콜 스택이 비면 마이크로태스크 큐를 모두 비운 뒤 매크로태스크를 하나씩 처리한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"동기와 비동기 그 사이 어딘가"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
동기와 비동기 그 사이 어딘가에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "Promise.resolve().then()과 setTimeout(fn, 0)이 동시에 등록되면 어떤 순서로 실행되나요? 그 이유는 무엇인가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "동기와 비동기 그 사이 어딘가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 마이크로태스크 큐와 매크로태스크 큐의 처리 순서를 이벤트 루프 관점에서 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "동기와 비동기 그 사이 어딘가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] await는 내부적으로 Promise.then()으로 변환되므로 마이크로태스크 큐에 예약됩니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "동기와 비동기 그 사이 어딘가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 콜 스택은 동기 실행, 마이크로태스크는 Promise/MutationObserver, 태스크 큐는 setTimeout/XHR 콜백입니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"자바스크립트는 싱글 스레드이지만 이벤트 루프를 통해"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.