동기 비동기,DOM,NODE(20220110)

홍륜건·2022년 1월 10일

동기와 비동기

동기는 응답이 올때까지 대기한다. 순차적으로 실행한다.

비동기는 요청을 보냈을때 응답과 상관없이 다음동작을 실행

비동기적 처리의 예

Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 하는 경우
파일 읽기 : 서버에서 파일을 읽어야 하는 경우
암호화/복호화 : 바로 처리 되지 않고, 시간이 어느정도 걸리는 경우
작업 예약 : setTimeout을 사용하여 비동기 처리하는 경우

DOM

문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스. 이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공함.

DOM 요소의 선택

자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야한다.

태그 이름(tag name)을 이용한 선택
아이디(id)를 이용한 선택
클래스(class)를 이용한 선택
CSS 선택자(selector)를 이용한 선택
HTML 객체 집합(object collection)을 이용한 선택

노드(node)

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.
HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장. 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드의 종류

W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드이다.

문서 노드(document node) - HTML 문서 전체를 나타내는 노드임.

요소 노드(element node) - 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임.

속성 노드(attribute node) - 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.

텍스트 노드(text node) - HTML 문서의 모든 텍스트는 텍스트 노드임.
주석 노드(comment node)

HTML 문서의 모든 주석은 주석 노드임.

노드 간의 관계

노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재합니다.

루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가집니다.

모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.

형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킵니다.

조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.

자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.

노드와 태그는 다른 것이다.
노드는 DOM의 요소 1개를 말하고, 태그는 HTML페이지의 태그 요소 1개를 말한다. 노드는 태그일 수도 있고, 태그가 아닐 수 도 있다.

웹브라우저 실행과정

HTML문서를 웹브라우저가 읽어들일때, 먼저 HTML파일을 읽어 문서 구조를 트리형태로 된 데이터 구조로 만든다.
이것을 DOM이라고 부른다. DOM이 완성되고 나서야 JavaScript같은 프로그래밍언어가 DOM을 제어할 수 있다. DOM과 마찬가지로 CSS를 읽어 들여 CSSOM을 생성한다.
DOM과 CSSOM을 조합하여 최종적으로 렌더트리를 만든다.
렌더트리를 기초로 화면에 HTML페이지를 그리고, 컨텐츠 파일들을 비동기로 읽어서 맞는 위치에 배치한다.