동기, 비동기, 이벤트 루프, 매크로태스크, 마이크로태스크 이해하기 (1) : 동기와 비동기란

오랜만입니다!

정~~~말 오랜만에 글을 쓰네요.

이사도 하고, 일도 바쁘고 하다 보니 이제야 글을 다시 쓰게 되었습니다.

 

Javascript 개발자의 영원한 친구(이자 숙적), 비동기

Javascript 개발을 할 때마다 느끼는 감정

나는 어느덧 회사에서 react 개발 5개월 차가 되었고, 내가 겪은 대부분의 문제들은 비동기적인 실행으로 인한 이슈들이었다. 그만큼 정말 흔한 이슈이고, 그렇기에 자바스크립트에서 코드가 실행되는 순서를 잘 파악할 수 있는 사람이 실력있는 사람이라고 생각한다. 가보자!

 

 

동기 vs 비동기

출처 : https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

동기와 비동기는 딱 한 문장으로 정의할 수 있다.

결과가 나올 때 까지 기다려야 하면 동기, 아니면 비동기

위의 그림을 예로 들면,

 

기다리는 사람들은 앞 사람이 주문 + 커피 수령하는 시간까지 모두 기다려야 한다 => 동기

기다리는 사람들은 앞 사람이 주문하는 시간만 기다리면 된다.

그리고, 자유롭게 유튜브를 보다가, 진동벨이 울리면 커피를 수령하러 가면 된다. => 비동기

 

이다. 너무 쉽다!

 

동기 비동기는 이해했는데요, 자바스크립트는 왜 비동기인가요?

카페와 웹사이트의 공통점은,

1. 사용자가 많다

2. 그 사용자들을 기다리게 하면 모두 떠나갈 것이다.

 

이다. 웹 사이트는 반드시, 무조건 빨라야한다. 나 같은 90년대 생들은 이해할 것이다. 네이버 블로그에서 동영상 볼 때 버퍼링의 심각함을.. (요새 애들은 버퍼링이 뭔지 알까?)

 

이렇게 말하면 비동기가 무조건 좋은 거 아닌가? 동기가 왜 필요해 그럼? 이라는 의문이 생길 수 있는데, 다시 카페를 예로 들면

 

5명의 손님이 왔을 때,

비록 마지막 손님은 많이 기다려야 하겠지만, 적어도 손님들은 온 순서대로 음료를 받을 것이다. => 동기

합리적인 카페 사장은 3번째 손님이 주문한 레인보우샤베트커피토피넛그린라떼보다, 간단한 아메리카노를 시킨 마지막 손님에게 음료를 줄 수 있다. => 비동기

차이를 알겠는가?

동기는, 코드가 작성된 순서대로 반드시 실행된다는 이점이 있다.

100ms 를 들여 받아온 결과값 A를 기반으로 B() 함수를 실행할 때, A가 없을 것이라는 걱정은 안해도 된다는 것이다.

 

하지만 비동기는 코드가 작성된 순서대로 실행되지 않는다.

A를 B() 함수에서 사용하려고 하는데, A가 받아와지기도 전에 B가 실행되면 오류가 생길 것이다.

 

이제 비동기와 동기의 장단점을 완벽히 알았을 것이라고 믿는다.

 

동기는, 코드가 작성된 순서대로 실행되지만, 그렇기에 느리다.

비동기는 코드가 작성된 순서대로 실행되지 않지만, 빠르다.

 

만약 유튜브 동영상을 로딩하는데 10초가 걸린다고 가정했을 때, 코드가 다음과 같다면,

영상받아오기() // 10s
댓글받아오기() // 10ms
관련동영상받아오기() // 100ms

10초동안, 우리는 댓글도 관련동영상도 받아올 수 없다. 그런 웹사이트는 보지 못했을 것이고, 봤다면 뒤로가기로 뛰쳐 나왔을 것이다.

 

이벤트 루프?

그럼 이제 카페 주방으로 가보자. 비동기적으로 주문을 받았고, 알바생은 다음의 음료들을 만들어야 한다.

1. 1번 손님의 아메리카노 6잔 -> 3m
2. 2번 손님의 아이스 돌체 라떼 -> 2m
3. 3번 손님의 알바생고생시키는음료 -> 10m



그럼 우리는 카페가 비동기적일 경우,

1. 2분 후에 2번 손님이 아이스 돌체 라떼를 받고
2. 1분 후에 ( 총 3분 후 ) 1번 손님이 아메리카노를 받은 뒤
3. 7분 후( 총 10분 후 ) 3번 손님이 알바생고생시키는음료를 받는다

를 직관적으로 예상할 수 있다.

 

그럼 Javascript 런타임 엔진이 이런 일을 실제로 한다는 것인데, 그걸 어떻게 하는가?

 

그것을 다음 글에서 다룰 것이다.

이벤트 루프와, 매크로태스크, 마이크로태스크, async/await, Promise 등.. 할 게 너무 많지만, 차근차근 해보자.