10. React (Asynchronous JavaScript)

자바스크립트 비동기의 등장

초기 웹 환경은 서버에서 모든 데이터를 로드하여 페이지를 빌드하는 방식으로

자바스크립트에 별도의 비동기 처리가 필요하지 않았다

 

이후 Ajax(Asynchronous JavaScript and XML)기술의 등장으로 페이지 로드 없이

Client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 되었다

 

XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낸다

 

---

자바스크립트와 비동기

자바스크립트는 single-threaded language

만일 서버 요청을 기다려야하는 경우 유저는 멈춰있는 브라우저를 보게 된다

 

위와 같은 이유로 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 생기게 된다

 

비동기 요청 후, main thread는 유저의 입력을 받거나, 페이지를 그리는 등의 작업을 처리한다

 

비동기 응답을 받으면, 응답을 처리하는 Callback 함수를 task queue에 넣는다

 

event loop는 main thread에 여유가 있을 때 task queue에서 함수를 꺼내어 실행시킨다

 

---

동기와 비동기

동기(synchronous) 코드는, 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고

순서대로 실행시키는 것을 의미한다

 

main thread에 의해 실행되므로, 무한루프 등에 의해 main thread를 블록할 수 있다

 

thread의 제어권

객체가 있을 때, 하나의 작업이 끝나기 전까지는 어떤 일이 생겨도 순서대로 끝까지 실행한다

 

* 비동기 처리에서는 이 작업 순서를 지키지 않고, 중간에 중지시키며 건너띌 수 있게 되는 것

 

---

비동기(asynchronous) 코드는, 코드의 순서와 다르게 실행된다

 

비동기 처리 코드를 감싼 블록은 task queue에 넣어진다

(동기코드는 바로 Call stack에 넣어진다)

 

main thread가 동기 코드를 실행한 후에 제어권이 돌아왔을 때

event loop가 task queue에 넣어진 비동기 코드를 실행한다

(main thread가 여유 있을 때에만 event loop가 task queue에서 task를 꺼낸다)

 

 

브라우저와 서버의 통신

1. 브라우저에서 요청을 보내고, 서버는 응답을 준다

2. 해당 서버는 긴 byte sting이다 (한 글자씩 쪼개진 문자가 byte안에 담겨서 전송)

3. 전송된 byte sting에 의미를 부여하는 DOM Tree(브라우저에서 동작하는 객체)로 변환

4. 자바 스크립트 엔진(V8, blink)가 코드를 읽고 실행 동작

 

 

비동기 처리를 위한 내부 구조

- 브라우저에서 실행되는 자바스크립트 코드는 event driven 시스템으로 작동

 

event driven 시스템

queue에 다른 대상들이 이벤트가 발생하면 큐에 이벤트를 밀어넣는다

API요청을 했을 때 응답이 오면 API요청을 담당하는 브라우저에 모듈이 있을 것인데

모듈은 "큐에 API요청이 끝났다" 그러므로 처리를 하라는 API요청을 넣는다

전체 돌아가는 프로그램의 이벤트를 받고, 이벤트를 처리하는 방식으로 작동

 

- 브라우저의 main thread는 자바스크립트 코드에서 동기적으로 처리되어야 할 코드 외,

웹 페이지 실시간 렌더링, 유저 입력 감지, 네트워크 통신 처리 등 수많은 일을 처리한다

 

- 비동기 작업을 할당하면, 비동기 처리가 끝나고 브라우저는 task queue에 실행 코드 삽입

 

- main thread는 event loop를 돌려, task queue에 작업이 있는지 체크

 

- 작업이 있다면 task를 실행

 

Call stack이 비워지지 않아도, task queue에 task가 들어오면 바로 실행

- Call stack이 비워지고 main threa에 여유가 있을 때 event loop는 queue에서 task를 빼냄

 

* 일반적으로는 Call stack은 넣자마자 바로 꺼내지는 비동기 처리들이 있을 것이다

 

비동기 작업 실행 시 task가 새롭게 task queue에 들어가면 바로 실행

- event loop는 기존에 task queue에 존재했던 task들만을 처리,

  새롭게 들어온 task들은 다음 iteration에 처리된다