모던 자바스크립트 프레임워크를 직접 만들어볼까요? 🔨

Nolan Lawson님의 블로그를 요약/의역한 글입니다. 모던 자바스크립트 프레임워크를 직접 구현해보며 기본적인 개념에 대해 설명하는 블로그에요.

---

모던 자바스크립트 프레임워크

Post-React 시대라고 정의 해볼게요. React 이후에 생겨난 프레임워크를 뜻합니다. 예를 들면 Lit, Solid, Svelte 등이 있죠. React의 영향을 받은 프레임워크들이지만 각자 독특한 방식으로 문제를 접근했으며 각기 다른 기능들을 부각하고 있죠.

이들은 서로 다른 프레임워크지만 몇 가지 기본적인 아이디어에 대해서 유사한 견해를 가지고 있습니다. DOM 업데이트 시 reactivity (반응성) 활용, DOM 렌더링 시 템플릿 복제, <template>와 Proxy 같은 모던 웹 API 활용

우리의 토이 프로젝트는 이것들의 간소화된 버전이 될 겁니다.

Reactivity 구현과 DOM 트리 복제

현대 프레임워크는 React와 달리 푸시 기반 반응 모델을 사용합니다. (React는 풀 기반 모델에 더 가까움). 푸시 기반 반응 모델은 컴포넌트 트리의 각 영역이 업데이트에 필요한 상태에 구독하는 형태며 해당 상태가 업데이트 되었을 때만 컴포넌트가 업데이트 되는 방식입니다. 근본적으로 풀 기반 모델에 비해 더 성능적으로 빠르다 라는 인식이 있지만 구독 현황을 미리 알고 있어야한다는 점이 있습니다.

아주 오랫동안 DOM 트리를 그리는 가장 빠른 방법은 각 노드에 필요한 작업을 한 뒤 직접 DOM 트리에 마운트하는 방식이었습니다. 이후 어떤 능력자의 발견으로 인해 HTML을 한번만 파싱한 후 cloneNode(true)를 통해 DOM 노드를 복제하는 방식이 훨씬 빠르다는 것을 알게 됐죠.

모던 웹 API에 추가된 Proxy를 사용해서 상태를 구현하고 마이크로태스크 큐에 flush 로직을 구현해서 브라우저가 렌더링하기 직전에 모든 상태 값 업데이트를 수행합니다.

DOM 렌더링

HTML 문자열에 태그를 지정하고 템플릿 리터럴을 만들어서 상태 변경에 따라 달라지는 DOM을 만들 수 있게 준비해줍니다. 그리고 해당 템플릿 리터럴을 <template>을 사용해서 파싱한 뒤 DOM 트리를 만들어낼 수 있도록 해줍니다. 파싱된 DOM 트리는 캐싱될 수 있도록 WeakMap을 사용합니다. 마지막으로 전체 HTML을 업데이트하기 보다 동적 컨텐츠로 복제된 노드만 업데이트하는 방식을 사용합니다.

---

원글을 읽어보면 코드 예시와 함께 모던 자바스크립트 프레임워크의 기본 개념인 reactivity, DOM 노드 복제와 부분 렌더링에 대해 간략하게나마 이해 할 수 있어요.

원글: https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/