Front (10) 썸네일형 리스트형 Virtual DOM 만들기 - #6 eventManager (향해 플러스 2주차) eventManager브라우저 기본 이벤트를 요소마다 직접 달아도 되지만, 규모가 커질수록 관리가 어렵고 성능 부담이 생긴다. 이번 파트에서는 이벤트 위임으로 루트에 한 번만 리스너를 걸고, React 처럼 SyntheticEvent로 일관된 이벤트 인터페이스를 제공하는 방식을 구현해보자.1. 루트에 한 번만 리스너 등록: setupEventListeners`currentRoot` 에 이벤트 타입마다 한 번만 이벤트 리스너를 등록한다. `_delegatedEvents` 라는 `Set` 을 통해 이미 등록된 이벤트 타입의 중복을 방지한다.const eventListeners = new Set();let currentRoot = null;export function setupEventListeners(ro.. Virtual DOM 만들기 - #5: updateElement (향해 플러스 2주차) updateElement`updateElement`는 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 역할을 한다. 이 과정이 바로 Virtual DOM의 핵심, diffing 알고리즘이다.1. 새로운 노드와 이전 노드가 모두 없는 경우if (!newNode && !oldNode) return;아무 작업도 하지 않는다. 예시{show && hello}// show가 false 일 때// oldNode: undefined// newNode: undefined2. 새로운 노드가 없으면 기존 노드를 제거if (!newNode && oldNode) { const child = parentElement.childNodes[index]; if (child) parentEl.. Virtual DOM 만들기 - #4: renderElement (향해 플러스 2주차) renderElement`renderElement`는 가상 DOM을 실제 DOM에 렌더링하는 진입점이다. 최초 렌더링 시에는 `createElement`를 통해 DOM을 생성하고, 이후에는 diffing 알고리즘을 적용해 변경된 부분만 업데이트 한다.1. normalizeVNode 로 정제넘겨 받은 vNode가 아직 정제가 덜 된 상태일 수 있다. children의 중첩 배열 null, false 등의 값들을 normalizeVNode 을 실행해서 정제해준다.const normalizedVNode = normalizeVNode(vNode);2. 최초 렌더링 여부 판단container에 _vNode가 없으면 최초 렌더링이다.const oldNode = container._vNode;const isFirst.. Virtual DOM 만들기 - #3. createElement (향해 플러스 2주차) createElement정제된 vNode를 이제 실제 브라우저 DOM으로 변환해야 한다. `createElement`는 가상 DOM 객체를 기반으로 진짜 DOM 노드를 생성하는 역할을 한다.1. null, undefined, boolean 인 경우 빈 문자열이 담긴 텍스트 노드로 변환// vNode가 undefined, null, boolean인 경우 빈 문자열이 담김 textNode를 반환한다.if (vNode === undefined || vNode === null || typeof vNode === "boolean") { return document.createTextNode("");} 예시{isShow && "Hello"}// isShow가 false면 false 가 들어오면서 빈 문자열이 담긴.. Virtual DOM 만들기 - #2. normalizeVNode (향해 플러스 2주차) normalizeVNode가상 DOM 객체가 만들어졌다면, 이제는 이걸 정제하는 과정이 필요하다. JSX에서 오는 다양한 형태(null, boolean, 함수 등)를 통일된 포맷으로 유지하도록 보정한다.1. `null` ,`undefined`, `true`, `false` → 빈 문자열로 변환if (vNode === null || vNode === undefined || typeof vNode === "boolean") { return "";} 예시{isShow && Hello}// isShow가 false면 normalizeVNode(false)가 들어오는 걸 ""로 변환2. 문자열과 숫자는 문자열로 변환 if (typeof vNode === "string" || typeof vNode === "nu.. Virtual DOM 만들기 - #1. createVNode (향해 플러스 2주차) 2주차 과제1주차에서 SPA를 직접 구현하긴 했지만, 리렌더링이 트리거될 떄 변경된 부분만 다시 그리는 것이 아니라 전체 DOM을 다시 렌더링하는 방식이었기 떄문에 진정한 의미의 SPA라고 보기는 어려웠다. 성능 면에서도 비효율적인 부분이 많았다. 그래서 이번 2주차 과제에서는 Virtual DOM을 직접 구현하고, diffing 알고리즘을 도입해 상태가 변경된 부분만 선택적으로 리렌더링되도록 개선하는 것이 목표였다. 평소 diffing 알고리즘이 어떻게 동작하고 구현하는지 궁금했었는데 흥미로운 도전이 될 것 같다.이번 과제에서는 Vite 번들러 환경에서 JSX를 사용하기 위해서 Babel 관련 패키지를 설정하고, 프로덕션 코드로 사용 가능한 형태로 만들기 위해 ES5 코드로 변환하는 트랜스파일링 과정이.. 프레임워크 없이 SAP 구현하기 - (향해 플러스 1주차) 대망의 1주차이번 과제는 프레임워크/라이브러리 없이 SPA를 구현하는 거였다. 맨땅에서 SPA를 구현하는건 처음이라 어떻게 해야될지, 어떤거 부터 시작해야될지 생각이 너무 많아져서 머리가 아플 지경이였다.. 과제 양도 많고, 테스트 코드도 통과 시켜야 해서 대충 만든다고 해서 끝이 아니였다. 과제를 만들어주신 준일 코치님의 블로그와 발제 자료들을 보면서 하나씩 차근차근 목록을 정해봤다.브라우저 History API를 이용한 라우터 관리이벤트 버블링을 활용한 이벤트 위임Web Storage API, Observer Pattern를 활용한 전역 및 컴포넌트 상태 관리템플릿 메서드 패턴을 활용한 Core가 되는 컴포넌트 생성라우터를 구현해보자.SPA에서 라우터는 페이지를 이동할 때 서버로부터 HTML을 받아오.. React.memo, useMemo, useCallback 차이점과 활용법 React로 개발을 하다보면 원하지 않는 시점에 컴포넌트가 재렌더링 되는 경우가 있다. 이러한 현상을 보고 있으면 스트레스를 받아 성능을 최적화 해야겠다는 생각이 들게된다. 이럴 때 사용할 수 있는 기법 중 하나가 오늘의 주제 “Memoization” 이다. Memoization 이란?컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.리액트에서 리렌더링이 일어나는 조건컴포넌트의 state가 변경되었을 때컴포넌트가 상속받은 props가 변경되었을 때부모 컴포넌트가 리렌더링이 된 경우 모든 자식 컴포넌트는 리렌더링React 에서 Memoization을 하는 대표적인 방법Mem.. 이전 1 2 다음