XML 파서

 

브라우저는 사용자가 선택한 자원을 서버에 요청하여 표시한다. 그런데 이 자원들은 html,pdf,image 등등 다양한 형태이다.

즉, 브라우저는 해당 HTML과 CSS 명세 등에 의해서 파일을 해석해서 표시해야한다.

 

그리고 이

명세 는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해지게 된다.

 

 

예전 브라우저들은 일부만 명세를 따르고 독자적 방법으로 확장했기 때문에 호환성 문제가 심각했다… 이처럼 표준 명세를 따르는건 아주아주 중요한 일이다.

 

 

그렇다면 DOM이란 무엇일까

 

 

💡 DOM

Document Object Mode (문서 객체 모델)

 

웹 브라우저가 html을 트리구조로 이해하는 모델이라고 생각할 수 있다.

 

브라우저는 문서를 가지고 어휘분석 ⇒ 구문분석 과정을 거친다. 이 과정이 파싱이다.

 

파싱을 거치면서 구문 규칙과 일치하는지 확인하고, 그렇지 않으면 오류를 내보낸다. 이런 부분은 문법이 어렵고 최적하하기 어렵지만, 파서 생성기를 활용하면 head태그를 빠뜨려도 만들어주는 등의 기능을 얻을 수 있다.

 

중요한건, 파싱과정을 거치면서 서버로부터 받은 문서를 브라우저가 이해하기 쉬운 형태인 DOM 트리구조로 변환시켜준다는 것이다.

 

변환한 이 문서를 렌더링하여 우리는 화면을 볼 수 있는것이다.

 

 

 

 

파싱은 아래의 과정 처럼 tokenizer -> lexer -> parse 과정을 통해 이루어지게 된다.

 

 

💡 tokenizer

의미 있는 단위로 문자열을 쪼갬

 

 

결국 우리가 받는 데이터는 하나의 String 형태로 길게 늘어져서 가져온다. “안녕하세요 여러분”을 “안,녕,하,세,요”만 보면 의미를 알 수 없듯이 “안녕하세요”, “여러분” 으로 의미있는 단위가 되도록 나누는 것이다.

 

 

💡 lexer

각각의 데이터에 의미를 부여

 

예를 들었지만 우리는 “안녕하세요”,”여러분” 을 분리했다. 해당 부분이 의미를 가진다는걸 알지만 우리는 그 뜻이 정확히 무엇인지는 모르기에 해당 의미를 정의할 필요가 있다.

 

예를 들어 안녕하세요는 인삿말이며, 여러분은 지칭하는 용어다 즉, 이들의 타입이나 값을 정리해서 같은 형태의 정보로 가공하는 역할이라고 생각했다.

 

 

💡 parse

가공된 데이터의 부모,자식 관계를 파악하여 하나의 트리구조로 구현하는것을 의미한다.

 

 

 

 

 

개발자 도구를 활용하면 XPath를 손쉽게 지정할 수 있다.

 

 

💡 XPath

XML Path Language (W3C 표준)

 

 

확장 생성 언어 문서의 구조를 통해 경로 위의 지정한 구문을 사용해 배치하고 처리하는 방법

쉽게 설명하면, HTML,XML상의 요소의 위치값이다.

 

개발자도구 열기 ⇒ 아래 이미지 부분 클릭 ⇒ 자신이 원하는 요소 클릭

 

이미지 부분

 

 

⇒ 개발자 도구 상에서 요소의 값이 위체 포커싱

⇒ 포커싱된 부분의 값을 복사

 

 

위 방법을 통해 굉장히 쉽게 Xpath값을 가져올 수 있다. 하지만 Xpath는 요소의 위치를 기반하기 때문에 페이지 UI가 변경되는것에 의해 값이 변할 수 있다. 따라서 유일한 id,name,css선택자 등을 선택하는것도 권장된다고 한다.

 

 

 

 

또한 데이터를 표현할때 XML방식이 아닌, JSON방식또한 있는데 두 방식의 차이점은 무엇일까?

 

🐬 XML

  ✅ HTML과 매우 비슷한 문자 기반의 마크업

  ✅ 사람과 기계가 동시에 읽기 편하다.

  ✅ 데이터를 보여주는 목적이 아닌, 저장하고 전달하는것이 목적

  ✅ 종료 태그를 사용하며, 구문 길이가 길다.

  ✅안정성이 높은 편이며, 다양한 인코딩 형식을 지원한다.

  ✅ 읽기/쓰기 속도는 느린 편이다.

  ✅ 서로 다른 플랫폼 간 데이터 교환이 가능하다.

  ✅ 플랫 폼 변경 프로세스를 단순화한다.

🐬 JSON

  ✅ 브라우저 통신을 위한 속성-값 또는 키-값 쌍으로 이루어진 데이터 포맷

  ✅ 기계 뿐 아니라 사람도 읽기 편하다.

  ✅ 다양한 언어에 의해 파싱될 수 있다.

  ✅ 읽기/쓰기 속도가 빠르다.

  ✅ 안정성이 비교적 낮으며 UTF-8인코딩을 지원한다.

  ✅ javascrript 표준함수로 파싱이 가능하다.

  ✅ 메모리공간이 적으며 사용하기 쉽다.

  ✅ 자바스크립트의 모든 객체를 JSON으로 변환하여 서버로 보낼 수 있다.