모던리액트딥다이브 1. 이벤트루프와 비동기 통신 이해

자바스크립트는 싱글스레드에서 동작한다.

-> 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있다.

싱글 스레드의 동기방식을 활용하게 되면 결국 많은 이벤트를 순차적으로 동작하기에 시간의 효율성이 떨어진다.

-> 그렇기에 비동기 작업형태를 활용하여 싱글 스레드의 자바스크립트 구조를 보완을 하고 있다.

리액트는 또 어떠한가

-> 렌더링 스택을 비우는 방식으로 구현했던 동기식의 렌더링이 16버전에 접어들어 비동기식으로 작동하는 방법이 소개됨

프로세스는 무엇인가

-> 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업단위

스레드는 무엇인가

-> 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있고, 스레드끼리는 메모리를 공유할 수 있어 여러가지 작업을 동시 수행

그렇다면 멀티스레드를 사용하지 않는 이유는 무엇인가

-> 동시성의 문제, 스레드는 하나의 프로세스에서 동시에 서로 같은 자원에 접근할 수 있는데, 동시에 여러 작업을 수행하다 보면 같은 자원에 대해 여러 번 수정, 삭제 등의 문제가 발생하기에 처리가 까다롭다.

초기의 자바스크립트를 생각해보자

-> 자바스크립트는 브라우저에 HTML을 그리는데 한정적인 도움을 주는 보조적인 역할로 시작했다.

그렇기에 브라우저에 DOM을 조작할 때 여러가지 동시성의 문제로 그 당시의 상황으로 봤을 때는 합리적인 방식이라고 볼 수 있다.

이벤트루프란

-> 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위한 장치

호출 스택 (CALL STACK)이란

-> 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이다

const bar = () => console.log("bar");
const foo = () => console.log("foo");
const baz = () => {
    foo();
    setTimeout(() => {
        console.log("baz");        
    }, 0)
    bar();
} 

baz();

setTimeOut(() => {}), 0)이 정확하게 0초 뒤에 보장하지 못한다
-> 테스크 큐: 테스크의 집합을 의미
이벤트 루프는 한 개 이상의 테스크 큐를 가지고 있는데, 테스크 큐는 자료 구조의 큐(queu)가 아니고 set형태를 띠고 있다.
Node.js나 브라우저에서 이러한 비동기작업을 처리하고 난 콜백을 테스크 큐에 할당되는 것이다.
이벤트 루프는 호출 스택이 비고, 콜백이 실행 가능한 떄가 오면 이것을 꺼내서 수행하는 역할을 하는 것

태스큐와 마이크로 태스크 큐의 차이는 무엇인가

-> 기존 태스크 큐보다 마이크로 태스크 큐는 우선권을 갖는다.
태스크 큐: setTimeout, setInterval, setImmediate
마이크로 태스크 큐:process.nextTick, Promiose, queueMicroTask, MutationObserver

태스크 큐를 실행하기에 앞서 마이크로 태스크 큐가 실행되고 하나씩 실행될 때마다 렌더링이 한 번씩 일어난다.