[week4_SOHYUN] 4주차 퀴즈

[Sohyunnnn]

Q1.

다음 코드 실행 시 일어나는 순서를 올바르게 나열하시오.

const title = document.querySelector('h1');
title.textContent = 'Hello DOM';

1. 렌더링 엔진이 DOM 트리 내부에서 <h1> 요소 탐색
2. JS 엔진이 document.querySelector 호출
3. 렌더링 엔진이 Host Object 형태로 결과 반환
4. JS 엔진이 반환받은 객체의 textContent 변경
5. 렌더링 엔진이 DOM 변경사항을 반영 (Reflow → Repaint)

Q2.

다음 중 올바른 설명을 모두 고르시오.

A. 렌더링 엔진은 HTML/CSS를 파싱해 DOM과 CSSOM을 생성한다.

B. 자바스크립트 엔진은 렌더링 엔진 내부에 포함되어 동작한다.

C. 두 엔진은 Web API를 통해 데이터를 교환한다.

D. 자바스크립트 엔진이 DOM 트리를 직접 조작한다.

Q3.

브라우저의 구조를 구성 요소별로 올바르게 연결하시오.

구성 요소	역할
A. 렌더링 엔진	(a) JS 코드 실행, Web API 호출
B. 자바스크립트 엔진	(b) HTML/CSS 파싱 → DOM, CSSOM 트리 생성
C. 브라우저 엔진	(c) UI와 렌더링 엔진 사이에서 명령 조율

Q4.

OX퀴즈 틀린 경우 올바르게 수정하시오.

1. 렌더링 엔진과 자바스크립트 엔진은 하나의 동일한 엔진 안에서 동작한다.
2. Web API는 ECMAScript 명세에 포함된 기능이다.
3. window 객체는 브라우저가 전역 실행 컨텍스트를 생성할 때 주입된다.
4. document 객체는 브라우저가 제공한 Host Object이다.

[sonnnnhe]

Q1.

2 -> 1 -> 3 -> 4 -> 5

---

Q2.

A. O
B. X - 서로 다른 별개의 엔진일 뿐 종속 관계가 아니다.
C. O
D. X - DOM 트리를 관리하는 것은 렌더링 엔진이다.

---

Q3.

A - (b) / B - (a) / C - (c)

---

Q4.

1. X - 렌더링 엔진과 자바스크립트 엔진은 별개의 독립적인 엔진이다.
2. X - Web API는 호스트 환경이 제공하는 기능이다.
3. X - window 객체는 자바스크립트 엔진이 전역 실행 컨텍스트를 생성할 때 브라우저에 의해 주입된다.
4. O

[mimizae]

Q1.

const title = document.querySelector('h1');
title.textContent = 'Hello DOM';

• 순서: 2 → 1 → 3 → 4 → 5

Q2.

A. 렌더링 엔진은 HTML/CSS를 파싱해 DOM과 CSSOM을 생성한다. -> O

B. 자바스크립트 엔진은 렌더링 엔진 내부에 포함되어 동작한다. -> X

• 두 엔진은 독립적이며, 브라우저 엔진에 의해 통합된다.

C. 두 엔진은 Web API를 통해 데이터를 교환한다. -> O

D. 자바스크립트 엔진이 DOM 트리를 직접 조작한다. -> X

• JS 엔진은 DOM을 직접 조작하지 못하고, Web API(DOM API) 호출을 통해 렌더링 엔진에게 조작을 요청한다.

Q3.

A. 렌더링 엔진 -> (b) HTML/CSS 파싱 -> DOM, CSSOM 트리 생성

B. 자바스크립트 엔진 -> (a) JS 코드 실행, Web API 호출

C. 브라우저 엔진 -> (c) UI와 렌더링 엔진 사이에서 명령 조율

Q4.

• 렌더링 엔진과 자바스크립트 엔진은 하나의 동일한 엔진 안에서 동작한다. (X)
  -> 렌더링 엔진과 자바스크립트 엔진은 서로 다른 엔진으로, Web API를 통해 연결된다.

• Web API는 ECMAScript 명세에 포함된 기능이다. (X)
  -> Web API는 브라우저가 제공하는 기능으로, ECMAScript 표준에는 포함되지 않는다.

• window 객체는 브라우저가 전역 실행 컨텍스트를 생성할 때 주입된다. (O)

• document 객체는 브라우저가 제공한 Host Object이다. (O)

[jstar000]

Q1.

2 -> 1 -> 3 -> 4 -> 5

• `document.querySelector('h1')은 JS 엔진의 기능 X, DOM API이므로 렌더링 엔진이 처리

• 노드 검색 결과도 ECMAScript 객체가 아니므로 Host Object 형태로 반환됨

• JS의 Host Object 조작 -> DOM 상태 변경
• 레이아웃 변화에 따라 Reflow/Repaint 발생

Q2.

A. (O): 렌더링 엔진은 HTML, CSS 코드를 파싱해 DOM과 CSSOM을 생성하고, 둘이 합쳐져 렌더 트리가 생성된다
B. (X): 자바스크립트 엔진과 렌더링 엔진은 별도의 엔진이다.
C. (X): JS 엔진과 렌더링 엔진은 Web API로 데이터를 직접 주고받는 것 X, Web API는 JS가 렌더링 엔진의 기능을 호출하는 방법, 두 엔진이 Web API를 통해 데이터 자체를 교환하지는 않는다.
D. (X): 자바스크립트 엔진은 DOM API를 호출하고, 렌더링 엔진이 호출대로 DOM 트리를 manipulate한다.

Q3.

A - (b)
B - (a)
C - (c)

Q4.

1. (X), 렌더링 엔진과 자바스크립트 엔진은 브라우저를 구성하는 독립적인 컴포넌트이며, 둘은 별도의 엔진이다. 두 엔진은 분리되어 있으며, DOM API 호출 시 제어권을 주고받으며 상호작용한다.
2. (X), ECMAScript 명세는 Web API를 포함하지 않는다. ECMAScript 명세는 JavaScript 언에 자체의 문법, 타입, 내장 객체 등에 대한 명세이다.
3. (O), 전역 실행 컨텍스트 생성 과정에서 window 객체가 전역 객체로 설정되고 접근 가능해진다.
4. (O), document 객체는 ECMAScript 명세에 정의되지 않았으며(Native Object가 아님), 브라우저(호스트 환경)가 DOM Interface를 바탕으로 C++로 구현해 제공한다. window.document와 같이 window 전역 객체에 바인딩돼 자바스크립트로 접근 가능하다.

[eunkr82]

Q1.

2 -> 1 -> 3 -> 4 -> 5

• JS 엔진이 첫 줄을 질행하며 함수를 호출한다.
• 렌더링 엔진이 DOM 트리 내부에서 h1 요소를 탐색한다.
• 렌더링 엔진이 Host Object 형태로 결과를 반환한다.
• JS엔진이 반환받은 객체의 textContent를 변경한다.
• 렌더링 엔진이 DOM 변경사항을 반영해 레이아웃을 구성하고 페인팅한다.

Q2.

A, C

Q3.

브라우저의 구조를 구성 요소별로 올바르게 연결하시오.

A -> (b)
B -> (a)
C -> (c)

Q4.

OX퀴즈 틀린 경우 올바르게 수정하시오.

1. 렌더링 엔진과 자바스크립트 엔진은 하나의 동일한 엔진 안에서 동작한다.
2. Web API는 ECMAScript 명세에 포함된 기능이다.
3. window 객체는 브라우저가 전역 실행 컨텍스트를 생성할 때 주입된다.
4. document 객체는 브라우저가 제공한 Host Object이다.

1. X
   렌더링 엔진과 JS 엔진은 다른 역할을 하는 별개의 엔진이다. 렌더링 엔진은 HTML과 CSS 파싱을 통해 DOM, CSSOM을 생성하고, 레이아웃과 페인트의 역할을 담당한다. JS 엔진은 script (JS 코드)를 실행하는 역할을 한다.

2. X
   Web API는 브라우저라는 호스트 환경에서 제공하는 기능이고, ECMAScript는 언어 자체에 대한 스펙이다.

[Tnalxmsk]

Q1.

2 → 1 → 3 → 4→ 5

Q2.

A, C - O

B, D - X

Q3.

A - (b)

B - (a)

C - (c)

Q4.

1 - x: 렌더링 엔진과 자바스크립트 엔진은 서로 독립된 엔진으로 Web API를 통해 상호작용한다.

2 - x: WebAPI는 브라우저가 제공. ECMAScript는 자바스크립트 자체에 대한 명세이다.

3 - o

4 - o

[qowjdals23]

Q1.

2 -> 1 -> 3 -> 4 -> 5

---

Q2.

정답: A, C

• B (X)
  자바스크립트 엔진은 렌더링 엔진 “내부”에 포함되지 않는다.
  서로 독립된 엔진이며 브라우저가 두 엔진을 함께 운용한다.

• D (X)
  자바스크립트 엔진은 DOM 트리를 직접 조작하지 않는다.
  DOM 조작은 Web API(브라우저 측)의 영역이다.

---

Q3.

A - (b)
B - (a)
C - (c)

---

Q4.

1. X
   → 두 엔진은 서로 다른 엔진이며, 브라우저가 둘을 함께 운용한다

2. X
   → Web API는 ECMAScript가 아니라 브라우저(Host Environment)가 제공하는 기능이다.

3. O

4. O

[Sohyunnnn]

https://peach-shadow-378.notion.site/4-2afd94ad82bb80aab47ef38b1bb69dfb?source=copy_link