방학 불태우기 5

김민석·2021년 7월 26일
0

방학

목록 보기
5/16

컴파일러 parser

컴파일러는 원본 언어를 대상 언어로 번역하는 프로그램이다.

컴파일러는 번역 과정을 개념적으로 문법 분석과 코드 생성이라는 두 단계로 나뉜다.

문법 분석 부분에서 프로그램의 syntax나 structure를 결정하는데 이 과정을 parsing이라 한다.

parsing은 tokenize, lex, parse의 과정을 거쳐 트리 기반 데이터 구조를 생성한다.

tokenizer와 lexer

tokenizer와 lexer는 연속적으로 동작한다.
tokenizer는 입력받은 값을 알맞은 토큰 단위로 나누고 lexer는 나누어진 토큰들에 의미를 부여한다.
예를들어 html에 <div id="asd">와 같은 코드가 있다고 가정해 보자.
tokenizer를 통해 '<', 'div', 'id', '=', '"asd"', '>' 로 나눌 수 있고, lexer를 통해 각각 태그의 시작, 태그 종류, attribute의 name과 value, 태그 종료 로 나타낼 수 있다.
이렇게 토큰 단위로 나눈 후 의미를 부여하고 나서 parser가 동작하게 된다.

parser

parser는 의미가 부여된 토큰들을 가지고 트리 기반의 구조를 생성한다.
대부분의 인터프리터와 컴파일러에서는 소스코드를 구조적으로 나타내는 자료구조 AST를 사용한다.

AST(Abstract syntax tree)

AST는 프로그래밍 언어로 작성된 프로그램 소스코드를 각 의미별로 분리하여 컴퓨터가 쉽게 이해할 수 있는 구조로 나타낸 것을 의미한다.

참고 : https://talkingaboutme.tistory.com/entry/Study-Abstract-Syntax-Tree-AST
https://code-giraffe.tistory.com/44

DOM parser

DOM parser는 DOM Document 문서에 맞는 XML과 HTML 소스 코드를 해석할 수 있도록 해 준다.

브라우저는 서버에서 HTML을 받아와 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석한다.

해석된 문서는 브라우저 랜더링 엔진에 따라 브라우저에서 사용자가 볼 수 있도록 그려지게 되는 것이다.

HTML 문서 분석

HTML 다운로드가 완료되면 랜더링 엔진이 HTML 문서를 파싱하여 parse tree를 생성한다.
파싱은 위에서 설명한 것 처럼 어휘 분석을 통해 유효한 토큰들을 토크나이즈한 후 구문 규칙을 통해 문서 구조를 분석한다. 이 과정을 통해 html 태그를 토큰으로 파싱하여 parse tree를 생성한다.

그리고 나서 parse tree를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.

Document 재구성

parse tree를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.

참고 : https://pks2974.medium.com/website%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B2%8C-%EB%90%A0%EA%B9%8C-f1193c844480

웹 브라우저 개발자 도구

개발자도구는 말 그대로 개발자들이 사용하는 도구를 의미한다. 특히 프론트 엔드 개발에 도움이 된다.

확인하는 방법은 윈도우의 경우 F12를 맥북의 경우 commant+option+i를 눌러서 볼 수 있다. 단축키 사용 없이는 마우스 우클릭을 한 후 검사 항목을 클릭하면 된다.

Document 구조

document 구조는 elements 탭에서 볼 수 있다.
html과 css, 페이지의 레이아웃 등을 확인할 수 있다.

XPath

XPath란 XML Path Language를 의미한다.
XPath를 통해 XML 문서의 특정 요소나 속성에 접근하기 위한 경로를 지정할 수 있다.
추가적으로 XML DOM에서 노드를 검색할 때 역시 사용할 수 있다.
XPath의 구문 : Xpath=//tagname[@attribute='value]

  • //: 현재 노드 선택
  • tagname : 특정 노드의 태그 이름
  • @ : 속성
  • attribut : 속성 이름
  • value : 특성 값

XPath 지정 방식

XPath는 로케이션 패스에 의해 표현된다. 로케이션 패스란 트리구조의 특정 요소를 지정하기 위한 식을 의미한다.
로케이션 패스는 URL처럼 "/"를 이용해 요소를 연결하여 작성한다.

<html>
	<body>
    	<h1> 과일 </h1>
        <div>
        	<p> 사과 </p>
            <p> 키위 </p>
            <p> 파인애플 </p>
		</div>
	</body>
</html>

위와 같은 코드가 있다고 할 때 'h1 태그의 요소'를 얻어내는 것을 로케이션 패스를 이용하여 표시하면 다음과 같이 표현할 수 있다.
/html/body/h1
추가적으로 더 많고 다양한 문법들을 참고 링크에서 확인할 수 있다.
참고 : https://engineer-mole.tistory.com/162

XPath에서 요소 이름 명시하지 않는 경우

Xpath를 이용해 요소 식별이 불가능한 경우 XPath 축을 이용할 수 있다.
XPath 축이란 헌재 노드에 상대적인 노드 집합을 정의한 것으로 해당 트리의 노드와 관련된 노드를 찾는데 사용된다.
XPath 축에는 13개의 서로 다른 축이 존재한다.


사용 방법은 참고 링크에서 확인할 수 있다.
참고 : https://ko.myservername.com/xpath-axes-dynamic-xpath-selenium-webdriver
http://www.w3big.com/ko/xpath/xpath-axes.html

well-formed XML

well-formed xml은 문법에 맞는 xml 문서로, xml 문서로서 가져야 하는 최소한의 필수 요건을 충족한 xml 문서를 의미한다.
well-formed xml 문서가 되기 위한 필수 요건은 다음과 같다.

  1. 루트(root) 요소를 하나만 가져야 한다.
  2. 모든 XML 요소는 종료 태그를 가져야 한다.
  3. 시작 태그와 종료 태그에 사용된 태그 이름이 대소문자까지 완벽하게 일치해야 한다.
  4. 모든 XML 요소의 여닫는 순서가 반드시 정확하게 지켜져야 한다.
  5. 모든 속성의 속성값이 따옴표로 둘러싸여 있어야 한다.

형식 검증 방식

XML parser를 이용하여 xml 문서가 적합한 형식을 갖추고 있는지와 문법상의 오류는 없는지 검사할 수 있다.
대부분의 주요 웹 브라우저는 xml parser를 내장하고 있다.

그림과 같은 과정을 거쳐 형식을 검증할 수 있다.

참고 : http://www.tcpschool.com/xml/xml_basic_document

XML로 데이터 처리하는 이유

xml은 데이터를 텍스트 형태로 저장하기 때문에 소프트웨어, 하드웨어에 독립적으로 데이터를 저장, 전달 할 수 있다.
이를 통해 운영체제, 프로그램, 브라우저 등과 상관 없이 데이터를 안전하고 손쉽게 전달할 수 있다.
게다가 html의 데이터를 xml 파일로 따로 저장할 수 있다. 이를 통해 html 문서 내에서 불러온 데이터를 손쉽게 이용할 수 있다.
참고 : http://tcpschool.com/xml/xml_intro_purpose

JSON, XML 비교

xml과 json 모두 데이터를 저장하고 전달하기 위해 고안되었고, 계층적인 데이터 구조를 가지고 있으며 프로그래밍 언어에 의해 파싱될 수 있다는 공통점이 있다.

차이점으로는 Json은 종료 태그를 사용하지 않고, 구문 xml보다 짧으며 데이터를 좀 더 빠르게 읽고 쓸 수 있다.
또한 xml은 배열을 사용 못하지만 json은 배열을 사용할 수 있다.

참고 : http://tcpschool.com/json/json_intro_xml

각각의 장단점을 살펴보면 다음과 같다.

Json 장점/단점

장점

  • 모든 브라우저에 대한 지원 제공
  • 생성, 조작, 읽기, 쓰기 용이
  • 구문이 간단
  • 자바스크립트에서 기본적으로 인식됨
  • 직렬화 가능
  • 객체를 JSON으로 변환하여 서버로 보낼 수 있음

단점

  • 확장성 부족(네임 스페이스 부재)
  • 형식적 문법 정의를 지켜야함
  • 제한된 개발 도구

XML 장점/단점

장점

  • 시스템 및 애플리케이션 간 문서 전송 가능
  • 서로 다른 플랫폼 간 데이터 교환 가능
  • HTML에서 데이터 분리 가능
  • 플랫폼 변경 프로세스 단순화

단점

  • 처리 응용 프로그램 필요
  • 내장 데이터 유형 지원 없음
  • xml 구문이 중복됨

참고 : https://sujl95.tistory.com/59

더 알아보기

profile
김민석의 학습 정리 블로그

0개의 댓글