자바스크립트는 싱글스레드 언어라는 이야기를 들어보셨을 것입니다. 이 이벤트 루프는 상당히 어려운 개념이기도 하며 자바스크립트 면접에 단골 질문이기도 합니다.
왜냐하면 자바스크립트 언어만 사용을 하는 것이 아니라 브라우저나 다른 플랫폼위에서 자바스크립트를 사용하는 경우가 있기 때문입니다. 만약 이벤트 루프를 모른다면 실행방법에 대한 오해가 생길 수도 있습니다.
alert('Hello') // Web API
console.log('Hi')
개발자도구에서 위 코드를 실행시켜보면 alert창을 끝낼 때까지 'Hi'는 콘솔창에 출력이 되고 있지 않는 것을 확인 할 수 있습니다.
한가지 코드를 더 살펴보도록 하겠습니다.
setTimeout(() => alert('Hello'), 1000)
console.log('Hi')
1초 후에 alert이 트리거 되서 발동이 되면 확인을 누른 시점에 hi가 출력이 될 것 같지만 실제로는 콘솔창에 'Hi'가 출력되고 alert창이 출력되는 것을 확인할 수 있습니다.
이를 이해하기 위해서는 자바스크립트와 브라우저가 실행되는 환경에 들어가는 이벤트 루프를 이해해야합니다.
자바스크립트는 엔진은 한 번에 한개의 코드만 실행할 수 있는 싱글스레드 언어입니다. 하지만 사용자가 사용하는 환경은 동시에 많은 작업이 들어오는 경우 비효율적입니다. 따라서 비동기방식으로 동시성을 지원하는 방법을 도입했으며 그것이 바로 이벤트 루프입니다.
이벤트 루프를 공부하기 전에 필요한 언어와 기본 배경을 정리해보도록 하겠습니다.