다음 목록을 보고, 각 항목이 DOM 자체(DOM Tree), DOM Interface(API), JS 엔진 기능, 브라우저 렌더링 기능 중 어디에 속하는지 분류하시오.
분류할 항목들:
- HTML 요소 간 부모-자식 관계
- document.createElement
- 힙/콜스택 관리
- CSS 적용 후 레이아웃 위치 계산
- appendChild
- 실제 노드 정보를 담은 메모리 구조체
- 파싱된 CSS의 규칙 트리 (CSSOM)
- function 실행을 위한 스코프 체인 관리
- innerText
- 화면 페인트(Paint) 수행
다음 문장을 읽고 빈칸에 들어갈 알맞은 용어를 쓰시오.
-
브라우저가 HTML을 파싱해서 만든 메모리 속 트리 구조를 (__) 라고 한다.
-
JavaScript가 이 구조 안의 노드를 조작하기 위해 사용하는 표준화된 규약(속성·메서드 명세) 을 (__) 라고 부른다.
-
JavaScript가 DOM 노드에 접근할 때, 브라우저가 제공한 DOM 객체는 JS 입장에서 (__) 객체(Host / Native 중 선택)이다.
다음 문장이 맞는 문장인지 틀린 문장인지 고르시오. 틀렸다면 왜 직접 접근할 수 없는지 기술적 이유를 설명하시오.
“JavaScript 엔진은 DOM 트리의 노드 구조에 직접 접근할 수 있으며, DOM Interface는 단순한 편의 기능일 뿐이다.” -> (O / X)
브라우저 렌더링 엔진은 HTML과 CSS를 분석해 화면을 그리기 위한 내부 구조를 생성한다. 이 과정에서 DOM, CSSOM, Render Tree는 각각 어떤 순서로 만들어지며, 서로 어떤 방식으로 결합되는가?
다음 요구사항을 만족하며 3~4단계의 간단한 흐름으로 서술하시오.
-
DOM과 CSSOM이 각각 무엇을 기반으로 생성되는지 명시할 것
-
Render Tree가 어떻게 만들어지는지 설명할 것
-
Render Tree 이후의 레이아웃·페인트 과정까지 포함할 것