fiber 2

Virtual DOM 을 왜 사용하나요? (Feat. React reconciliation)

React, Vue 등 Virtual DOM을 채택한 경우가 많이 있습니다. DOM 이 아니라, Virtual DOM을 선택해야 하고, 사용해야 하는 이유에 대해서 알아봅시다. DOM (Document Object Model) Virtual DOM 을 알기 전에 실제 DOM에 대해서 간단하게만 알아봅시다. DOM 은 문서의 구조화된 표현을 제공하고 있으며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 담당을 합니다. 간단하게 얘기하면 개발자들은 DOM 을 만들어내고, DOM 은 웹페이지를 구성하면서 사용자들에게 보여지는 역할을 담당합니다. Browser Workflow (webkit) Webkit 에서 Browser가 작동하는 과정을 도식화한 모습입니다. 간단하게 내용을 살..

Web/techTalk 2022.07.05

[React Fiber Architecture] What is React-Fiber Architecture?

React Fiber Architecture https://www.youtube.com/watch?v=ZCuYPiUIONs 위의 동영상은 React Fiber Architecture가 처음 나왔을 때 소개해 주는 영상입니다. What is Fiber Architecture ? 영상 초반에서 프랙탈 구조의 삼각형이 좁아지고, 넓어지면서 각각의 숫자가 바뀌는 모습을 볼 수 있습니다. 삼각형이 좁아지고 넓어지는 과정은 최상단의 노드를 기점으로 바꾸면 됩니다. 렌더링 과정에서 페이지 내부 애니메이션이 부드럽게 보이려면 16ms 내에 작업이 처리되어야 합니다 ❗️❗️ 하지만, 기존 알고리즘으로는 각각의 숫자가 바뀌는 과정이 16ms에 맞추기가 어렵습니다 😭 그렇기에 Virtual DOM을 최소화하고, 업데이트 일..

Web/React 2022.01.31