XML이란?
웹에서 데이터를 전송하기 위해 미리 약속해둔 방식으로 만들어진 문서를 말한다. 줄임말은 eXtensible Markup Language 이며 우리말로 하자면 확장 가능한 마크업 언어이다.
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>XML의 기본 생김새이다. 다들 자주 봤을 구조로 자세한 설명은 생략하도록 한다.
JSON이란?
JSON(제이슨, JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.
tokenizer란?
말그대로 토큰화해주는 것이다.
Jim Henson was a puppeteer라는 문장이 있다면, 단어 기반 토큰화는
'Jim' , 'Henson', 'was', 'a', 'puppeteer'라는 다섯개의 토큰으로 나눌 수 있다. JS에선 split() 메서드로 비슷한 역할을 수행할 수 있을 것 같다.
lexer란?
Lexer는 Tokenizer에 의해 쪼갠 토큰의 의미를 분석한다.
보통 Tokenizer + Lexer의 두가지 역할을 합해 Lexcial analyze라고 한다.
Lexical Analyze는 의미 있는 조각을 검출하여 토큰을 생성하는 것을 말한다.
예를 들어, htmldㅔ
라는 코드가 있다면, tokenizer를 통해 <, h2, =, footer, >로 나눌 수 있고, lexer를 통해 각각 태그의 시작, 태그 종류, attribute name, value, 태그 종료로 나타낼 수 있다.
이렇게 토큰 단위로 나눈 후 의미를 부여한 후에 parser가 동작하게 된다.
Parser란?
Parser는 Lexical analyze되어 tokenize 된 데이터를 가지고, 구조적으로 나타낸다.
그리고 데이터를 구조적으로 바꾸는 과정에서, 데이터가 올바른지 검증하는 역할도 수행한다.
이 Parser에 의해 도출된 결과가 AST의 모습을 보인다.
AST란?
AST는 Abstract Syntax Tree의 약자로,
프로그래밍 언어로 쓰여진 소스코드의 Abstract Syntatic 구조를 표현하기 위해 사용되는 자료구조이다.
쉽게 말하면, 특정 프로그래밍 언어로 작성된 프로그램 소스를
각각 의미별로 분리한 컴퓨터가 이해할 수 있는 구조로 변경시킨 트리이다.
DOM (문서 객체 모델)이란?
- 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스.
- 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.
DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까?
DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 하다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.
대략적인 DOM 구조
Document 노드가 DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다.
밑으로는 element 노드가 오며, text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있다.
document node
HTML 문서 전체를 나타내는 노드. window 객체의 document 프로퍼티로 바인딩 되어있어 window.document로 참조해 사용할 수 있다. HTML 문서에 이 문서 노드는 단 1개만 존재한다.
element node
모든 HTML 요소(body, h2, div 등)는 이 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드로써, 부모-자식 관계를 가져 계층적 구조를 이룰 수 있다.
attribute node
모든 HTML 요소의 속성은 이 속성 노드다. 요소 노드에 대한 정보를 가지고 있고, 부모 노드가 아닌 해당 노드와 바인딩 되어 있다.
text node
HTML 문서의 모든 텍스트는 이 텍스트 노드다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기에 리프 노드라고 불리기도 한다.
이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 된다. 데이터 검색하기가 빠른 구조기에 접근하고 조작하여 업데이트를 하는 속도는 빠른 편이다.
JavaScript DOM
자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중 가장 유명하다. 웹페이지를 만들 때 DOM을 거의 무적권 사용하다보니 같은 개념 아니냐 하는데,
JS와 DOM은 엄밀히 다른 개념이며, 꼭 자바스크립트로만 DOM을 다룰 수 있는 것도 아니다.
DOM이 자바스크립트(JavaScript)라는 오해의 원인
현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐이기 때문이다. 브라우저는 과거 HTML 문서로만 이루어진 웹 페이지를 출력하기만 했고, 그것만으로도 충분했다. 그러나 점점 시간이 흐르며 동적인 기능을 요구하기 시작했고, HTML 문서 만으로는 이 기능을 제공하기 불가능 해졌다.
DOM의 데이터타입(Datatype)
먼저 DOM 객체의 구성 요소부터 알아보자.
- 프로퍼티(property) : DOM 객체의 멤버 변수이다. HTML 태그의 속성을 반영한다.
- 메소드(method) : DOM 객체의 멤버 함수이다. HTML 태그를 제어한다.
- 컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열이다. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가진다.
- 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가진다.
- 스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능하다.
데이터 타입은 객체이기 때문에 각각 프로퍼티와 메소드를 가지고 있다.
