![]()
1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조에 접근할 수 있는 방법을 제공해 특정 노드(문서, 구조, 스타일 등)를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있다. 웹 브라우저는 DOM을 활용해 객체에 Javascript와 CSS를 적용한다. API (web or XML page) = DOM + JS (scripting language) DOM과 접근 방법에 대해 추가로 알아보기 위해 아래의 링크를 참고하자 DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문..
React는 오직 V(View)만 신경 쓰는 라이브러이다. 1. 컴포넌트 React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며, 컴포넌트의 생김새와 작동 방식을 정의한 선언체이다. 2. 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라 한다. React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다. 2.1 초기 렌더링 사용자에게 맨처음 어떻게 보일지를 정하는 작업 위의 작업은 render() 함수가 한다. render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다. 최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다. render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제..
브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..
