20221110 TIL 비동기는 소듕해

https://images.app.goo.gl/Lq3PDGEbRGe3fgAw5

말만 들어도 어렵던 비동기 개념을 처음 접한지 1년이 지난 지금 드디어 비동기가 두렵지 않고 소중해졌다.
비동기 개념이 없었다면 자바스크립트가 지금처럼 이렇게 많이 쓰이지 않았거나 웹사이트를 이용하면서 매우 답답함을 느끼고 있었을 것이다.
네트워크가 잘 안터져서 속도가 느린 답답함을 넘어 항상 그 이상의 답답함을 느끼고 있었을지도 모른다.
그 이유는 자바스크립트 런타임은 싱글 스레드라 한 번에 한 가지 일밖에 못하기 때문이다.

동기, 비동기라는 개념을 웹 공부를 하다보면 필수적으로 접하게 된다.
동기적이라는 것은 모든 게 순차적으로 진행된다는 것이다.
그런데 자바스크립트는 한 번에 한 가지 일밖에 못한다.
은행 창구에 직원이 한 명 밖에 없는데 나의 순번이 한참 남았는데 직원과 마주보고 있는 손님이 대출도 하고 적금도 들고 무언가를 엄청 많이 해서 1시간이 지나도 업무가 끝나지 않았다고 해보자.
그러면 나를 비롯한 대기자들은 하염없이 기다리고 있어야 할 것이다.
자바스크립트가 동기적으로 동작한다면 위와 같이 매우 비효율적으로 동작했을 것이다.
따라서 비동기 개념은 두려워할 대상이 아니고 감사해야 할 대상이다.
비동기 방식 덕분에 오래 걸리는 작업을 실행해도 아무 문제 없이 끝날 때까지 기다리지 않고도 다른 작업들을 할 수 있기 때문이다.

비동기 방식을 은행 예시로 설명해본다면 직원에게 뭔가 많은 업무를 보고자 하는 손님이 오면 일단 상담실로 보내드리고, 다른 아주 간단한 빠르게 끝나는 손님들을 직원 한 명이 계속 빠르게 처리한다.
그러면 간단한 업무를 보고자 하는 사람도 답답함 없이 빠르게 일을 마무리할 수 있을 것이다.
그리고 직원이 손님을 모두 응대해서 대기자가 없을 때 상담실에서 상담이 끝난 해당 손님이 다시 직원에게 와서 업무를 마무리한다.

실제로 비동기 방식이 어떻게 동작하는지 알아보자.
어떤 함수를 실행하면 콜 스택에 쌓인다.
그리고 그 콜 스택은 가장 마지막에 들어온 것부터 처리를 해 나간다.

왼쪽 위의 코드를 실행하면 main()이 콜 스택에 쌓인다.

가장 첫 줄인 console.log('Hi');가 실행되면 콜 스택에 또 쌓이고, 실행이 되어 콘솔에 Hi가 찍히면 스택에서 사라진다.

그리고 그 다음 코드가 실행되어 스택에 쌓인다.
그런데 이 코드는 비동기식으로 작동하는 코드라서 오래 걸리는 손님이 상담실로 가듯이 브라우저가 제공하는 web API가 처리하도록 하고 스택에서 사라진다.

그리고 다음 코드가 실행되고, 실행한 코드가 완료되어 main()도 스택에서 사라진다.

web API가 오래 걸리는 처리를 완료하면 태스크 큐에 콜백이 쌓인다.

큐는 스택과 다르게 선착순 방식이다. 그래서 먼저들어온 순서대로 이벤트 루프가 스택으로 옮겨주는데, 이벤트 루프는 스택과 태스크 큐를 감시하다가 스택이 비면 태스크 큐에서 가장 오래 대기한 콜백을 스택으로 옮긴다.

그리고 콜백이 실행되고

끝난다.

ajax나 이미지 처리처럼 오래 걸리는 작업들은 모두 비동기 방식을 이용하지 않으면 해당 작업이 실행되는 동안 브라우저가 블로킹된다. 즉, 멈춘다.
비동기 방식은 싱글 스레드 방식으로도 여러가지 작업을 막힘 없이 할 수 있도록 해준다.

도저히 이해하지 못할 것 같던 개념을 이해하고 나니 너무 뿌듯하다!
어떤 기술이 나올 수 밖에 없었던 이유를 고민해보고, 그 기술이 해결한 문제점이 무엇인지에 집중하면 조금 더 이해하기가 쉬워지는 것 같다.
어떤 어려운 개념이 나오더라도 포기하지 않고 끊임없이 고민하면 언젠가 이해할 수 있을 것이다.
포기하지 말고 하나씩 지식을 쌓아보자!
그리고 너무도 당연하게 사용하고 있던 기술들을 만들어주신 분들께 감사한 마음을 갖자.

참고 자료
https://youtu.be/8aGhZQkoFbQ