DOM 썸네일형 리스트형 웹 컴포넌트 알아보기 웹 컴포넌트 웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다. 웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다. 생기게 된 계기 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계.. 더보기 Virtual DOM 훑어보기 Virtual DOM이란? Virtual DOM은 "가상의 문서 객체 모델"을 의미한다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 트리 형태의 데이터 구조로 이루어져 있는데, Virtual DOM은 이 DOM의 가벼운 복제본이라고 볼 수 있으며, 메모리 내에 존재하므로 실제 DOM보다 빠르게 조작할 수 있다. 작동 방식 추상화된 DOM 표현: Virtual DOM은 메모리 내에서 실제 DOM의 트리 구조를 추상화하여 표현한다. 각 노드는 JavaScript 객체로 표현되며, 실제 DOM에 직접적인 영향을 주지 않는다. 변화 감지: 사용자 상호작용이나 데이터 변경으로 인해 UI가 변경될 때마다 새로운 Virtual DOM 트리가 생성된다. 이 새 트리는 이전 Virtu.. 더보기 브라우저 렌더링 알아보기 우리가 사용하는 크롬, 사파리 등등에서 페이지에 접속하게 되면 해당 페이지에서 제공하는 화면을 볼 수 있게 된다. 이렇게 우리가 볼 수 있는 브라우저 화면이 보여지는 과정은 어떻게 이루어져 있을까 렌더링 순서 HTML 다운로드: 브라우저는 웹 서버에게 HTML 파일을 요청하고, 이를 받아서 다운로드한다. DOM 트리 생성: HTML 파일이 다운로드되면, 브라우저는 이를 분석하고 DOM (Document Object Model) 트리를 만든다. 각 HTML 요소(태그)는 DOM 트리의 노드가 된다. CSSOM 트리 생성: HTML 문서가 외부 CSS 파일과 스타일 태그를 포함하고 있다면, 이들을 분석하여 CSSOM (CSS Object Model) 트리를 만든다. 렌더 트리 생성: DOM 트리와 CSSOM.. 더보기 이전 1 다음
