👨🏻‍🚒Asynchronous JavaScript(1) - 이론

💃🏻동기와 비동기 - 클라이언트와 서버와의 관계

클라이언트와 서버와의 관계를 스읍 훑고 가자.

이 관계로 요청과 응답을 통한 동기, 비동기를 가정해 보자.

1. 동기적 (Synchronous) 인 예

클라이언트는 서버에 웹 페이지 그려줘! 라며 요청을 하나 보내고 응답이 올때까지 기다린다.

이렇게 되면 망했다. 응답이 올때까지 하얀? 혹은 암것도 없는 화면을 봐야만 한다.

한국인의 특성상 5초를 넘기기 힘들다.

2. 비동기적 (Asynchronous) 인 예

클라이언트는 페이지 렌더 요청을 보내 놓고 중간에 다른 일을 진행 (탈주 방지용 로딩 돌아가는 거 띄우는 등등..) 한다.

그러다 서버에서 응답이 오면, 해당 리스폰스를 갖고 또 일을 처리 (전체 화면 렌더링) 한다.

♨️Non-Blocking 과 예시

아래 그림에서 확인할 수 있듯이, total task time 을 집계해 보자.

비동기에서는 이전 기능이 다음 기능을 blocking 하지 않는다.

비동기는 그래서 Non-Blocking 이라고 한다.

예시로 유튜브의 로딩이 있는데 - 리소스를 요청을 보내고 뭔가 응답을 기다리는 느낌.

그런데 로딩되는 동안 아무것도 클릭할 수 없다면 매우 답답할 것이다. 넷플릭스, 왓챠 등등.. 로딩되는 동안 끄고 다른 것을 요청할 수 있다.

만약 이게 동기적이라면 로딩이 다 될 때까지는 아무것도 하지 못할 것이다.

비동기는 로딩되는 동안에도 좋아요 를 누른다든가 다른 처리를 할 수 있다.

겉으로 이루어지는 일들이 어떻게 이루어질까?

아래의 이벤트 루프를 확인해 보자. (일단 첨부)