매일 면접 연습하기
Q. 자바스크립트의 event loop와 call stack의 동작 방식을 설명하고, microtask와 macrotask 큐의 차이점을 설명해 주세요. 이를 통해 비동기 코드가 실행되는 순서에 대해 설명해 주세요.
→ 자바스크립트 함수가 호출되면 Call Stack에 쌓입니다. 동기 함수의 경우 실행되는 대로 Stack에서 빠져 나가고, 비동기 함수는 Web API로 전달되어 처리됩니다. setTimeout, setInterval과 같은 비동기 작업들은 실행된 후 callback 함수들이 macro task queue에서 대기하고, Promise, async/await같은 비동기 작업은 micro task queue에서 대기하게 됩니다.
대기하고 있는 비동기 함수의 콜백 함수들은 이벤트 루프를 통해서 다시 Call Stack로 전달되어 함수가 실행됩니다.
이벤트 루프는 call stack이 비어있는지 확인한 후에 비어있으면 콜백 큐로부터 차례로 함수들을 call stack으로 전달합니다.
이때 micro queue를 먼저 확인하여 콜백 함수들을 전달하고, 그 다음 macro queue를 확인하여 콜백 함수를 전달합니다.
Q. 자바스크립트의 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)의 차이점을 설명하고, stopPropagation()과 preventDefault() 메서드의 차이점에 대해 설명해주세요.
→ 이벤트 버블링과 이벤트 캡처링 모두 컴포넌트 중첩에 의해서 발생하는 현상입니다.
이벤트 버블링의 경우 자식 요소를 클릭했을 때 부모 요소로 이벤트가 상향하면서 할당된 이벤트가 전파되는 현상입니다.
이벤트 캡처링은 반대로 부모 요소의 이벤트가 자식 이벤트로 하향하면서 전이되는 현상을 말합니다.
(이벤트 버블링의 경우 기본적으로 발생하지만, 이벤트 캡처링의 경우 선택적으로 제어할 수 있다는 차이가 있습니다. 이벤트 캡처링 동작이 필요하면 addEventListener의 cature 인자를 true로 설정하면 됩니다.)
이런 현상을 방지하기 위해서 이벤트 콜백함수 내부에 이벤트 전파를 제어할 수 있는 stopPropagtion 함수를 포함시켜 이벤트 전이가 발생하지 않도록 할 수 있습니다.
그리고 preventDefault() 함수는 이벤트 전파와는 별개로 이벤트를 통한 브라우저의 기본 동작을 수행하지 않도록 제어할 수 있습니다. 예를 들면, 폼 제출시 기본 동작을 막거나, 링크를 클릭시 페이지가 이동하는 등의 동작을 막을 수 있습니다.
