📝 백광인 2024-03-07

docs/RookieAND/dil/2024-03-06.md

@@ -140,3 +140,55 @@ bButton.addEventListener('click', function () {
 
 - 클로저를 사용하는 경우 이벤트가 발동되었을 때 배열이 생성되는 것이 아닌, `heavyJobWithClosure` 함수가 실행되어 `innerFunc` 에 반환된 함수가 적재될 때 생성된다.
 - 따라서 실제 해당 배열이 필요한 경우 (Click 이벤트가 발동된 순간) 가 아니라 **항상 longArr 배열을 메모리에 적재해두기 때문에** 클로저를 사용하는 것이 더 비효율적이다.
+
+# ✒️ JS 는 싱글 스레드 기반의 Non - Blocking 언어다.
+
+### ✏️ JS 는 싱글 스레드 언어다.
+
+- JS 가 개발될 당시에는 멀티 쓰레드의 개념이 크게 정착되지 않았을 때이기 때문에 하나의 프로세스가 단일 스레드를 기반으로 동작하는 싱글 스레드 방식을 채택했다.
+- 따라서 JS 코드 내 실행은 위에서 아래로 순차적으로 동작하며, 한 곳에서 실행이 오래 걸릴 경우 이후의 코드가 실행되지 않는 특징을 가진다.
+- 이렇게 동기적으로 코드가 실행되는 상황에서, 앞선 코드의 실행이 완료되지 않아 다음 실행을 막는 현상을 Blocking 이라 한다.
+
+### ✏️ JS 는 Non - Blocking 언어다.
+
+- 하지만 비동기적으로 동작하는 JS 코드는 **이후 코드의 실행을 막지 않는다**. 즉 Non - Blocking 하다는 특징을 가진다.
+- 하지만 JS 는 싱글 스레드인데 어떻게 해당 작업을 병렬로 실행할 수 있는가? 이는 브라우저에서 지원하는 멀티 쓰레드 기반의 Web API 를 사용하기 때문이다.
+
+> 비동기로 동작한다 VS Non Blocking 하다.
+
+- 비동기로 동작한다 : 앞선 코드와 이후 코드의 실행 순서가 보장되지 않음을 의미.
+- Non - Blocking 하다 : 앞선 코드의 실행이 완전히 종료되기 이전에 이후 코드가 바로 실행된다. 즉 두 작업을 병렬로 실행할 수 있다. (실제로는 완전히 같은 타이밍에 실행되지 않는다.)
+
+# ✒️ 이벤트 루프
+
+### ✏️ 이벤트 루프의 정의
+
+> 책에서는 브라우저 (Web API) 기반의 이벤트 루프를 위주로 설명했기 때문에, 정리글 또한 whatwg Spec 을 기반으로 작성한다. 
+
+- 비동기로 동작하는 태스크 (Call Stack 에 바로 적재되지 않는 작업) 들을 별도의 Queue 에 보관했다가, Call Stack 이 빌 경우 보관했던 태스크들을 순차적으로 처리하는 일련의 과정을 **이벤트 루프**라고 한다.
+
+### ✏️ Call Stack
+
+- JS 엔진에 의해 코드가 실행되기 전에 필요한 코드나 식별자와 관련한 정보를 보관한 실행 컨텍스트를 적재하는 Stack 이다.
+- Call Stack 의 경우 먼저 생성된 컨텍스트부터 쌓이며, 이후에 쌓인 컨텍스트부터 사라지는 Stack 의 특징을 그대로 가진다.
+
+### ✏️ Task Queue
+
+- 이벤트 루프는 결국 Call Stack 에 바로 적재되지 않고 비동기로 동작하는 작업들을 별도의 Queue 에 보관하고, 이후 Call Stack 이 비었을 경우 Queue 에 적재된 작업을 하나씩 처리하는 과정을 의미한다.
+- 이때 비동기로 동작하는 여러 작업들을 보관하는 Queue 를 바로 Task Queue 라고 한다.
+
+> 이름이 Task Queue 라고 해서 자료 구조가 Queue 인 것은 아니다.
+
+```
+Task queues are sets, not queues, because the event loop processing model grabs the first runnable task from the chosen queue, instead of dequeuing the first task.
+```
+
+- whatwg 스펙에서는 Task Queue 의 구현체가 Queue 가 아닌 Set (Ordered Set) 임을 안내하고 있다.
+- 그 이유는 Task Queue 에서 작업을 가져올 때 실행 가능한 Task 중 하나를 꺼내야 하기 때문인데, 이것이 반드시 **가장 "첫번째" 에 위치한 태스크를 꺼내는 것은 아니기 때문이다.**
+- Link : https://html.spec.whatwg.org/multipage/webappapis.html#task-queue
+
+
+### ✏️ 이벤트 루프의 구현체는 어디에?
+
+- 자바스크립트 코드를 실행하는 작업은 단일 스레드로 구성되지만, 비동기로 동작하는 작업의 경우에는 별도의 스레드에서 수행된다.
+- 별도의 스레드에서 이러한 작업을 실행하도록 돕는 장치는 Browser 의 Web API 나, NodeJS 의 경우 C++ 기반의 라이브러리인 `libuv` 를 기반으로 이벤트 루프를 구현한다.

docs/RookieAND/dil/2024-03-07.md

@@ -0,0 +1,167 @@
+### ✏️ 마이크로 태스크 큐
+
+- 비동기 작업을 처리하기 위해 ECMA 에서는 `PromiseJobs` 이라는 내부 Queue 를 명시하는데, V8 엔진에서는 이를 마이크로 태스크 큐라고 정의한다.
+- 마이크로 태스크 큐는 태스크 큐와 다르게 먼저 들어온 작업을 우선하여 실행한다. (FIFO : First In First Out)
+- 모든 Promise 작업의 경우 Microtask Queue 에 들어가 처리되기에 Promise 는 늘 비동기로
+  작동한다.
+- 추가로 `MutationObserver` 가 변화를 관측할 시 실행하는 Callback 함수 또한 Microtask Queue 로 들어간다.
+
+### ✏️ 마이크로 태스크 큐의 특이점
+
+- Microtask Queue 내부의 Task 는 Call Stack 이 비었을 때 가장 최우선으로 실행된다.
+- Microtask Queue 내부의 작업이 Call Stack 에 적재되어 실행될 때, 새로운 Microtask 를 생성할 수 있다.
+- 브라우저 렌더링의 경우 Microtask Queue 내부의 작업이 모두 실행되어 Queue 가 비었을 때 실행된다.
+- 따라서 한 사이클에 연속적으로 새로운 Microtask 를 생성하는 것은 브라우저 렌더링 및 Task Queue 내부의 작업을 **지연시킨다**.
+
+### ✏️ 각 비동기 Task 의 실행 순서 정리
+
+```js
+console.log('a');
+
+setTimeout(() => {
+    console.log('b')
+}, 0);
+
+Promise.resolve().then(() => {
+    console.log('c');
+})
+
+window.requestAnimationFrame(() => {
+    console.log('d')
+})
+
+
+1. console.log('a') 가 Call Stack 에 적재되고, 실행된다.
+2. setTimeout 작업이 Task Queue 에 할당된다.
+3. Promise.resolve() 작업이 수행되고, then 핸들러 내부의 callback 이 Micro Task Queue 에 할당된다.
+4. requestAnimationFrame 가 인자로 받은 callback 을 화면이 렌더링 되는 과정에서 실행하도록 예약 (스케줄링) 한다.
+5. Call Stack 이 비었으므로 Micro Task Queue 내부의 작업을 가져와 `console.log('c')` 를 실행한다.
+6. Call Stack 과 Micro Task Queue 이 전부 비었으므로 브라우저 렌더링이 진행된다. 이때 rAF 가 인자로 받은 `console.log('d')` 이 실행된다.
+7. Task Queue 에 있던 작업이 Call Stack 으로 적재되고, `console.log('b')` 가 실행된다.
+```
+
+### ✏️ [번외] rAF 의 동작 방식
+
+- requestAnimationFrame 이 인자로 받은 callback 은 Map of Animation Frame Callbacks 에 저장된다.
+- 이 말인 즉은 rAF 의 callback 은 별도의 Queue 가 아닌 **브라우저 내부에서 관리하는 별도의 공간**에 Map 으로 저장되어 있다는 의미다.
+- 구현체가 Map 이기 때문에 rAF 의 경우 `cancelAnimationFrame(id)` 메서드로 취소가 가능하다.
+
+> 추후 시간이 남으면 살펴봐야 할 문서들
+
+- https://stackoverflow.com/questions/77008112/which-queue-is-associated-with-requestanimationframe
+- https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#run-the-animation-frame-callbacks
+
+# ✒️ React 에서 자주 쓰이는 JS 문법
+
+### ✏️ 구조 분해 할당, 전개 구문
+
+- 객체나 배열 내부의 요소를 별도의 선언문 없이 변수에 직접 선언 및 할당하고 싶을 때 쓰인다.
+- Default Parameter 문법도 사용할 수 있으나, 값이 undefined 인 경우에만 적용된다.
+- 추가로 객체 구조 분해 할당의 경우 ES5로 트랜스파일링 할 경우 번들의 사이즈가 커질 수 있다.
+
+```tsx
+// 배열 구조 분해 할당
+const [isOpen, setIsOpen] = useState(false);
+
+// 객체 구조 분해 할당
+const Component = ({ totalCount }: PropsType) => {
+    return (...)
+}
+```
+
+- 전개 구문의 경우 Spread Operator (`...`) 를 사용하여 특정 객체를 새로운 객체 내부에 선언할 수 있고, 배열 또한 같은 원리로 사용이 가능하다.
+
+```js
+const obj = { a: 1, b: 2 };
+const newObj = { ...obj, c: 3, d: 4 };
+```
+
+> 객체 구조 분해 할당의 트랜스파일링 구조를 파헤쳐보자.
+
+```js
+"use strict";
+
+// source 객체에서 excluded 배열 내 key 를 제외한 나머지를 반환하는 함수
+// _objectWithoutPropertiesLoose 와는 다르게 Symbol Key 가 있는 경우도 고려한다.
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  // Symbol 키가 있다면 getOwnPropertySymbols 로 목록을 받아 순회한다.
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    // 객체 내부의 key 를 순회하며 excluded 에 포함되지 않는 나머지를 target 에 추가한다.
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue; // 해당 key 가 excluded 배열에 있다면 continue.
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+// source 객체에서 excluded 배열 내 key 를 제외한 나머지를 반환하는 함수
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source); // 여기서는 Symbol Key 를 반환하지 않는다.
+  var key, i;
+
+  // 객체 내부의 key 를 순회하며 excluded 에 포함되지 않는 나머지를 target 에 추가한다.
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue; // 해당 key 가 excluded 배열에 있다면 continue.
+    target[key] = source[key];
+  }
+  return target;
+}
+var obj = {
+  a: 1,
+  b: 2,
+  c: 3,
+  d: 4,
+};
+var a = obj.a,
+  b = obj.b,
+  rest = _objectWithoutProperties(obj, ["a", "b"]);
+```
+
+1. `_objectWithoutPropertiesLoose` 함수
+
+- source 인자는 객체이고, excluded 배열은 객체에서 제거할 key 값을 담은 배열이다.
+- source 객체의 key 를 추출한 후, 이를 순화하며 excluded 에 포함되는 key 를 제외한 나머지를 target 객체에 추가한다.
+- 이후 target 을 반환하는 것으로 함수를 종료한다.
+
+2. `_objectWithoutProperties` 함수
+
+- 기본 골자는 `_objectWithoutPropertiesLoose` 와 같으나 `Object.keys()` 메서드가 Symbol 형태의 key 를 찾지 못하는 예외를 처리하는 로직이 추가되었다.
+- 먼저 `_objectWithoutPropertiesLoose` 함수의 결과 (target) 를 인계 받는다.
+- 이후 source 객체 내 Symbol 타입의 key 배열을 `Object.getOwnPropertySymbols` 메서드로 받는다.
+- Symbol Key 배열을 순회하며 excluded 에 해당 key 가 있다면 이를 제외하고, 없다면 key 와 value 를 target 객체에 할당한다.
+
+
+### ✏️ Array Map, filter, reduce
+
+- 기존 배열의 요소를 순회하여 인자로 받은 callback 의 결과를 기반으로 새로운 배열에 요소를 추가하는 메서드이다.
+- React 의 경우 배열형 state 의 변경으로 리렌더링을 유발시키려면 메모리 주소가 달라져야 한다.
+- 위 메서드는 새로운 배열을 생성하여 할당하기에 `Object.is` 기반의 동등성 검사에서 값이 달라짐을 유도한다.
+
+### ✏️ 삼항 조건 연산자
+
+- 특정 값을 기반으로 다른 컴포넌트를 내부에서 렌더링 하도록 코드를 작성할 수 있다.
+- if - else 기반의 코드 블럭 없이 한 줄로 간결하게 조건문을 축약할 수 있다.
+
+
+# ✒️ Typescript
+
+> 책에서는 Typescript 를 다뤄야 하는 이유에 대해서 설명했기에 간결하게 내용만 정리하고자 한다.
+
+1. any 대신 unknown 을 사용하자.
+2. Type Guard, Type Narrow 를 잘 활용하자.
+3. Generic 사용으로 타입의 유연성을 높히자.
+4. Index Signature, Mapped Type 활용으로 참조형 타입의 사용을 쉽게 하자.
+
+- TS 를 써야 하는 이유에 대한 정리는 https://github.com/RookieAND/TIL/blob/master/TS/2023%20TS%20Study/Chapter1.md 에 남겨두었다.