[week4_MINJAE] 4주차 퀴즈

[mimizae]

Q1.

다음 목록을 보고, 각 항목이 DOM 자체(DOM Tree), DOM Interface(API), JS 엔진 기능, 브라우저 렌더링 기능 중 어디에 속하는지 분류하시오.

분류할 항목들:

• HTML 요소 간 부모-자식 관계
• document.createElement
• 힙/콜스택 관리
• CSS 적용 후 레이아웃 위치 계산
• appendChild
• 실제 노드 정보를 담은 메모리 구조체
• 파싱된 CSS의 규칙 트리 (CSSOM)
• function 실행을 위한 스코프 체인 관리
• innerText
• 화면 페인트(Paint) 수행

Q2.

다음 문장을 읽고 빈칸에 들어갈 알맞은 용어를 쓰시오.

1. 브라우저가 HTML을 파싱해서 만든 메모리 속 트리 구조를 (__) 라고 한다.

2. JavaScript가 이 구조 안의 노드를 조작하기 위해 사용하는 표준화된 규약(속성·메서드 명세) 을 (__) 라고 부른다.

3. JavaScript가 DOM 노드에 접근할 때, 브라우저가 제공한 DOM 객체는 JS 입장에서 (__) 객체(Host / Native 중 선택)이다.

Q3.

다음 문장이 맞는 문장인지 틀린 문장인지 고르시오. 틀렸다면 왜 직접 접근할 수 없는지 기술적 이유를 설명하시오.

“JavaScript 엔진은 DOM 트리의 노드 구조에 직접 접근할 수 있으며, DOM Interface는 단순한 편의 기능일 뿐이다.”
-> (O / X)

Q4.

브라우저 렌더링 엔진은 HTML과 CSS를 분석해 화면을 그리기 위한 내부 구조를 생성한다.
이 과정에서 DOM, CSSOM, Render Tree는 각각 어떤 순서로 만들어지며, 서로 어떤 방식으로 결합되는가?

다음 요구사항을 만족하며 3~4단계의 간단한 흐름으로 서술하시오.

• DOM과 CSSOM이 각각 무엇을 기반으로 생성되는지 명시할 것

• Render Tree가 어떻게 만들어지는지 설명할 것

• Render Tree 이후의 레이아웃·페인트 과정까지 포함할 것

[jstar000]

Q1.

• HTML 요소 간 부모-자식 관계: DOM tree
• document.createElement: DOM interface
• 힙/콜스택 관리: JS 엔진
• CSS 적용 후 레이아웃 위치 계산: 브라우저 렌더링
• appendChild: DOM Interface
• 실제 노드 정보를 담은 메모리 구조체: DOM tree
• 파싱된 CSS의 규칙 트리 (CSSOM): 브라우저 렌더링
• function 실행을 위한 스코프 체인 관리: JS 엔진
• innerText: DOM Interface
• 화면 페인트(Paint) 수행: 브라우저 렌더링

Q2.

1. DOM
2. DOM Interface(DOM 명세): WHATWG가 정의한 표준 명세, Node/Document/Element 등의 인터페이스가 가져야 할 속성과 메서드 등 정의
3. Host 객체: 자바스크립트 실행 환경(브라우저, Node.js 등)이 제공하는 객체를 Host 객체라고 함

Q3.

(X)

• JavaScript 엔진의 메모리

  • JavaScript 객체 (heap)
  • 실행 컨텍스트 (콜 스택 <- '실행 컨텍스트 스택')
  • DOM 노드에 대한 참조만 저장

• Rendering 엔진 메모리

  • 실제 DOM 트리 구조
  • 트리의 노드 간 부모-자식 관계
  • 노드의 attribute 정보
    두 엔진, 두 엔진의 모메리 영역이 물리적으로 구분되어 있다.

• JavaScript 엔진은 JS로 작성된 코드를 실행하며, ECMAScript에 정의된 JS 객체만 직접 조작 가능하다

• 렌더링 엔진은 내부적으로 C++로 DOM 트리를 구현하고 노드를 관리한다
  => 따라서 JS는 DOM 트리의 메모리를 직접 읽을 수 없다
  => DOM API는 편의기능 X, DOM API 호출 시 제어권이 렌더링 엔진으로 이동, 렌더링 엔진이 실제 DOM 조작 수행 / DOM API 없이는 JS가 DOM을 조작할 수 없다!

Q4.

1. DOM 생성: HTML 파싱 -> DOM 트리 생성
2. CSSOM 생성: CSS 파싱 -> CSSOM 트리 생성
3. Render Tree 생성: DOM과 CSSOM이 결합돼 Render Tree가 생성됨

• 화면에 표시되는 요소만 포함(ex: display: none 제외)

4. Layout(Reflow): Render Tree를 기반으로 각 element의 위치, 크기 계산
5. Paint(Repaint): 4에서 계산된 정보를 바탕으로 실제 화면에 픽셀을 렌더링함

[Sohyunnnn]

Q1.

다음 목록을 보고, 각 항목이 DOM 자체(DOM Tree), DOM Interface(API), JS 엔진 기능, 브라우저 렌더링 기능 중 어디에 속하는지 분류하시오.

분류할 항목들:

• HTML 요소 간 부모-자식 관계
• document.createElement
• 힙/콜스택 관리
• CSS 적용 후 레이아웃 위치 계산
• appendChild
• 실제 노드 정보를 담은 메모리 구조체
• 파싱된 CSS의 규칙 트리 (CSSOM)
• function 실행을 위한 스코프 체인 관리
• innerText
• 화면 페인트(Paint) 수행

DOM Tree: HTML 요소 간 부모-자식 관계 / 실제 노드 정보를 담은 메모리 구조체

DOM Interface: document.createElement / appendChild / innerText
JS 엔진 기능: 힙/콜스택 관리 / function 실행을 위한 스코프 체인 관리

브라우저 렌더링 기능: CSS 적용 후 레이아웃 위치 계산 / 파싱된 CSS의 규칙 트리 (CSSOM) / 화면 페인트(Paint) 수행

Q2.

다음 문장을 읽고 빈칸에 들어갈 알맞은 용어를 쓰시오.

1. 브라우저가 HTML을 파싱해서 만든 메모리 속 트리 구조를 (__) 라고 한다.
2. JavaScript가 이 구조 안의 노드를 조작하기 위해 사용하는 표준화된 규약(속성·메서드 명세) 을 (__) 라고 부른다.
3. JavaScript가 DOM 노드에 접근할 때, 브라우저가 제공한 DOM 객체는 JS 입장에서 (__) 객체(Host / Native 중 선택)이다.

1. DOM Tree
2. DOM Interface
3. HOST

Q3.

다음 문장이 맞는 문장인지 틀린 문장인지 고르시오. 틀렸다면 왜 직접 접근할 수 없는지 기술적 이유를 설명하시오.

“JavaScript 엔진은 DOM 트리의 노드 구조에 직접 접근할 수 있으며, DOM Interface는 단순한 편의 기능일 뿐이다.”

• (O / X)

X

JS 엔진은 DOM Tree에 직접적으로 접근 할 수 없다.
DOM Tree는 렌더링 엔진이 관리하는 메모리 구조이며, JS 브라우저가 제공한 DOM API를 통해서만 간접적으로 접근 가능.

Q4.

브라우저 렌더링 엔진은 HTML과 CSS를 분석해 화면을 그리기 위한 내부 구조를 생성한다.

이 과정에서 DOM, CSSOM, Render Tree는 각각 어떤 순서로 만들어지며, 서로 어떤 방식으로 결합되는가?

다음 요구사항을 만족하며 3~4단계의 간단한 흐름으로 서술하시오.

• DOM과 CSSOM이 각각 무엇을 기반으로 생성되는지 명시할 것
• Render Tree가 어떻게 만들어지는지 설명할 것
• Render Tree 이후의 레이아웃·페인트 과정까지 포함할 것

1. HTML 파싱 → DOM Tree 생성

   브라우저는 HTML을 파싱하여 요소, 속성, 텍스트 노드를 객체로 변환하고, 이를 트리 구조인 DOM Tree 로 구성

2. CSS 파싱 → CSSOM 생성

   CSS를 파싱하여 선택자와 스타일 규칙을 규칙 트리 형태로 구성하고, CSSOM (CSS Object Model) 을 생성

3. DOM + CSSOM 결합 → Render Tree 생성

   렌더링 엔진은 DOM과 CSSOM을 결합하여 실제 화면에 표시될 요소들만 포함한 Render Tree 를 만듬.

4. Layout → Paint → Composite

   Render Tree를 기반으로 각 요소의 위치와 크기(Layout) 를 계산하고, 이후 색상·폰트·배경 등을 픽셀 단위로 그리는(Paint) 과정을 거쳐 화면에 출력

[eunkr82]

Q1.

다음 목록을 보고, 각 항목이 DOM 자체(DOM Tree), DOM Interface(API), JS 엔진 기능, 브라우저 렌더링 기능 중 어디에 속하는지 분류하시오.

분류할 항목들:

• HTML 요소 간 부모-자식 관계 : DOM Tree
• document.createElement : DOM interface
• 힙/콜스택 관리 : JS 엔진 기능
• CSS 적용 후 레이아웃 위치 계산 : 브라우저 렌더링 기능
• appendChild ; DOM interface
• 실제 노드 정보를 담은 메모리 구조체 : DOM Tree
• 파싱된 CSS의 규칙 트리 (CSSOM) : DOM 자체
• function 실행을 위한 스코프 체인 관리 : JS 엔진 기능
• innerText : DOM interface
• 화면 페인트(Paint) 수행 : 브라우저 렌더링 기능

Q2.

다음 문장을 읽고 빈칸에 들어갈 알맞은 용어를 쓰시오.

1. 브라우저가 HTML을 파싱해서 만든 메모리 속 트리 구조를 (DOM tree) 라고 한다.

2. JavaScript가 이 구조 안의 노드를 조작하기 위해 사용하는 표준화된 규약(속성·메서드 명세) 을 (DOM interface) 라고 부른다.

3. JavaScript가 DOM 노드에 접근할 때, 브라우저가 제공한 DOM 객체는 JS 입장에서 (Host) 객체이다.

Q3.

다음 문장이 맞는 문장인지 틀린 문장인지 고르시오. 틀렸다면 왜 직접 접근할 수 없는지 기술적 이유를 설명하시오.

“JavaScript 엔진은 DOM 트리의 노드 구조에 직접 접근할 수 있으며, DOM Interface는 단순한 편의 기능일 뿐이다.”
-> (O / X)

X
DOM 트리의 실제 메모리 구조는 렌더링 엔진(브라우저)가 관리한다. 따라서 JS 엔진은 DOM 내부 구조체에 직접 메모리 접근하는 것이 아니라, 인터페이스(메서드와 프로퍼티)를 통해 간접적으로 요청해야 한다. DOM interface는 단순 편의 기능이 아닌 JS가 브라우저 내부 DOM에 접근할 수 있는 통로다.

Q4.

브라우저 렌더링 엔진은 HTML과 CSS를 분석해 화면을 그리기 위한 내부 구조를 생성한다.
이 과정에서 DOM, CSSOM, Render Tree는 각각 어떤 순서로 만들어지며, 서로 어떤 방식으로 결합되는가?

다음 요구사항을 만족하며 3~4단계의 간단한 흐름으로 서술하시오.

• DOM과 CSSOM이 각각 무엇을 기반으로 생성되는지 명시할 것

• Render Tree가 어떻게 만들어지는지 설명할 것

• Render Tree 이후의 레이아웃·페인트 과정까지 포함할 것

1. HTML 파싱 -> DOM 생성
2. CSS 파싱 -> CSSOM 생성
3. DOM + CSSOM -> Render Tree 생성
4. Render Tree -> 레이아웃, 페인트

[qowjdals23]

Q1.

• HTML 요소 간 부모-자식 관계 - DOM Tree
• document.createElement - DOM Interface
• 힙/콜스택 관리 - JS 엔진
• CSS 적용 후 레이아웃 위치 계산 - 브라우저 렌더링
• appendChild - DOM Interface
• 실제 노드 정보를 담은 메모리 구조체 - DOM Tree
• 파싱된 CSS의 규칙 트리 (CSSOM) - 브라우저 렌더링
• function 실행을 위한 스코프 체인 관리 - JS 엔진
• innerText - DOM Interface
• 화면 페인트(Paint) 수행 - 브라우저 렌더링

---

Q2.

1. DOM Tree
2. DOM Interface
3. Host 객체

---

Q3.

정답: X
이유:

• JS 엔진은 DOM을 직접 접근할 수 없다.
  DOM은 브라우저 렌더링 엔진이 관리하는 메모리 영역이고,
  자바스크립트 엔진(V8, SpiderMonkey 등)은 ECMAScript 스펙 기반의 언어 처리만 담당한다.
• JS 엔진은 브라우저가 제공하는 Web API(Host API)를 통해서만 DOM에 접근한다.
  즉, document, Element, appendChild 등은 ECMAScript가 아니라 브라우저가 제공한 별도 환경이다.
• 따라서 DOM Interface는 편의 기능이 아니라 JS가 브라우저 구조에 안전하게 접근하도록 보장하는 유일한 통로다.

---

Q4.

1. HTML 파싱 → DOM 생성
   렌더링 엔진이 HTML을 해석해 각 요소의 계층 구조를 저장한 DOM Tree를 만든다.

2. CSS 파싱 → CSSOM 생성
   CSS 파일과 스타일 정보를 분석하여 선택자/규칙을 트리 형태로 정리한 CSSOM을 구성한다.

3. DOM + CSSOM 결합 → Render Tree 생성
   DOM에서 화면에 표시되는 요소만 선택하고 CSSOM의 스타일 규칙을 함께 적용하여 Render Tree를 생성한다.

4. Render Tree 기반으로 Layout → Paint
   Render Tree를 바탕으로 각 요소의 정확한 위치·크기 계산(Layout) 을 수행한 뒤 실제 픽셀로 화면에 그리는 단계(Paint) 를 거친다.

[Tnalxmsk]

Q1.

DOM 자체

• HTML 요소 간 부모-자식 관계
• 실제 노드 정보를 담은 메모리 구조체

DOM Interface

• documents.createElement
• appendChild
• innerText

JS 엔진 기능

• 힙/콜스택 관리
• function 실행을 위한 스코프 체인 관리

브라우저 렌더링 기능

• 화면 페인트 수행
• 파싱된 CSS의 규칙 트리
• CSS 적용 후 레이아웃 위치 계산

Q2.

1. DOM Tree
2. DOM Interface
3. Host

Q3.

X. 자바스크립트는 직접 접근할 수 없다. 자바스크립트 엔진과 브라우저의 렌더링 엔진은 서로 다른 독립된 엔진. 관리하는 역할이 다름.

따라서 JS를 통해 DOM 조작을 수행할 수 있도록 DOM Interface를 활용

Q4.

1. 브라우저의 렌더링 프로세스에서 가장 먼저 HTML 태그를 기반으로 DOM Tree를 만든다.
2. 이후 CSS를 파싱해 CSSOM을 만든다.
3. DOM Tree와 CSSOM을 결합하여 Render Tree를 만든다.
4. Render Tree를 기반으로 각 요소의 위치와 크기를 계산하여 Layout Tree를 만든다.
5. paint 단계에서 Layout Tree를 순회하며 각 요소를 어떤 순서로 그릴지 판단하기 위해 paint record를 생성한다.
6. 마지막으로 합성 과정을 거쳐 실제 픽셀로 변환하는 Resterization 수행 후 실제 웹 페이지를 그린다.

[sonnnnhe]

Q1.

• HTML 요소 간 부모-자식 관계 - DOM
• document.createElement - DOM interface
• 힙/콜스택 관리 - JS 엔진 기능
• CSS 적용 후 레이아웃 위치 계산 - 브라우저 렌더링 기능
• appendChild - DOM interface
• 실제 노드 정보를 담은 메모리 구조체 - DOM
• 파싱된 CSS의 규칙 트리 (CSSOM) - 브라우저 렌더링 기능
• function 실행을 위한 스코프 체인 관리 - JS 엔진 기능
• innerText - DOM interface
• 화면 페인트(Paint) 수행 - 브라우저 렌더링 기능

---

Q2.

1. DOM
2. DOM API
3. Host

---

Q3.

X, JS 엔진과 렌더링 엔진은 서로 다른 메모리 공간을 가진 별개의 시스템이기 때문에 JS 엔진이 DOM 트리에 직접 접근하는 것은 불가능하다. DOM interface는 단순한 편의 기능이 아닌, JS 엔진이 렌더링 엔진의 객체에 접근할 수 있도록 해주는 필수적인 통신 규약이다.

---

Q4.

1. HTML을 파싱하여 DOM을 생성, CSS를 파싱하여 CSSOM을 생성
2. DOM과 CSSOM을 결합하여 Render Tree 생성
3. Layout - Render Tree를 기반으로 각 노드의 위치와 크기가 결정됨
4. Paint - Layout에서 계산된 정보를 이용해 픽셀을 화면에 채워넣음 -> 실제 화면에 그리는 과정