리액트의 역사

[1장] 리액트 개발을 위해 꼭 알아야 할 자바스크립트

falsy가 가능한 값의 실제 타입
리액트에서 사용하는 동등 비교는 ==나 ===가 아닌 Object.is다.
- shallowEqual이라는 함수를 만들어 사용하고, 이 함수는 의존성 비교 등 리액트의 동등 비교가 필요한 다양한 곳에서 사용된다.
- props가 깊어지는 경우, 즉 한 객체 안에 또다른 객체가 있을 경우 React.memo는 컴포넌트에 실제로 변경된 값이 없음에도 불구하고 메모이제이션된 컴포넌트를 반환하지 못한다.

자바스크립트에서 함수는 일급 객체다.
- 함수는 다른 함수의 매개변수가 될 수도 있고, 반환값이 될 수도 있으며, 변수에 할당도 가능하므로 일급객체다.
함수의 호이스팅, 변수의 호이스팅
- 함수는 함수 선언문이 미리 메모리에 등록된다.
- 변수는 런타임 이전에 undefined로 초기화되고, 할당문이 실행되는 시점, 즉 런타임 시점에 함수가 할당되어 작동한다.
- const func = () => {}의 형태로 사용하는 이유
재사용되지 않는 함수이고, 단 한번만 실행되고 끝난다면 즉시 실행 함수(IIFE)의 사용을 검토해보자
부수효과가 없는 함수 -> 순수함수, 부수효과가 존재하는 함수 -> 비순수 함수
부수효과는 어떻게 보면 피할 수 없는 요소 -> API 호출, console.log, useEffect 등
함수는 하나의 일을, 그 하나만 잘하면 된다.
가능한 한 함수 이름은 간결하고 이해하기 쉽게 붙이는 것이 좋다.

하나의 프로세스에서는 여러 개의 스레드를 만들 수 있다.
자바스크립트 창시자: 브랜던 아이크(Brendan Eich)
자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다.
이벤트 루프
콜 스택
태스크 큐
마이크로 태스크 큐
- 마이크로 태스크에는 대표적으로 Promise가 있다.
- 마이크로 태스크 큐는 태스크 큐보다 우선권을 갖는다.
- 브라우저에서 렌더링하는 작업은 마이크로 태스크 큐와 태스크 큐 사이에서 일어난다.

타입스크립트는 타입 체크를 정적으로 런타임이 아닌 빌드(트랜스파일) 타임에 수행할 수 있게 한다.
any는 정말로 예외적인 경우에만 사용
- 대신 unknown을 사용 - 모든 값을 할당할 수 있는 top type
- type narrowing (if(typeof callback === 'function'))
- 어떠한 타입도 들어올 수 없는 bottom type, never
  - 어떠한 props도 받아들이지 않는다는 뜻으로 사용 가능
타입 가드를 적극 활용하자
instanceof와 typeof
in -> 어떤 객체에 키가 존재하는지 확인하는 용도로 사용
제네릭 -> 제네릭을 두개 이상 사용할 경우 T, U 등으로 표현하는 것보다 적절히 네이밍하는 것이 좋다.
인덱스 시그니처
- 객체의 키를 정의하는 방식
- 인덱스 시그니처를 사용하면 키에 원하는 타입을 부여할 수 있다.
- 객체의 키는 동적으로 선언되는 경우를 최대한 지양해야 하고, 객체의 타입도 필요에 따라 좁혀야 한다.
- Record 사용
- as로 타입 단언
- 타입 가드 함수를 만들기
- 덕 타이핑이란 객체의 타입이 클래스 상속, 인터페이스 구현 등으로 결정되는 것이 아니고 어떤 객체가 필요한 변수와 메서드만 지니고 있다면 그냥 해당 타입에 속하도록 인정해주는 것을 의미한다.
타입스크립트 전환 가이드
- tsconfig.json 먼저 작성하기 -> "allowJs": true