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

최초의 웹브라우저

최초의 웹브라우저는 간단했다. 브라우저는 URL을 사용해 서버에게 문서를 요청하면, 서버는 문서를 브라우저에게 보내고, 브라우저는 문서를 표시했다.

URL에는 어떤 정보가 포함되어 있어서 문서를 요청할 수 있는 것일까?

https://www.example.com/path/to/myfile.html
스킴	호스트	경로
https	www.example.com	path/to/myfile.html

먼저 https는 통신 메커니즘 (프로토콜)을 표시하는 스킴이다. 데이터를 주고받을 때, 어떤 규칙에 맞춰서 데이터를 송수신할지를 명시하고 있다. 예를 들어 https는 암호화 (secure) 사용해서 하이퍼텍스트를 전송하는 프로토콜이다.

www.example.com 은 도메인 네임으로, 어느 웹 서버에 요청을 보낼 것인지를 의미한다. 우편으로 따지면 '서울특별시 강남구' 정도가 된다.

/path/to/myfile.html 은 웹서버의 어느 위치에서 데이터를 가지고 올지를 결정한다. path 아래에 to 아래에 있는 myfile.html을 요청하는 것이다. 우편에서는 상세주소라고 할 수 있다.

<참고>
본문에는 웹서버와 소통하기 위한 URL이 담고 있어야할 필수적인 정보만을 포함하였다. 더 구체적인 정보는 https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL 를 참고하길 바란다.

HTML과 CSS

최초의 브라우저는 이러한 요청을 받으면 HTML로 작성된 문서를 브라우저에게 보내고, 브라우저가 문서를 표시하는 방식이었다. HTML은 어떤 언어일까?

HTML은 하이퍼텍스트 마크업 언어(HyperText Markup language)의 줄임말이다.

<!-- html 예시 코드 -->

<html>
    <head>
        <title>My Text</title>
    </head>
    <body>
        <h1>My Header</h1>
        <p>My Paragraph</p>
    
    </body>
</html>

마크업 언어란 본문과 구별할 수 있는 마크를 추가된 언어다. 예시 코드의 <html></html>등이 모두 일종의 마크라고 볼 수 있다. 또한 html에서는 <a></a>라는 마크(태그)를 사용하면 텍스트를 하이퍼 텍스트로 변환할 수 있기 때문에 하이퍼텍스트 마크업 언어라고 불린다.

위 코드가 실행되면 태그(<**>)는 출력되지 않고 본문만 출력되는 것을 확인할 수 있다.

또한 HTML 웹페이지에는 스타일 정보를 포함할 수 있다. 그러나 화면의 시각적 효과가 중요해지면서, HTML에서 스타일 정보를 분리해서 작성하기 시작했다. 이것이 바로 CSS다. CSS는 접속한 장치에 따라 텍스트 크기를 조정하는 등의 일을 할 수 있기 때문에 다양한 기기를 통해 웹에 접근하는 변화에 적합했다.

브라우저가 html을 바로 해석해서 출력하는 것은 아니다. 우선적으로 HTML 코드를 DOM(Document Object Model)트리로 변환하고, 이 트리를 깊이 우선 순회를 하며 처리한다.

자바스크립트

서버에 저장된 HTML이 그대로 나오는 것이 아니라 조건에 따라 동적으로 만들어지는 페이지를 형성하기 위해서는 자바스크립트가 필요하다. 즉, 자바스크립트는 서버로부터 데이터를 받아 DOM을 변경하는 역할을 한다.

자바스크립트와 서버의 상호작용은 AJAX를 통해 이루어진다. AJAX는 비동기 자바 스크립트와 XML(Asynchronous JavaScript ans XML)의 줄임말이다. 최초에는 XML 형식으로 서버와 자바스크립트간의 데이터 송수신이 일어났기 때문에 이러한 이름이 붙었다. 또한 서버의 처리가 완료되기를 기다리지 않고 작업을 수행하는 비동기적인 특징을 가지고 있다.

현재는 서버와 자바스크립트간의 데이터 송수신이 JSON 형식으로 일어난다.

즉 현재의 웹 브라우저는 HTML을 DOM트리로 변경할 수 있으며, 자바스크립트 프로그램을 이용해 DOM트리를 변경시켜 사용자의 화면을 동적으로 구성하는 것또한 가능하다.

---- 확인 문제 ----

1. "http://www.example.com/category/java/42" 라는 URL을 스킴과 호스트, 패스로 구분하고 각각의 역할을 서술하시오.

2. 서버와 자바스크립트 프로그램이 데이터를 주고 받기 위해서는 (A)를 통해 이루어진다. 이는 서버의 응답을 기다리지 않고 작업을 수행하는 (B)의 특징을 가지고 있다.

---- 정답 ----

1. 스킴 : http -> 프로토콜 (통신 규약)

호스트 : www.example.com -> 웹서버의 위치

패스 : category/java/42 -> 웹 서버상의 경로

2. (A) : AJAX

(B) : 비동기성

저작자표시

'CS > BOOK' 카테고리의 다른 글

[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 11. 알고리즘 아이디어 (0)	2024.04.24
[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 10. 웹 브라우저를 활용한 프로그래밍 (0)	2024.04.23
[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 8. 컴퓨터의 프로그래밍 언어 처리 (0)	2024.04.16
[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 5. 컴퓨터 아키텍처 (0)	2024.03.21
[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 4. 하드웨어의 구조 - CPU (0)	2024.03.20