DOM

리액트의 특징으로 가장 많이 언급된 것 중 하나는 바로 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 하지만 가상 DOM이 외 만들어졌는지, 실제 DOM과 어떻게 다른지, 그리고 정말 실제 DOM을 조작하는 것보다 빠른지에 대해서는 잘 모르는 경우가 많다. DOM과 브라우저 렌더링 과정DOM은 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 브라우저가 웹 사이트 접근 요청을 받고 화면을 그리는 과정에서 정확히 어떤한 일은 아래의 과정과 같다.브라우저가 URL에서 HTML 파일을 다운로드한다.HTML을 파싱하여 DOM 노드 트리를 만든다.(2)번 과정에서 CSS 파일을 만나면 CSS 파일을 다운로드한다.CSS도 파싱해 CSSOM을 구성한다.(2)번 DOM 노드를 순회..

이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 브라우저는 사용자의 버튼 클릭을 감지해 클릭 이벤트를 발생시킬 수 있다. Click me!  이처럼 이벤트와 그에 대응하는 이벤트 핸들러를 통해 사용자와 에플리케이션은 상호착용하며 이런 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 이벤트 타입이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 아래의 MDN 문서에..

어트리뷰트어트리뷰트 노드와 attributes 프로퍼티HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름과 값을 정의한다. 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트는 모든 HTML 요소에서 공통적으로 사용할 수 있지만, 특정 HTML 요소에만 사용 가능한 어트리뷰트도 있다. HTML이 파싱될 때 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결되며 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다. 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있으며, at..

노드 탐색요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색 해야 할 때가 있다. Apple Banana Orange ul#fruits 요소는 3개의 자식 요소를 갖기에 ul#fruits 요소 노드를 취득하고 자식 노드를 모두 탐색하거나 자식 노드 중 하나만 탐색할 수 있다. 이처럼 DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.parentNode, PreviousSibiling, firstChild, childNodes 프로퍼티는 Node.protoype이 제공하고, 프로퍼티키에 Element가 포함된 previousElementSibling, nextEleme..

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 구조이다. 노드HTML 요소와 노드 객체HTML 문서는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.이때 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다.HTML 요소 간에 중첩 관계에 의한 계층적인 부자 관계가 형성되며 모든 노드 객체들을 트리 자료구조로 구성한다. 트리 자료구조트리 자료구조는 노드들의 계층 구조로 이뤄지며 부모 노드와 자식 노드로 구성된 계층..

구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 언어가 되었다. 하지만 JS는 여전히 웹 브라우저 환경에서 많이 동작하는 클라이언트 사이드이다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 JS는 브라우저에서 HTML, CSS와 함께 실행된다. 이번 쳅터에서는 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자.파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 토큰으로 분해해 문법적 의미와 구조를 반영해 트리구조인 파스 트리를 생성하는 과정이다.렌더링: HTML, CSS,..