[프로그래밍 일반] 한 권으로 읽는 컴퓨터 구조와 프로그래밍_ch9 웹 브라우저

 

웹 브라우저는 그 자체가 가상 머신으로, 인터프리터에 속한다.

 

- 마크업 언어

마크업 언어는 본문text과 구분할 수 있는 마크를 추가할 수 있는 시스템이다.
IBM은 GML(generalized Markup Language)이라는 마크업 언어를 만들었고,
이들의 작업을 확장해 SGML(standard gml)이 만들어졌다.
SGML은 1980년대 ISO에 의해 표준으로 채택되었다.
XML(eXtensivle markup language)은 좀 더 실용적인 SGML의 하위 집합이다.
HTML과 XML은 모두 SGML을 뿌리로 한 언어다.

 

- URL

URL(Uniform Resource Locator) 균일 자원 위치 지정자는 일정한 구조를 따르는 텍스트 문자열이다.
통신 메커니즘을 표시하는 스킴, 통신하려는 서버를 나타내는 호스트, 문서를 추출하기 위한 위치를 가리키는 경로Path로 구성된다.

 

-  Html문서

최초의 문서는 HTML로 작성됐다. HTML은 하이퍼텍스트를 활용한다.
< 부등호 기호는 마크업 엘리먼트를 시작한다.
특별한 표시이기 때문에, 필요에 따라 순수 문자열로 나타내고 싶을 때는
엔티티 참조를 사용할 수 있다.
엔티티 참조는 문자를 다른 문자열로 표현하는 방법이다.

이외에도 각 엘리먼트는 애트리뷰트란 하위 요소를 가질 수 있다.
애트리뷰트는 어떠한 동작을 정의하는 키가 될 수 있다.

 

- DOM 문서 객체 모델

웹 브라우저는 문서를 문서 객체 모델에 따라 처리한다.
일련의 엘리먼트들이 다른 엘리먼트를 둘러싸고 있는 것으로,
웹 페이지를 생각할 수 있다.
DAG 유향 비순환 그래프, 트리 구조이기도 하다.

 

- DOM 처리
브라우저는 문서 트리를 깊이 우선순회 하며 트리를 해석한다.
루트에서 시작하여 첫 자식으로 내려가고, 종단 노드에 도달할 때 까지 순회를 계속한다.
모든 자식에 대해 깊이 우선 순회를 순서대로 수행하고, 이런 과정을 모든 노드에 방문할 때까지 반복한다.
깊이 우선 순회는 스택을 사용하는 또 다른 응용 예이다.

 

- CSS
캐스케이딩 스타일 시트 Cascading Style Sheets는 HTML에서 스타일 정보를 분리하여
HTML을 한 번만 작성해도 대상 장치에 따라 여러 스타일을 적용할 수 있게 했다.
CSS는 실렉터라고 하는 정규식의 변형을 사용해 DOM의 에리먼트 위치를 지정한다.

 

- XML 등의 마크업 언어
XML은 HTML과 꽤 비슷해 보인다.
HTML과 XML의 큰 차이는 HTML은 웹 페이지라는 구체적인 응용을 위해 만들어진다느 점이다.
XML은 더 일반적인 용도의 마크업 언어로 다양한 응용 분야가 있다.
대부분의 XML 태그는 미리 정해진 의미가 없다.
각 XML별 엘리먼트가 어느쪽에 속하는지는 태그 앞에 접두사를 통해 구분할 수 있는데, 이를 namespace라 한다.

DTD 문서 타입정의는 마크업 언어 문법에 맞는 엘리먼트가 어떻게 생겼는지 정의할 수 있다.
XML 경로 언어는 XML 문서에 대한 실렉터를 제공한다.

 

- 자바스크립트
대화형 홈페이지를 위해 자바스크립트가 생겨났다.
자바스크립트를 사용하면 서버가아니라 컴퓨터에서 실행될 수 있는 실제 프로그램을 웹페이지에 포함시킬 수 있다.
이는 DOM을 변경하고 직접 웹서버와 통신할 수 있다.

자바스크립트와 서버의 상호작용은 비동기 자바스크립트와 XML, 즉 AJAX를 통해 이뤄진다.
비동기는 브라우저가 서버의 응답이 언제 일어날지에 대해 아무 제어를 하지 않는다는 뜻이다.
서버와 자바스크립트 사이를 오가는 데이터형식으로 처음에는 XML을 사용했었다.

 

- jQuery
제이쿼리 라이브러리는 실렉터와 액션을 조합하고, 이벤트 핸들러를 연결하는 편의기능을 제공한다.
DOM 조작을 간편하게 하고, 브라우저마다 다른 함수들을 통합한 사용자 친화적인 인터페이스를 제공한다.

- SVG
크기 변경이 가능한 백터 그래픽스 Scalable Vector Graphics는 브라우저가 지원하는 마크업 언어 중 결이 다른 언어이다.
포스트 스크립트라는 언어는 이식성 면에서 문제가 있었는데, 이를 해결하기 위해 이식 가능한 문서형식 PDF가 만들어졌다. SVG는 어느정도 브라우저를 PDF에 욱여넣은 것과 비슷하다.

- HTML5
HTML5는 HTML의 최신 구현이다.
시맨틱 엘리먼트 추가,
캔버스 추가,
audio, video 등의 엘리먼트가 추가되었다.

 

- JSON
AJAX는 처음에 서버에 비동기로 XML형식의 데이터를 보냈지만
이제는 JSON 형식의 데이터를 다룬다.
JSON은 자바스크립트 객체 표기법 JavaScript Object Notation을 줄인 말이다.
JSON은 근본적으로 자바스크립트 객체를 사람이 읽기 쉬운 방식으로 표현한 것이다.