[ 엘리스 SW 엔지니어 트랙 ] 11일차(3주차: 자바스크립트 II - DOM, event, this, closure)

📍 11일 차 11.9. 화. (실시간 강의)

오늘은 오랜만에 비가 내려서 새벽 러닝을 하지 못했고 날씨도 급격하게 추워졌다. 벌써 11월이라니.. 2021년 올해도 벌써 1달 조금 넘게밖에 남지 않았다. 내년 2월까지 최선을 다하자..! 저번 시간에 JS I을 통해 자기소개 홈페이지를 만들었고, 이번주는 진도를 더 나가서 JS II를 배우게된다. DOM, Event, this, closure 등에 대해서 배우는데 이번 주차는 어려운 파트기 때문에 복습을 더 열심히 해야겠다는 생각을 했다.

 

---

❏ 저번주 복습

1. indexOf(target): target이 index 몇 번째에 위치해있는지 반환하는 메서드(없으면 -1 반환)
2. 함수에 return 값이 없으면 js엔진이 undefined를 리턴한다. (여담으로 JS엔진이 undefined를 반환하는 경우는 3가지가 있는데 변수에 값을 할당하지 않은 경우, 객체 프로퍼티에 값이 없는 경우, 함수에 리턴값이 없는 경우이다.)

❏ 브라우저의 렌더링 과정

1. 브라우저는 HTML, CSS, JS, img, font 등 렌더링에 필요한 리소스를 요청하고, 서버로부터 응답을 받는다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
3. 브라우저의 JS 엔진은 서버로부터 응답된 JS를 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행한다. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된다.
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고(리플로우), 브라우저 화면에 HTML 요소를 페인팅한다.(리페인팅)

❏ DOM을 파싱하는 과정

1. 위 브라우저의 렌더링 과정에서 2번 과정을 조금 더 자세하게 설명하자면 브라우저의 요청에 의해 서버가 응답한 HTML 코드만으로는 브라우저가 이해할 수 없다. 따라서 일련의 과정을 거쳐 브라우저가 이해할 수 있도록 바꿔줘야 하는데 바이트 -> 문자 -> 토큰 -> 노드 -> DOM의 과정을 거친다.
2. 바이트(byte): HTML 파일이 브라우저 요청에 의해 응답되는데, 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음, 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답한다.
3. 문자: 2진수 형태의 HTML 문서는 <meta charset="UTF-8">코드에 의해 문자열로 변환된다.
4. 토큰(token): 문자열로 변환된 HTML 문서를 읽어 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)으로 분해한다.
5. 노드(node): 각 토큰들을 객체로 변환하여 node를 생성한다. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성된다. 노드는 이후 DOM을 구성하는 기본 요소가 된다.
6. DOM: HTML 요소는 중첩 관계를 갖는데, 이러한 HTML 요소간의 부자관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이 노드들로 구성된 트리 자료구조를 DOM(Document Object Model)이라 부른다. 즉, DOM은 HTML 문서를 파싱 한 결과물이다. 이 DOM 형태가 되어야 js 언어로 객체 형태에 접근이 가능하다.

728x90

❏ DOM(Document Object Model)

1. HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메소드를 제공하는 트리 자료구조다.
2. HTML element: HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. 예를 들어 <div class="greeting">Hello</div>와 같은 코드에서 class는 어트리뷰트 값(attribute value)이고 어트리뷰트 노드로 변환된다. Hello는 콘텐츠(contents)를 뜻하며 텍스트 콘텐츠는 텍스트 노드로 변환된다.

❏ 요소 노드 취득

1. HTML 요소 노드를 가져오고 싶을 땐 다음의 4가지 방법을 이용하자.
2. Document.prototype.getElementById("id"): 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다. 이때 문서 노드인 document를 통해 호출하자. class 어트리뷰트와는 달리 동일한 id 태그 여러개가 겹쳐도 제일 처음의 노드 1개만 반환한다.
3. Document.prototype.getElementsByTagName("Tag"): 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. 이때 여러 개의 요소 노드 객체를 갖는 HTMLCollection 객체를 반환한다. HTMLCollection은 유사배열개체이며, 이 터러블 하다.
4. Document.prototype.getElementsByClassName("class"): 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다. getElementsByTagName 메서드와 마찬가지로 HTMLCollection객체를 반환한다.
5. Document.prototype.querySelector: 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.
6. Document.prototype.querySelectorAll: 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다. getElement 메서드와는 다르게 NodeList 객체를 반환하는데 유사 배열 개체이며, 이 터러블 하다.
7. CSS 선택자 문법을 사용하는 querySelector, querySelectorAll 메서드는 getElementsBy*~보다 다소 느리지만 CSS 선택자 문법을 사용하여 좀 더 구체적인 조건으로 요소 노드를 취득할 수 있고, 일관된 방식으로 요소 노드를 취득할 수 있는 장점이 있다. 따라서 id 어트리뷰트가 있는 요소 노드를 취득할 때는 getElementById 메서드를 사용하고 그 외의 경우 querySelector, querySelectorAll 메서드 사용을 권장한다.
8. 앞서 4번과 7번에서 등장한 HTMLCollection와 NodeList의 차이점은 다음에 알아보자.

❏ 자식 노드 탐색

1. Node.prototype.childNodes: 자식 노드를 모두 탐색하여 NodeList에 담아 반환한다. childNodes 프로퍼티가 반환한 NodeList에는 요소 노드뿐 아니라 텍스트 노드도 포함되어 있다.
2. Element.prototype.children: 자식 노드 중 요소 노드만 탐색하여 HTMLCollection에 담아 반환한다. 텍스트 노드가 포함되지 않는다.

❏ event

1. event는 내일 이론 강의 수강 이후 작성하겠다.

reference

1. 모던 자바스크립트 딥 다이브