Event Loop의 용어나 동작 원리 그리고 requestAnimationFrame에 대해 어설프게 알고 있어 정리하고자 한다.

📝 Event Loop가 뭐지?

이름에서 알 수 있듯이, JS가 처리해야 하는 task가 있는지 끊임없이 체크하고 실행시키는 Loop이다.

🔍 왜 필요할까?

JS는 Single Thread이다. JS는 Single Thread에서 Non-blocking을 구현하기 위한 방법으로 Event Loop를 사용합니다. Non-blocking이 뭐길래 구현해야할까?

우선 블록킹(blocking)은 어떤 코드가 CPU를 독점적으로 사용하여 다른 코드의 실행을 막는 것을 말한다. 이와 반대로 논 블록킹(non-blocking)은 코드를 실행해도 다른 코드를 실행할 수 있는 것을 말한다.

하지만 CPU가 코드를 실행하면 항상 블록킹 상태를 유발한다. 왜냐면 CPU는 코드 하나만 실행하기 때문이다. 그러면 논 블록킹은 뭘까?

기준 시간안에 다른 코드를 실행할 수 있다면 논 블록킹이라고 부른다. 예를 들어 기준이 200ms라면 해당 시간안에 코드를 실행하고 다음 코드를 실행한다면 논 블록킹 코드이다.

한번에 여러가지 일을 수행하는 것처럼 보이는 효과가 있다.

결국 Event Loop는 Non-blocking을 구현함으로써 많은 일을 멈추지 않고 한번에 할 수 있게 된다.(병렬성)

우선 task queue와 microtask queue를 알아야 한다.

이벤트 콜백 혹은 Web API와 같은 것을 말한다.