🔶 JavaScript
- 파싱이란 무엇인가?
: 문자열로 된 문서 파일을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조인 파스 트리를 생성하는 과정
- 파싱의 결과물인 파스 트리에는 무엇이 있는가?
: HTML 문서를 파싱한 DOM
: CSS 파일을 파싱한 CSSOM
: 자바스크립트 파일을 파싱한 AST
- 렌더링이란 무엇인가?
: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 구현하는 것
- 브라우저는 어떤 과정을 거쳐 렌더링하는가?
(1) 먼저 서버로부터 렌더링에 필요한 리소스 파일을 요청하고, 응답을 받음
(2) 렌더링 엔진이 HTML과 CSS를 파싱하여 DOM과 CSSOM 생성, 이를 결합하여 렌더 트리 구축
(3) 구축한 렌더 트리를 바탕으로 레이아웃을 계산하는 리플로우, 화면에 페인팅하는 리페인트 과정 거침
- 리플로우는 보통 어떤 경우에 발생하는가?
: 레이아웃을 변경하거나, CSS 구조 상에서 영향을 주는 경우
- 리플로우는 왜 중요하고, 어떻게 처리해야 하는가?
: 리플로우가 많이 발생할수록 렌더 트리를 다시 구축해야 하는 횟수가 많아지기 때문에 그만큼 성능이 저하됨, 따라서 리플로우를 최소화할 필요가 있음
- DNS는 무엇이고, 어떤 역할을 하는가?
: DNS는 도메인 네임 시스템의 줄임말, IP 주소를 사용자가 알기 쉽게 변환해놓은 도메인을 다시 IP 주소로 변환하는 역할을 함
- 렌더링 엔진이 HTML을 파싱하는 중에
img,link,script를 만나면 어떻게 되는가?: 파싱을 일시적으로 중단하고 각각의 리소스 파일을 요청하여 받아옴
: 받아온 파일이 CSS라면 CSSOM 트리 구축, 자바스크립트 파일이라면 자바스크립트 엔진에게 제어권을 넘겨서 파싱 후 실행
: 파일의 로드가 끝나면 다시 렌더링 엔진으로 제어권이 넘어오고, 마저 파싱을 진행함
async와defer는 무엇이고, 어떤 차이가 있는가?: 외부에서
script태그를 통해 다운로드 받아오는 자바스크립트 파일의 경우,async,defer어트리뷰트를 사용하여 HTML 파싱과 동시에 자바스크립트 파일을 로드할 수 있음
:async의 경우 파일 다운로드는 파싱과 동시에 진행되지만, 자바스크립트 파일의 다운로드가 끝나는 대로 실행해버리기 때문에 여전히 HTML 파싱이 블로킹되는 문제가 발생함
:defer는 파일 다운로드가 파싱과 동시에 진행되고, DOM tree의 생성이 완료되고 나서 자바스크립트 파일이 실행되기 때문에 HTML 파싱을 블로킹하지 않아서 페이지 로딩의 지연이 발생하지 않음
- HTTP 1.1과 HTTP 2.0의 가장 큰 차이는 무엇인가?
: HTTP 1.1은 한 번에 리소스 요청과 응답을 하나씩만 할 수 있었지만, HTTP 2.0은 한 번에 리소스 요청과 응답을 여러 개씩 할 수 있음
- DOM은 무엇인가?
: 좁은 의미에서의 DOM은 HTML 문서를 파싱한 결과물 DOM tree를 의미하지만, 넓은 의미에서의 DOM은 호스트 객체인 DOM이 제공하는 프로퍼티와 메서드, 즉 DOM API까지 포함하는 개념
- DOM이 중요한 이유는 무엇인가?
: HTML 문서의 계층적 구초와 정보를 표현할 뿐만 아니라, 자바스크립트를 토대로 HTML의 구조와 내용, 또는 스타일을 동적으로 조작 및 변경하기 위해서 잘 알고 있어야 함
- DOM tree는 어떤 구조로 이루어져 있는가?
: HTML의 각 요소에 대응하여 트리를 이루는 노드 객체를 토대로 요소의 중첩 구조에 따라 트리 형태의 자료구조로 이루어져 있음
- DOM 노드의 종류에는 무엇이 있고, 각각 어떤 특징이 있는가?
: 문서 노드는 DOM tree의 최상단에 위치하는 루트 노드로서
document객체를 가리킴
: 요소 노드는 각각의 HTML 요소를 가리키는 객체, 문서의 구조를 표현하는 역할
: 어트리뷰트 노드는 HTML 요소의 어트리뷰트(속성)을 가리키는 객체, 요소 노드에만 연결되어 있고 문서 노드와는 연결되어 있지 않기 때문에 요소 노드와 형제 노드라고 볼 수 없음
: 텍스트 노드는 HTML 요소의 텍스트를 가리키므로 문서의 정보를 표현하는 역할, DOM tree의 최종단에 위치하는 리프 노드
- DOM 요소에 접근할 때는 어떤 메서드를 사용하는 것이 바람직한가?
:
Id가 있는 1개의 요소에 접근한다면getElementById
: 1개의 요소이고Id를 가지지 않는다면 무조건querySelector
: 복수의 요소에 접근하는 경우 무조건querySelectorAll
: 성능 상으로는 CSS 선택자를 인수로 전달하려면 파싱 과정이 필요하기 때문에querySelector가 좀 더 느리지만, live 객체와 관련하여 발생할 수 있는 이슈들 때문에querySelector를 사용하는 것이 바람직함
- 공백 텍스트 노드란 무엇인가?
: HTML을 파싱하는 경우 공백 문자(줄 바꿈 등)이 파싱되어 요소 노드의 자식 노드로서 추가된 것
- 공백 텍스트 노드로 인한 오류를 방지하기 위해서는 어떻게 해야 하는가?
: 텍스트 노드와 요소 노드를 함께 취득하지 않는, 즉 요소 노드만 취득하는 메서드를 사용해야 함
ex)nextElementSibling,childern등
- HTML 어트리뷰트와 DOM 프로퍼티의 차이는 무엇인가?
: HTML 어트리뷰트는 HTML 문서 작성 시 초기에 입력해놓은 어트리뷰트 값,
getAttribute로 취득하고,setAttribute로 변경할 수 있음, 초기 값이기 때문에 리로드하면 HTML 어트리뷰트에 저장된 값으로 변경됨
: DOM 프로퍼티는 사용자의 입력에 따라 변화하는 어트리뷰트 값,value프로퍼티로 취득하고 변경할 수 있음, 즉 최신 상태 값
