Merge branch 'main' of github.com-seoyunfleuve:monthly-cs/2024-03-mod…

…ern-react-deep-dive

docs/dusunax/dil/2024-03-03.md

@@ -9,7 +9,7 @@
 
 | DIL 주차 | 범위   | 발표 준비 | 내용                           | 오늘차 진도 |
 | -------- | ------ | --------- | ------------------------------ | ----------- |
-| 1주차    | 1, 2장 | B조: 2장  | 리액트 핵심요소와 자바스크립트 | 20p ~ 25p중 |
+| 1주차    | 1, 2장 | B조: 2장  | 리액트 핵심요소와 자바스크립트 | 20p ~ 26p중 |
 
 > `오늘 읽은 내용을 markdown으로 간단히 메모`  
 > 읽은 시간: 5시 50분~9시  

docs/dusunax/dil/2024-03-04.md

@@ -0,0 +1,156 @@
+# DIL: 모던 리액트 딥 다이브, 1주차-3
+
+> 스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive  
+> 오늘 진행: 개인공부
+
+---
+
+## DIL-week1-3_2024-03-04
+
+| DIL 주차 | 범위   | 내용                           | 오늘차 진도 |
+| -------- | ------ | ------------------------------ | ----------- |
+| 1주차    | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 26p중~59p   |
+
+> `오늘 읽은 내용을 markdown으로 간단히 메모`  
+> 읽은 시간: 9시반~12시
+> 빠르게 읽기~!
+
+## 객체
+
+- 객체는? 참조 타입이다~ reference type이다~
+- 객체는? 변경 가능하다~ writable이다~
+- 객체는? 복사할 때 참조를 전달한다~ 동등 비교가 안된다~ !==~
+
+### Object.is
+
+- [ES6(ES2015)] 얘도 객체 비교는 !==
+- `Object.is({},{}) // false`
+
+### 리액트의 동등 비교는 Object.is다?!?
+
+- objectIs: ES6 폴리필
+
+```tsx
+function is(x: any, y: any) {
+  return (
+    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
+  );
+}
+
+const objectIs: (x: any, y: any) => boolean =
+  typeof Object.is === "function" ? Object.is : is;
+
+export default objectIs;
+```
+
+- shallowEqual: 객체 간 비교(Object.is + 배열 길이 + 키 비교 + 값 비교)
+  - Object.is와 달리 => React의 shallowEqual은 참조가 다른 객체도 1 depth까지는 비교가 가능하다~
+
+```tsx
+export default function shallowEqual(objA: mixed, objB: mixed): boolean {
+  if (is(objA, objB)) return true;
+
+  if (
+    typeof objA !== "object" ||
+    objA === null ||
+    typeof objB !== "object" ||
+    objB === null
+  )
+    return false;
+
+  const keysA = Object.keys(objA); // 키
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) return false; // 배열 길이 비교
+
+  for (let i = 0; i < keysA.length; i++) {
+    const currentKey = keyA[i];
+    if (
+      !hasOwnProperty.call(objB, currentKey) ||
+      !is(objA[currentKey], objB[currentKey])
+    )
+      return false;
+  }
+
+  return true;
+}
+```
+
+- JSX props는 객체다~ 얕은 비교를 한다~
+  - 즉, props에 또 다른 객체를 넘겨준다면~? 예상치 못하게 작동할 수 있다~~
+- 자바스크립트의 특징 => 객체 비교의 불완전성, 얕은 비교만 사용해서 필요한 기능을 구현하고 있다.
+
+## 함수
+
+- 함수란?
+  - 작업을 수행하거나, 값을 계산하는 등의 과정을 => 하나의 블록으로 감싸서 실행 단위로 만든 것
+
+1. 함수 선언문은? 문 statement이다~ 그런데?? 코드 문맥에 따라 표현식으로도 사용될 수 있다~ (JS 엔진은 못 말려~)
+
+```tsx
+const sum = function sum(a, b) {
+  return a + b;
+};
+
+sum(10, 24); // 34
+```
+
+2. 함수 표현식은? 변수에 할당, 함수명을 주로 생략
+
+- 일급 객체: 매개변수, 반환값, 할당 다 가능
+
+3. Function 생성자는? 함수 몸통이 문자열, 클로저 생성되지 않음
+4. 화살표 함수는? 생성자 함수로 x, arguments 없음
+
+- this란? 자신이 속한 객체나, 자신이 생성할 인스턴스를 가리키는 값
+- 화살표 함수의 this는? 상위 스코프 this~ => 별도의 작업 없이 상위 this에 접근
+
+### IIFE, Immediately Invoked Function Expression
+
+- 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용
+- 캡슐~
+
+### Higher Order Function / Higher Order Component
+
+- 고차 함수~ 일급 객체~ 고차 컴포넌트~
+
+### 순수 함수 Pure Component
+
+- 부수 효과 side-effect 가 없는 함수
+- useEffect를 줄이자 진짜로
+
+### 함수를 작게 만들어라
+
+- max-lines-per-function, 50줄~
+- Malcolm Douglas McIlroy => Do One Thing and Do It Well. 함수는 하나의 일을, 그 하나만 잘 하면 된다.
+
+## 클래스
+
+- React 16.8 이전에는? 클래스 컴포넌트
+- [ES2019] #으로 private
+- Typescript: private, protected, public
+- 인스턴스 메서드 == 프로토타입 메서드
+
+```tsx
+const myCar = new Car("차차차");
+
+Object.getPrototypeOf(myCar) === Car.prototype; // true
+myCar.__proto__ === Car.prototype; // true
+```
+
+- 📌 `__proto__`를 쓰면 안된다 => 왜냐? `typeof null === 'object'` 처럼, 의도운 표준은 아니지만 과거 브라우저의 호환성을 지키기 위해서만 존재하는 기능이기 때문임
+- => `Object.getPrototypeOf`를 쓰자
+- prototype chaining 예시 => `Object`의 `toString()`
+
+### 클래스와 함수
+
+- ES6 이전에는 프로토타입으로 클래스 작동 방식을 구현했음
+- 바벨 트랜스파일링: \_createClass 라는 헬퍼 함수를 만들어 => 클래스와 동일한 방식으로 동작하도록 함
+  - prototype 기반, 생성자 함수로 유사하게 재현 / 클래스는 syntactic sugar
+
+---
+
+```
+영어
+Strict Equality Operator, 동등 연산자 / Equality Operator, 일치 연산자
+```