Parsing
code parser
the super tiny compiiler로 학습하고, 따로 포스팅함.
->The Super Tiny Compiler로 학습하기: 코드 컴파일의 원리
DOM parser
문자열 형태의 XML 또는 HTML 소스 코드를 DOM Document로 분석하고 구조화할 수 있는 기반을 제공한다.
DOMParser | mdn
HTML 문서를 분석하는 방식
참고) [Web] HTML 문서 파싱 & DOM 트리 생성 과정 알아보기
-
HTML의 파싱 : HTML은 문맥 자유 문법이 아니기 때문에, 정규 파서를 이용해 파싱할 수 없다.
-> 별도의 HTML 전용 파서가 필요하다. -
HTML 파서는 HTML 마크업을 파싱 트리로 변환한다. 이 파싱 트리를 이용해 DOM Tree가 생성된다.
-
HTML DTD(Document Type Definition) : HTML의 정의는 DTD 형식으로 표현된다. DTD를 통해 파서에 SGML 형태의 언어가 어떤 문서 타입에 해당하는지 알려준다.
( DTD 예시 :<!DOCTYPE html>)
+) 문맥 자유 문법이 아니라는 것은, 문서가 정확한 규칙에 맞는 상태가 아니어도 해석이 가능하다는 뜻이다. (즉, 어느 정도 코드 문법 오류가 있어도 이를 수용하고 알아서 처리하는 언어라는 뜻. )
문맥 자유 문법이 아닌 대표적인 예로 HTML을 들 수 있다. HTML은 비교적 유연한 문법을 가지고 있다. 표준 태그가 아닌 잘못된 태그를 사용하거나, 시작 또는 종료 태그를 생략하는 등의 문법 상 오류가 있어도, 오류 처리로 실행을 중단하는 것이 아니라 이를 알아서 수정해 올바르게 표시해준다.
DOMParser.parseFromString()을 사용
- string: HTML 또는 XML을 포함하는 문자열
- mimeType
- text/html : HTML parser를 호출하고, HTMLDocument를 반환
- text/xml: XML parser를 호출하고, XMLDocument를 반환
- application/xml: “
- application/xhtml+xml: “
- image/svg+xml: “
const htmlString = '<p>Hello World!</p>';
const mimeType = 'text/xml';
const domParser = new DOMParser();
domParser.parseFromString(htmlString, mimeType);DOM
- DOM(Document Object Model, 문서 객체 모델)은 HTML 문서에 작성된 문자열들을 브라우저에서 읽을 수 있도록 변환한 Object 객체 데이터를 말한다.
- DOM은 HTML 마크업과 일대일 대응되므로, HTML 문서에 작성된 모든 요소가 DOM으로 생성된다.
- HTML과 마찬가지로 DOM도 W3C에 의해 명세가 정해져 있다.
- DOM Tree를 생성했다면, 이제 CSS를 파싱한 스타일 시트 값과 연결해 실제로 화면에 그려질 정보인 Render Tree를 생성해야 한다.
Document를 재구성하는 방식
기본적으로 요청할 때마다 새로 받아옴.
+) 리액트 같은 경우에는 Virtual DOM을 사용하기 때문에 실제 변경된 부분만 실제 DOM에 DOM API를 호출하여 반영하게 된다.
브라우저가 변경 사항이 반영된 DOM과 CSSOM으로 새로운 Render Tree를 생성해서 화면을 다시 그린다.
XML parser
http://www.tcpschool.com/xml/xml_basic_document
well-formed XML
- 루트(root) 요소를 하나만 가져야 한다.
- 모든 XML 요소는 종료 태그를 가져야 한다.
- 시작 태그와 종료 태그에 사용된 태그 이름이 대소문자까지 완벽하게 일치해야 한다.
- 모든 XML 요소의 여닫는 순서가 반드시 정확하게 지켜져야 한다.
- 모든 속성의 속성값이 따옴표로 둘러싸여 있어야 한다.
XML 방식으로 데이터를 처리하는 이유
서로 호환되지 않는 데이터 타입을 사용하는 시스템 간의 데이터 교환에는 많은 시간과 노력이 발생한다.
또한, 이렇게 데이터를 변환하는 과정에서 데이터의 손실이 발생하는 경우도 종종 있다.
하지만 XML은 데이터를 텍스트 형식으로 저장하므로, 소프트웨어나 하드웨어에 독립적으로 데이터를 저장하고 전달할 수 있다.
따라서 XML을 사용하면 새로운 운영체제나 프로그램, 브라우저 등에 상관없이 데이터를 안전하고 손쉽게 전달할 수 있다.
XML vs Json
JSON과 XML의 차이점은 무엇인가요? | amazon
- 공통점
- 데이터 직렬화 형식이다. 표준화된 방식으로 다양한 애플리케이션, 플랫폼, 시스템 간에 데이터를 교환할 수 있다.
- 차이점
- XML은 트리 형태이고, JSON은 key-value 페어 형태이다.
- XML은 여러 데이터 유형을 여러 변수와 함께 저장하려는 경우에 적합하다.
- JSON은 데이터 교환을 목적으로 설계되어, 성능과 통신 속도가 향상된다.
- JSON은 API, 모바일 앱 및 데이터 스토리지에 더 적합, XML은 데이터 교환이 필요한 복잡한 문서 구조에 더 적합.
정규표현식 (Regex)
| 표현식 | 의미 |
|---|---|
| ^x | 문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다. |
| x$ | 문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다. |
| .x | 임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다. |
| x+ | 반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다. |
| x? | 존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다. |
| x* | 반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다. |
| x | y |
| (x) | 그룹을 표현하며 x 를 그룹으로 처리함을 의미한다. |
| (x)(y) | 그룹들의 집합을 표현하며 앞에서 부터 순서대로 번호를 부여하여 관리하고 x, y 는 각 그룹의 데이터로 관리된다. |
| (x)(?:y) | 그룹들의 집합에 대한 예외를 표현하며 그룹 집합으로 관리되지 않음을 의미한다. |
| x{n} | 반복을 표현하며 x 문자가 n번 반복됨을 의미한다. |
| x{n,} | 반복을 표현하며 x 문자가 n번 이상 반복됨을 의미한다. |
| x{n,m} | 반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미한다. |
| 표현식 | 의미 |
|---|---|
| [xy] | 문자 선택을 표현하며 x 와 y 중에 하나를 의미한다. |
| [^xy] | not 을 표현하며 x 및 y 를 제외한 문자를 의미한다. |
| [x-z] | range를 표현하며 x ~ z 사이의 문자를 의미한다. |
| \^ | escape 를 표현하며 ^ 를 문자로 사용함을 의미한다. |
| \b | word boundary를 표현하며 문자와 공백사이의 문자를 의미한다. |
| \B | non word boundary를 표현하며 문자와 공백사이가 아닌 문자를 의미한다. |
| \d | digit 를 표현하며 숫자를 의미한다. |
| \D | non digit 를 표현하며 숫자가 아닌 것을 의미한다. |
| \s | space 를 표현하며 공백 문자를 의미한다. |
| \S | non space를 표현하며 공백 문자가 아닌 것을 의미한다. |
| \t | tab 을 표현하며 탭 문자를 의미한다. |
| \v | vertical tab을 표현하며 수직 탭(?) 문자를 의미한다. |
| \w | word 를 표현하며 알파벳 + 숫자 + _ 중의 한 문자임을 의미한다. |
| \W | non word를 표현하며 알파벳 + 숫자 + _ 가 아닌 문자를 의미한다. |
| Flag | 의미 |
|---|---|
| g | Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미한다. |
| i | Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자를 식별하지 않는 것을 의미한다. |
| m | Multi line을 표현하며 대상 문자열이 다중 라인의 문자열인 경우에도 검색하는 것을 의미한다. |
