프론트엔드 면접(Sync, Async, 자바스크립트의 동작 원리, Call Stack, TaskQueue, Event Loop)

1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.

Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다.

 

2. 자바스크립트의 동작 원리에 대해 설명해주세요.

자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립트 코드를 한 줄씩 읽으면서 수행할 작업들이 쌓이고, 작업이 수행되면 콜스택에서 제거됩니다. 자바스크립트는 싱글스레드이기 때문에 한번에 하나의 작업만 수행할 수 있습니다. 하지만 Web API를 이용하여 비동기로 작업을 수행할 수 있는데요, 콜스택에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Task Queue(Callback Queue)에 넣습니다. 이벤트 Loop를 통해 콜스택과 태스크큐를 확인하여 콜스택에 있는 작업을 우선적으로 처리하고 이후, 태스크큐에 있는 작업을 콜스택에 넣어 처리하게 됩니다.