DIL: 모던 리액트 딥 다이브, 1주차-2

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week1-2_2024-03-05

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 1주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 59p~92p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시30분~11시 55분

클로저

• 클로저가 리액트에서 중요한 이유 => 16.8 이후 등장한 hook의 동작 때문
  • useState => prev 값: closer

| 구분 | 환경 | | ------ | -------------------------------------- | | this | 어디서 실행되느냐에 따라 동적으로 결정 | | closer | 어디서 선언되느냐에 따라 정적으로 결정 |

• 흥미로운 사이트: https://ui.dev/javascript-visualizer
• for문과 var를 사용했을 때 => 즉시실행함수와 함께 closer 사용하는 예시
  • for문 내부의 setTimeout의 콜백함수를 IIFE로 변경해서, 선언된 함수의 스코프 내부에서 어휘적 환경을 기억하도록 함(어디에? 인수에)
• 클로저는 비용이다

싱글 스레드

• 역사
  • 과거에 process가 존재했다... 작업 단위...
  • 스레드... 더 작은 실행 단위...
  • 자바스크립트는 1995년 태어났다
    • 브랜던 아이크 Brendan Eich가 LiveScript를 만들었다
  • 10일만에 자바스크립트의 첫 버전이... 만들어졌다...
• 만약 JS가 멀티 스레드라면?
  • 돔 조작에 동시성 문제가 생길 수 있었음

이벤트 루프

• 단일 스레드에서 동기적으로 (1) call stack 비었는 지 확인 (2) JS 엔진으로 execute code (3) 태스크 큐에 대기 중인 작업이 있는 지 확인
• 컨텍스트가 태스크 큐로 들어가면? 스택에서는? 제거된다
• 이벤트 루프 TMI
  • 태스크 큐를 n개 갖고 있음 => 1개만 있는 거 아님
  • Queue 구조가 아님 => Set임, 그리고 LIFO
  • 마이크로 태스크 큐는 1개 갖고 있음 => 태스크 큐 미뤄미뤄
• 랜더링은 언제 실행되느냐?
  • 마이크로 태스크 큐 > 랜더링 > 태스크 큐
  • 마이크로 태스크 큐 작업이 끝날 때마다 기회 있음

| 우선순위 | 기능 | 사용되는 큐 | 추가 설명 | | -------- | --------------------- | ------------------ | ---------------------------- | | 1 | Promise | 마이크로 태스크 큐 | 대표적임 | | 2 | requestAnimationFrame | 랜더링 | 리페인트 전에 콜백 함수 호출 | | 3 | setTimeout | 태스크 큐 | delay 보장x |

requestAnimationFrame는?

• https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• requestAnimationFrame(callback): 다음 Repaint 전에 유저가 설정한 콜백 함수를 실행할 수 있도록 함
• 예제

const element = document.getElementById("some-element-you-want-to-animate");
let start: number, previousTimeStamp: number;
let done = false;

function step(timeStamp: number) {
  if (start === undefined) {
    start = timeStamp;
  }
  const elapsed = timeStamp - start;

  if (previousTimeStamp !== timeStamp) {
    // Math.min() is used here to make sure the element stops at exactly 200px
    const count = Math.min(0.1 * elapsed, 200);
    if (element) element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // Stop the animation after 2 seconds
    previousTimeStamp = timeStamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

Destructuring assignment

배열 구조 분해 할당

• 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다
• 배열의 구조 분해 할당: ES6
• 객체의 구조 분해 할당: ES 2018
• useState가 객체가 아닌 배열을 반환하는 이유는?
  • 객체 구조분해할당은 사용하는 쪽에서 원하는 이름으로 변경하는 것이 번거로움
  • 배열 구조분해할당은 자유롭게 이름을 선언
• 기본값은? 구조 분해 할당으로 받은 값이 undefined인 경우만 사용

const [a = 1, b = 1, c = 1, d = 1, e = 1] = [undefined, null, 0, ""];
console.log(a, b, c, d, e); // 1, null, 0, '', 1

• spread operator => [a, ...rest]

객체 구조 분해 할당

• case 1
• spread operator(전개 구문): 객체의 구조 분해 할당, 전개 구문은 바벨 트랜스파일을 거치면 번들링 크기가 상대적으로 커짐
  • lodash.omit이나 rambda.omit 라이브러리를 쓰는 경우도 있음
  • 키 & 속성값 확인, 심벌 체크

{a, b, ...rest} = object

• case 2

{a: first, b: second} = object

• case 3

const key = "a";
const object = { a: 1, b: 1 };

const { [key]: a } = object;
// a = 1;
// [key] 문법을 사용하는데, 변수 네이밍이 필요함
// const {[key]} = object // Uncaught SyntaxError: Unexpected token '['

---

english
run-to-completion /kəmˈplēSH(ə)n/

---

번외

Node.js Worker 와 브라우저 Web Worker

| 특성 | Node.js Worker | 브라우저 Web Worker | | ------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | 환경 | 서버 환경에서 사용됨 | 클라이언트 환경(브라우저)에서 사용됨 | | 스레드 분리 | 독립적인 스레드로 실행됨 | 독립적인 스레드로 실행됨 | | 파일 접근 | 메인 스레드와 별도의 파일 시스템을 공유하지 않음 | 보통 웹 워커는 메인 스레드와 별도의 파일 시스템을 공유하지 않음. 하지만 IndexedDB 등의 다른 웹 API를 사용하여 데이터를 공유할 수 있음 | | 네트워크 요청 | HTTP 요청을 보낼 수 있지만, 메인 스레드와는 별도의 네트워크 스택을 가짐 | 네트워크 요청을 보낼 수 있지만, 메인 스레드와는 별도의 네트워크 스택을 가짐 | | UI 업데이트 | 메인 스레드와 분리되어 있으므로 UI를 직접 업데이트할 수 없음 | 메인 스레드와 분리되어 있으므로 UI를 직접 업데이트할 수 없음 | | 종속성 | worker_threads 모듈이 제공됨 | 기본 제공됨 | | 쓰레딩 방식 | 쓰레드 풀을 사용하여 쓰레드를 관리함 | 자체적으로 스레드 관리를 함 |

V8와 SpiderMonkey

| 특성 | V8 | SpiderMonkey | | ----------------- | ---------------------------------------- | --------------------------------------------- | | 개발사 | 구글 | 모질라 | | 사용되는 브라우저 | 크롬, 오페라 등 | 파이어폭스 | | 최초 출시 | 2008년 | 1995년 | | 언어 | C++ | C++ | | JIT 컴파일 | 지원 | 지원 | | 메모리 관리 | 적응형 메모리 관리 | 가비지 컬렉션을 사용하여 메모리를 관리 | | 최적화 | 인라인 캐시 등의 최적화를 통한 빠른 실행 | 효율적인 타입 추론 및 최적화를 통한 빠른 실행 | | 개방성 | 오픈 소스 | 오픈 소스 |

setImmediate? (Deprecated)

How is setImmediate() different from setTimeout(() => {}, 0)

setImmediate(() => {
  // run something
});

(passing a 0ms timeout), and from process.nextTick()? A function passed to process.nextTick() is going to be executed on the current iteration of the event loop, after the current operation ends. This means it will always execute before setTimeout and setImmediate. A setTimeout() callback with a 0ms delay is very similar to setImmediate(). The execution order will depend on various factors, but they will be both run in the next iteration of the event loop