📖프레임워크 없는 프론트 개발을 읽고 - 2장. 랜더링

웹 프론트엔드 개발자로 성장하기 위해 우테코에서 추천받은 책을 읽고

✔️ 랜더링?

모든 웹 애플리케이션에서 가장 중요한 기능 중 하나아인 데이터의 표시다.
데이터를 표시한다는 것은 요소를 화면이나 다른 출력 장치에 랜더링하는 것을 의미한다.

✔️ DOM

문서 객체 모델(DOM: Doucument Ojbect Model): 프로그래밍 방식으로 요소를 랜더링 하는 방식
모든 HTML은 트리로 구성되어 있다.

DOM은 HTML요소로 정의된 트리를 관리하는 방법이다.
Node란 HTML 트리에서 노드를 나타내는 기본 인터페이스다.

✔️ 랜더링 성능 모니터링

웹용 랜더링 엔진을 설계할 때는 가독성과 유지 관리성을 염두에 둬야 한다.
랜더링의 성능을 모니터링하는 방법은

1. 크롬 개발자 도구에서 FPS를 확인하기
   
   Ctrl + Shift + P를 누르고 show frames per second(FPS) meter 검색
   
   왼쪽 상단에서 현재 Frame Rate와 GPU 사용량을 알 수 있다.

   ---

2. stats.js 사용
   stats.js 깃허브
   어떤 웹 애플리케이션에도 쉽게 포함시킬 수 있는 아주 간단한 라이브러리인 stats.js를 사용하면 된다.
   프레임과 할당된 메가바이트의 메모리를 랜더링하는데 필요한 밀리초를 표시할 수도 있다.

✔️ 랜더링 함수

순수 함수로 요소를 랜더링한다는 DOM요소가 애플리케이션의 상태에만 의존한다와 동일한 의미를 갖는다.
순수함수를 사용하면 테스트 가능성이나 구성 가능성 같은 장점이 있다.

구성 요소 함수
구성 요소 기반의 애플리케이션을 작성하려면 구성 요소 간의 상호작용에 선언적 방식을 사용해야 한다.
시스템은 모든 부분을 자동으로 연결할 것이다.
특정 사례에서 사용할 구성 요소를 별도로 선언한다.

✔️ 정적 랜더링 스키마

브라우저 랜더링 🔜 다음 랜더링 대기 🔜 새 가상 노드 🔜 DOM 조작 🔜 브라우저 랜더링

✔️ 동적 데이터 랜더링

✔️ 가상 DOM

가상 DOM은 선언적 랜더링 엔진의 성능을 개선시키는 방법이다.
UI 표현은 메모리에 유지되고 '실제' DOM과 동기화된다.
실제 DOM은 가능한 적은 작업을 수행한다.

위 과정을 조정이라고 불린다.

✔️ Diff 알고리즘

가상 DOM의 핵심은 Diff 알고리즘이다.
실제 DOM을 문서에서 분리된 가상의 새로운 DOM요소의 사본으로 바꾸는 가장 빠른 방법을 찾아낸다

• 1. 애플리케이션은 가상DOM노드를 생성하고
• 2. 가상DOM 노드는 Diff알고리즘에 의해 처리된다.
• 3. Diff 알고리즘을 통해 실제 DOM으로 업데이트하고
• 4. 실제DOM은 애플리케이션에서 이벤트 발생을 준비한다.
• 그리고 1번부터 다시 반복된다.