웹은 어떻게 동작하는가 ?

 

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

How the web works - Learn web development | MDN

 

MDN에서 기가막히게 정리해 놓은 글을 제 나름대로 번역하면서 학습 목적으로 작성합니다. 

 

 

 

 

클라이언트와 서버 

 

• 클라이언트들은 보통 일반적인 웹 사용자의 인터넷 연결 장비(스마트폰, 노트북)와 해당 장비에서 사용할 수 있는 웹-접근성 소프트웨어(웹 브라우저)입니다

 

• 서버는 웹페이지, 사이트, 어플리케이션들을 담고 있는 컴퓨터들이죠. 클라이언트 장비가 웹페이지에 접근하려고 할때, 웹페이지 복사본이 서버로부터 클라이언트 장비에 다운로드되어 유저의 웹 브라우저에 보여지게 됩니다.

 

---

 

The other parts of the toolbox 

위에서 클라이언트와 서버를 설명했지만 모든 내용을 담고 있진 않습니다.

많은 다른 요소들이 관련되어 있고, 밑에 설명할 것 입니다.

 

지금부터, 웹이 하나의 길이라고 상상해보세요. 길의 한쪽 끝은 클라이언트고 예를 들면 집방향.

그리고 반대편 끝은 서버, 즉 편의점같은 볼일을 보러가는 곳의 목적지죠.

 

클라이언트와 서버에 더불어 우리는 알아야 할 것들이 있습니다. 

 

• 인터넷 연결 상태: 웹에서 데이터를 송-수신을 가능케합니다. 실질적으로 집과 편의점 사이의 길거리 같이 당연한 거죠. 

 

• TCP/IP : Transmission Control Protocol(전송 제어 프로토콜)과 Internet Protocol(인터넷 프로토콜)들은 데이터가 인터넷 사이를 어떻게 이동해야할지에 대한 것을 정의하는 통신 규약입니다. 이건 마치 당신이 주문하러 가든, 편의점에 가든, 굿즈들을 사러 가든 그것에 대한 이동 메커니즘이라고 할 수 있습니다.  우리를 예로 들면, 차와 자전거 같다고 할 수 있다. (다른 방법으로도 돌아다닐 수 있겠죠.) 

 

• DNS: Domain Name System(도메인 네임 시스템)은 웹 사이트의 주소록이라고 볼 수 있습니다. 브라우저에 웹 주소를 입력하게 되면, 브라우저는 검색하기 전에 해당 웹사이트의 IP 주소를 찾기위해 DNS를 확인합니다. 브라우저는 웹사이트의 서버가 존재하는지 찾아야하고 그래야 HTTP 요청을 맞는 위치에 전송할 수 있습니다. 이건 편의점 주소를 검색해야 우리가 찾아갈 수 있는 것과 같습니다.

 

• HTTP: Hypertext Transfer Protocol는 클라이언트와 서버간 서로 통신할 수 있는 언어를 정의하는 응용 프로토콜입니다. 편의점에서 물건을 주문할때 사용하는 언어라고 할 수 있겠습니다.

 

• Component files: 하나의 웹사이트는 편의점에서 살 수 있는 굉장히 많은 제품들 처럼 굉장히 많은 다른 파일들로 이루어져 있습니다. 크게 두가지 타입으로 구분지을 수 있습니다.

Code files: 웹사이트는 주로 HTML, CSS, 자바스크립트로 이루어져있고, 추후 더 많은 것들을 보게 될것입니다.

Assets: Code files를 제외하고 웹사이트를 구성하는 모든 것들을 통칭하는 이름이다. 예를 들면 이미지, 음악, 비디오, 워드 파일, PDF 파일

 

---

그래서 정확히 무슨일이 일어나는데 ? 

브라우저에 웹 주소를 입력하게되면 

 

1. 브라우저는 DNS 서버에 가서 웹사이트가 존재하는 서버의 진짜 주소(IP 주소)를 찾습니다.
2. 브라우저는 웹사이트의 복사본을 클라이언트에 달라고 서버에 HTTP 요청을 보냅니다. 그렇게 이 메세지와 클라이언트와 서버간의 모든 데이터들을 TCP/IP를 사용해 우리의 인터넷을 통해 송수신 됩니다. 
3. 서버가 클라이언트 요청을 승인한다면, 서버는 클라이언트에게 "여기 웹사이트 봐도 좋아 여기있어"라는 의미로 '200 OK' 응답을 보냅니다. 그러고 나서 웹사이트 파일들을 브라우저에게 data packets(패킷 데이터)이라고 불리는 작은 덩어리 형태로 보내기 시작합니다. 
4. 브라우저는 그 작은 덩어리(chunks) 파일들을 조합하여 하나의 완성된 웹페이지로 완성해서 사용자에게 보여줍니다.

---

컴포넌트 파일들을 분석하는 순서 

 

브라우저가 서버에 HTML 파일을 위해 요청을 보낼때, 해당 HTML 파일을 주로 외부 CSS 스타일 시트를 참조하고 있는 <link>요소와 외부 자바스크립트 구문을 참조하고 있는 <script> 요소를 포함하고 있습니다. 여기서 어떤 파일이 브라우저에 의해 분석되고 페이지에 로드되는 순서를 알고 있는 것은 굉장히 중요합니다.

 

브라우저는 HTML 파일을 제일먼저 분석하고, 외부 CSS 스타일시트를 참조하는 link 요소와 자바스크립트 참조하는 script요소들을 인식하게끔 이어집니다. 

브라우저가 HTML을 구문 분석할 때, <링크> 요소에서 찾은 모든 CSS 파일과 <스크립트> 요소에서 찾은 모든 자바스크립트 파일에 대한 요청을 서버로 다시 전송하고, 그로부터 CSS와 자바스크립트를 구문 분석합니다.

브라우저는 HTML 분석으로부터 in-memory DOM 트리를 생성하고, CSS 분석으로부터 in-memory CSSOM 구조를 생성하고, 분석된 자바스크립트를 컴파일하고 실행합니다.

브라우저가 DOM 트리를 만들고 CSSOM 트리의 스타일을 적용하고 자바스크립트를 실행하면 페이지의 시각적 표현이 화면에 그려져 사용자는 페이지 내용을 보고 상호작용을 시작할 수 있습니다.

 

---

DNS 설명

 

당신의 최애 웹사이트를 찾기 위해 주소창에 외울만한 문자열을 입력하기에는 실제 웹 주소는 별로 안 이쁩니다. 63.245.215.20 이런식으로 특별한 숫자들로 이루어져있죠. 

 

IP 주소라고 불리는데, 웹의 특정 위치를 표현합니다. 그러나 기억하기 쉽지 않죠 ? 그래서 Domain Name Servers가 발명이 되었습니다. 브라우저에 입력하는 웹주소와 (예를 들면 mozilla.org)와 해당 웹사이트의 IP 주소를 조회해주는 특별한 서버들입니다. 

 

웹사이트들을 IP 주소를 통해 바로 접근할 수 있습니다. 웹사이트의 IP 주소를 찾으려면 DNS lookup tool을 사용할 수 있습니다. 

 

---

Packets(패킷) 설명

 

앞서서 서버에서 클라이언트로 보내는 데이터들의 형식을 표현하기 위해 packets(패킷)이라는 용어를 사용했습니다. 무슨 뜻일 까요? 기본적으로 데이터가 웹에서 이동할때, 수천개의 작은 덩어리들로 나누어 보내집니다. 데이터들을 작은 패킷으로 보내는 이유는 다양합니다. 패킷들은 가끔 손상되거나 드랍되는데 이때 이런 작은 청크들을 교체하기에 용이합니다. 또한 패킷은 서로 다른 경로를 따라 라우팅될 수 있으므로 교환 속도가 빨라지고 여러 사용자가 동시에 동일한 웹 사이트를 다운로드할 수 있습니다. 만약 각각 웹사이트가 하나의 큰 덩어리를 전송한다면 여러 사용자가 동시에 파일들을 다운로드하지 못할 것 입니다. 딱 봐도 굉장히 비효율적인 것을 확인 할 수 있습니다.