---

새롭게 배운내용

---

HTML, CSS를 참고하기 좋은 사이트

https://codepen.io/

DOM(Document Object Model)

• JavaScript가 탄생하면서 같이 등장

브라우저 렌더링 과정

1. HTML markup을 기반으로 DOM tree 형성
2. CSS markup을 기반으로 CSSOM tree 형성
3. DOM 과 CSSOM 트리를 합쳐 Render Tree를 형성
   3.1. DOM에서 visible DOM Node들을 순회하며 구성한다.
   *script,meta와 같은 tags들은 캡쳐하지 않는다 또한 이때, CSS에서 display: none property와 같은 정보를 가진 노드또한 캡쳐에서 제외된다. *visibility와 같은 property는 예외!
*documentNode(문서 노드)를 Root로 하여 PreOrder Traverse로 각 노드를 순회한다.
   3.2. CSSOM에서 해당 style 정보를 각 Node에 연결시킨다.
   3.3. visible Node들을 (content 와 styles와 함께) 방출한다.
4. 각 노드들의 layout(reflow)을 형성한다.
   [viewport](https://web.dev/responsive-web-design-basics/#set-the-viewport)에 알맞는 위치와 크기(px단위)를 설정한다.
5. 각 노드들을 screen에 Paint한다.

Virtual DOM의 오해

• Virtual DOM은 부분적 렌더링을 가능하게 해주는 등 유지보수에 용이한 어플리케이션을 만들도록 도와줄 뿐이지, DOM보다 빠르다고 볼수는 없다

Virtual DOM을 쓰지않고 최적화해야한다면?

document.createDocumentFragment를 살펴보자

함수형 자바스크립트

평가

코드가 계산(Evaluation)되어 값을 만드는것

일급

• 값으로 다룰 수 있다.()=>3
• 변수에 담을 수 있다.let variable = () => 3;
• 함수의 인자로 사용될 수 있다.

const func2 = (a) => console.log(a);
func2(1) // 1

• 함수의 결과로 사용될 수 있다.

const func1 = (f) => f(1);
const func2 = (a) => console.log(a);

func1(func2) // 1

JavaScript의 함수는 일급함수이다

• 값으로 다룰 수 있고, 변수에 담을 수 있고, 함수의 인자로 사용되며, 함수의 결과로도 사용될 수 있다.

Iterable과 Iterator

• Iterator: {value , done} 객체를 리턴하는 next()를 가진 값
• Iterable : Iterator를 리턴하는 [Symbol.iterator] ()를 가진 값
• Iterable/Iterator Protocol : 이터러블을 for...of,spread 연산자(...) 등과 함께 동작 하도록 한 규약
• well-formed Iterator : [Symbol.iterator]() 가 자기 자신(this)을 가르키는 Iterator

제너레이터(Generator)

Iterator이자 Iterable을 생성하는 함수

• function* gen(){}과 같은 형태로 생성할수있다.
• yield를 통해 [Symbol.iterator]에 값을 순차적으로 전달한다.
• Generator 를 통해 JavaScript에서는 어떤값이든 순회할 수 있는 Iterator를 만들 수 있다.

---

오늘 느낀점

---

• Iterator와 Generator에 대해서 항상 궁금해왔지만 머리속에 잘 그려지지 않았는데 이제야 갈피가 잡혔다! (인류가 불을 처음 발견한 것과 같은 놀라움...!) JavaScript에 대해 조금 더 알게된것 같고, 더 많은것을 할수 있을것같다.
• 길찾기 알고리즘을 비주얼적으로 구현하고 싶다. 추가로 나아가서, 모든 자료구조에 대해서 비주얼적으로 정리되어있는 웹페이지를 만들면 좋겠다는 생각을 했다
  토이 프로젝트로 만들어볼까??

---

참고

브라우저 렌더링 과정