컴퓨터의 구조 - 7

 

1. 웹 브라우저

웹 브라우저는 가상 머신 (Virtual Machine)이다. 웹 브라우저는 복잡한 명령어 집합을 완전히 소프트웨어로 구현한 추상적 컴퓨터이다. 다시 말하자면, 웹 브라우저는 인터프리터에 속한다.

브라우저는 복잡한 애플리케이션인 동시에 소프트웨어로 구현된 프로그래밍 가능한 컴퓨터이다. 브라우저의 개발자 콘솔 (Developer Console)을 떠올릴 수 있다.

1.1. URL (Uniform Resource Locator)

브라우저는 URL을 사용하여 HTTP 프로토콜을 통해 서버에게 문서를 Request 한다. 서버는 문서를 브라우저에 보내고, 브라우저는 문서를 표시한다. 여기서 문서는 HTML / XML 등의 다양한 마크업 언어로 작성될 수 있다.

URL은 아래 그림처럼 세 가지 부분으로 나뉜다.

스킴 (Scheme)은 통신 메커니즘이다. HTTP는 하이퍼텍스트 전송 프로토콜을 의미하며, HTTPS는 HTTP + Security로 암호화를 사용하는 하이퍼텍스트 전송 프로토콜을 의미한다. 통신하려는 서버가 호스트 (Host)이다. 호스트 주소는 인반적으로 아이피 주소 보다는 도메인 이름을 사용한다. 문서는 경로 (Path)로부터 추출된다.

File이라는 스킴을 사용하면 URL의 호스트와 경로가 로컬 파일 경로로 설정된다. 즉, File 스킴을 사용하면 본인 컴퓨터에 있는 파일을 가리킬 수 있다.

1.2. HTML

최초의 웹 페이지는 HTML로 작성됐다. HTML은 하이퍼텍스트 (Hypertext)를 사용한다.

- 엘리먼트 (Element): <tag> 내용 </tag> 형태의 원소들

- 태그 (Tag)

- 어트리뷰트 (Attribute)

HTML 엘리먼트를 표현할 때 쓰일 법한 데이터 구조는 아래와 같다. 엘리먼트는 복합 데이터 타입으로 구성되며, 애트리뷰트는 연결 리스트로 구성된다. 엘리먼트 전체는 트리로 이루어져 있고, 자식들은 선형적으로 순회 가능하도록 이중 연결 리스트로 연결되어 있다.

 

1.3. DOM (Document Object Model; 문서 객체 모델)

DOM은 트리와 같은 구조이다. 따라서 DFS하면서 트리를 해석할 수 있다.

1.4. CSS

CSS (Cascading Style Sheets)는 HTML에서 스타일 정보를 분리하여, HTML을 한 번만 작성하더라도 대상 장치에 따라 여러 스타일을 적용할 수 있도록 한다. 

CSS는 Selector라고 하는 정규식의 변형을 사용하여 DOM의 엘리먼트 위치를 지정한다. CSS는 색, 글꼴 크기 등 많은 프로퍼티 (Property)를 정의하는데, 이 중 DOM 앨리먼트와 결합된 프로퍼티를 애트리뷰트 (Attribute)라고 부른다. CSS는 이 Attribute와 Element를 연결하여준다.

1.5. XML

XML은 HTML과 굉장히 유사해 보인다. HTML은 웹 페이지를 위해 만들어진 반면, XML은 더 일반적인 용도의 마크업 언어이다. 대부분의 XML Tag는 미리 정해진 의미가 없으며, 사용자가 Tag의 의미를 정의할 수 있다. Tag가 중복되어 사용될 수 있도록 Namespace라는 접두사를 붙여서 사용한다.

- DTD (Document Type Definition): 마크업 언어 문법에 맞는 엘리먼트가 어떻게 생겼는지 정의할 수 있다.

- XPath (XML Path Language): XML 문서에 대한 셀렉터를 제공한다.

- XSLT (Xtensible Stylesheet Language Transformations): XPath와 XSLT를 결합하면 XML 문서를 표현한 파스 트리를 검색하고 변형시킴으로써 XML 문서의 일부분을 다른 형태로 변환 가능하다. 

 

2. 자바 스크립트 (JavaScript)

동적인 웹 페이즈는 자바 스크립트라는 언어를 통해 구현한다. 자바스크립트를 사용하면 서버가 아니라 브라우저가 실행중인 사용자 컴퓨터에서 실행될 수 있는 프로그램을 웹 페이지에 포함할 수 있다. 이 프로그램은 DOM을 변경할 수 있으며, 직접 웹 서버와 통신할 수 있다.

자바 스크립트와 서버의 상호작용은 비동기 자바스크립트와 XML (AJAX; Asynchronous JavaScript and XML)을 통해 이루어 진다. 여기서 비동기란, 브라우저가 서버의 응답이 언제 일어날지 혹은 응답이 돌이오지 않을지에 대해 제어를 하지 않음을 의미한다. 서버와 자바스크립트 프로그램 사이를 오가는 데이터 형식으로는 XML 혹은 JSON을 사용한다.

자바스크립트를 통해 CSS 스타일 변경, DOM 트리 안의 노드 재배치, 엘리먼트 추가 및 제거 등이 가능하다.

2.1. Jquery

JavaScript를 통한 DOM의 처리는 사용자 친화적이지 못하며, 브라우저마다 다르다. Jquery는 훨씬 더 사용하기 쉬운 DOM 조작 인터페이스를 제공하며, 프로그래머가 직접 브라우저간의 차이를 다룰 필요를 제거하였다. 

2.2. JSON

JSON (JavaScript Object Notation)은 자바스크립트 객체 표기법을 의미한다. 자바스크립트 프로그램이 서버와 통신할 때 주고 받는 데이터 형식 중 하나인데, XML과 달리 JSON을 사용하면 JS에서 데이터를 내보내거나 들여올 때 추가로 코드를 작성할 필요가 없기 때문에 유용하다. 최근에는 그 유용성이 알려져서, 웹 이외의 분야에서도 널리 사용되고 있다. 

2.3. 브라우저의 블록도

브라우저는 아주 복잡한 프로그램이지만, 자세히 살펴보면 언어 파서, 파스 트리, 정규식, 인터프리터, 네트워크 등으로 이루어져 있다.