CH1. 리액트 개발을 위해 꼭 알아야할 자바스크립트

1.1.1 JS의 데이터 타입

세미 콜론 안쓰는거 저만 불편한가요? ㅋㅋㅋㅋㅋㅋ
[p. 26] Symbor 은 언제 쓰일까요? 그리고 Symbor.for 로 동일한 값을 사용하면 그냥 일반 값을 쓰는 것과 무슨 차이일까요?
- enum, 객체의 키, 상수 등에서 중복이 생길 가능성 자체를 제거
- 프로퍼티 은닉이 가능. 단, es6 에 도입된 Object.getOwnPropertySymbols 로는 찾을 수 있음
- 객체에 사용자 정의 메서드를 정의할 때, 중복을 막을 수 있음 + 기존 메서드와 충돌이 되는지 쉽게 확인 가능

1.1.3 자바스크립트의 또다른 비교 공식 Object.is

// polyfill
function is(x, y) {
  return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
}
 
-0 === +0; // true
Object.is(-0, +0); //false
 
// (x !== 0 || 1 / x === 1 / y) 를 사용해서 구분
 
Number.NaN === NaN; // false
Object.is(Number.NaN, NaN); // true
 
// (x !== x && y !== y) 를 이용해 구분
 
NaN === 0 / 0; // false
Object.is(NaN, 0 / 0); // true
 
// (x !== x && y !== y) 를 이용해 구분

[p. 29] 비교식을 보고 있으면 이게 리얼루다가 제정신인 언어인가.... Object.is 의 polyfill 의 수식이 왜 저런지 이해는 가능 합니다 ㅋㅋ

1.4.1 클로저의 정의

MDN 정의 : 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합
[p. 59] 클로저에 대한 MDN 정의 보고 바로 이해하신분 계시나요? ㅎㅎㅎ

1.4.2. 변수의 유효 범위, 스코프

[p. 61] 블록 스코프인 let, const 가 있기 이전에 var 로 편하게 코딩을 한 대신, 험난한 디버깅을 했었던 기억이 나네요

1.4.3 클로저의 활용

[p. 64] 그런데 요즘은 let, const 를 쓰기 때문에 전역으로 let 을 선언해서 사용하는 것이 아닌 이상 크게 걱정할 내용은 아닌듯 한데, 어떻게 생각하시나요?

1.5.3 태스크 큐와 마이크로 태스크 큐

[p. 76] JS가 지속적으로 새로운 개념과 기능을 추가하다보니 헷갈리는 부분이 정말 많고, 기존 이름을 새롭게 변경하거나 추가하는 경우까지 겹쳐서 정말 혼동이 쉽게 오는 것 같습니다!
[p. 76] 매크로와 마이크로 큐의 일들이 결국 처리가 완료 되면 콜 스택에 들어간다는 것 잊지 말기!
참고하기 좋은 블로그 https://velog.io/@dahyeon405/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EB%A5%BC-%ED%86%B5%ED%95%9C-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC (opens in a new tab)
[p. 76] 서버 통신 Web API 관련 요청은 전부 매크로 태스크 큐에서 실행한다! 그리고 해당 요청에 대한 응답의 이행을 Promise / await 로 수행
이러한 응답에 대한 처리는 다른 매크로 태스크 보다 빨리 처리 해야 하므로, 마이크로 태스크가 매크로 태스크에 우선하는 특성을 가진다

렌더링은 언제 일어나는가?

[p. 77] 읽다보니 궁금해서 마이크로 태스크 큐에 들어간 작업 하나가 끝날 때마다 랜더링이 되는지, 아니면 모든 마이크로 태스크 큐가 끝난 후에 랜더링이 되는지 확인해 보았습니다.

const TIMES = 100000;
 
test.addEventListener("click", () => {
  for (let i = 0; i <= TIMES; i++) {
    queueMicrotask(() => {
      console.log("fisrt", i);
    });
  }
 
  for (let i = 0; i <= TIMES; i++) {
    queueMicrotask(() => {
      console.log("second", i);
    });
  }
 
  for (let i = 0; i <= TIMES; i++) {
    setTimeout(() => {
      test.innerHTML = i;
      console.log("MACRO");
    }, 100);
  }
});

위의 코드를 통해 테스트한 결과, 콘솔에 first 100000 이 찍히고 버튼의 text 가 변경되면서 second 100000 이 찍히기 시작, 그리고 second 100000 이 찍히고 난 뒤 MACRO 가 100001 번 찍힘
즉, 마이크로 태스크의 작업 하나가 끝나면 랜더링이 발생하는 것을 확인 완료
사실 이게 말이 되는 부분, 하나의 마이크로 큐 태스크로 작업 마친 것(아마도 서버 통신의 응답 같은 것)을 화면에 즉시 랜더링 해야할 일이 발생 할 텐데, 이때 모든 마이크로 큐 태스크를 전부 실행 후에 랜더링이 발생하면 프로그래머가 원하는 상황과는 다른 일이 생길듯

덕타이핑

[p. 111] 이러한 현상을 알고는 있었지만, 실제로 이름과 히스토리를 알게되니 더 재미있긴 합니다 ㅎㅎㅎ

Chapter1 Study