피자를 데우려고, 전자레인지 시간을 1분으로 맞춰놓았다. 시간을 세는 건 내 역할이 아니다. 시간을 세는 건 전자레인지 내부의 타이머가 해주며, 그동안 나는 다른 일을 할 수 있다. 시간이 다 되면 알림이 울리고, 그때 피자를 꺼내서 먹는다.
자바스크립트는 싱글 스레드(Single thread) 언어라서, 한 번에 한 가지 일밖에 하지 못한다. 몸이 하나인 것과 같다. 그렇다면, 오래 걸리는 작업은 어떻게 처리할까? 기다리는 동안 아무것도 진행하지 못한 채, 기다려야만 할까? 네트워크 통신, 파일 다운로드, 일정 시간 이후에 처리할 작업 등.. 이렇게 다소 시간이 걸리는 작업들은 비동기로 처리된다.
안내 메시지가 5초 동안 떴다가 사라지는 UI를 구현한다고 생각해보자. 메시지가 사라지는 5초 동안 버튼, 입력 등 아무 동작을 할 수 없다면, 사용자는 얼마나 화가 날까.. 우리는 5초를 세는 작업은 다른 곳에 위임해두고, 다음 작업을 계속 이어나갈 수 있게 해야한다. 즉, 타이머 역할은 비동기로 만들어놓고, 동기적인 작업들을 처리한다.
1. setTimeout을 등록하고,
2. 시간 측정은 브라우저 내부 타이머 시스템(Web API)에 맡긴다.
3. 시간이 다 되면, setTimeout의 콜백이 콜백 큐에 등록된다.
4. 콜 스택이 다 비워지면, 콜백이 실행된다.(안내 메시지 제거 코드 동작)
피자가 다 데워졌더라도, 내가 하기로 했던 다른 일들을 모두 끝낸 후, 피자를 꺼내서 먹는 것이다. 이렇게 여러 도구의 도움으로, 몸은 하나지만 동시(Concurrency)에 여러 일을 하는 것처럼 작업들을 처리할 수 있다. 세탁기를 돌리고, 스타일러를 사용하는 동안 나는 청소를 할 수 있다.
여기서 중요한 건, 코드 자체는 자바스크립트 엔진의 메인 스레드에서만 실행된다는 것이다. 세탁기, 스타일러에서 옷을 꺼내는 건 결국 내가 해야하는 것이다.
