아래 정보의 출처는 : IT좀 아는 사람 책의 내용입니다.
브라우저의 렌더링 과정에 대해서 알아보겠습니다.
요약
웹사이트 주소
웹사이트를 이야기 하기 전에 건물 주소에 대해 생각해보자.
모든 건물에는 위치를 쉽게 찾을 수 있도록 만든 고유한 주소가 존재한다.
강남로 234 에 가라고 하면 모든 사람이 똑같은 곳에 도착할 것이다.
웹페이지도 건물처럼 저마다 https://google.com 같은 고유한 주소가 있다.
그래서 누구나 쉽게 똑같은 웹 페이지에 도착할 수 있다.
이런 형태의 웹 페이지 주소를 표준형 자원 위치 식별자 uniform resource locator 줄여서 URL이라고 부른다.
원래 URL은 https://google.com인데 줄여서 google.com 이라고 입력해도 브라우저는 다 이해한다.
이것은 무슨 뜻일까?
주소해석
브라우저는 전체 URL을 몇 조각으로 나눠서 사용자가 원하는 위치를 파악한다.
건물 주소를 건물 번호, 도로명, 도시, 주, 우편번호로 분리하는 거소가 마찬가지다.
https://
이것은 브라우저가 어떤 방식으로 웹사이트에 접속해야하는지 알려주는 프로토콜이다.
비유하자면 우버를 타고 백악관에 가려고 할때 우버풀, 우버x, 우버블랙 중 하나를 고르는 것과 같다.
인터넷을 탐색할때 우리가 선택할 수 있는 이동수단, 즉 프로토콜은 두가지이다.
기본적인 프로토콜인 HTTPHyperText Transfer Protocol (하이퍼텍스트 전송 프로토콜)는 http://로 표시된다.
암호화를 통해 보안성을 강화한 HTTPSHyperText Transfer Protocol (하이퍼텍스트 보안 전송 프로토콜)는 https://로 표시된다.
둘은 거의 동일한 프로토콜이지만 HTTPS는 브라우저에 정보를 암호화하라고 명령해서
해커의 공격을 방지한다는 차이점이 있다.
웹사이트가 암호나 신용카드 정보를 입력받을 때는 반드시 주소에 https://가 들어가야한다.
www.
두번째 URL 조각은 www.이다
대부분의 웹사이트가 굳이 www를 붙이지 않아도 상관없지만.
브라우저는 완전한 주소를 보여주기 위해 굳이 표시한다.
도메인
그 다음에 나오는 google.com은 도메인이다.
모든 웹사이트에는 고유한 도메인 이름이 있다.
IP주소
여기서 반전은 컴퓨터가 도메인 이름을 이해하지 못한다는 사실이다.
컴퓨터가 이해하는 것은 IP주소라는 숫자 코드다.
모든 웹사이트에는 최소한 1개의 IP주소가 존재한다.
컴퓨터는 IP주소를 알아야만 웹사이트에 접속할 수 있다.
우리가 폰에다 빌게이츠라고 입력한다고 해서 빌게이츠와 통화할 수 있는 게 아니라 그의 전화번호를 알아야 전화할 수 있는 것과 같다.
도메인 이름을 IP주소로 전환하기 위해 브라우저는 도메인 이름 서비스 줄여서 DNS를 이용한다.
DNS는 방대한 주소록이라고 생각하면 되겠다.
컴퓨터의 하드드라이브에는 최근에 사용한 도메인 이름과 IP주소의 조합이 저장되어있다.
만일 도메인 이름과 결합된 IP주소를 찾지 못하면 컴퓨터는 ISP(Internet Service Provider)에게 IP주소를 묻는다.
우리가 먼 친척의 전화번호를 모를때 가까운 친척에게 묻는 것과 같다.
이제 컴퓨터는 DNS를 이용해 google.com의 ip주소를 찾기 시작한다. 구글에는 다양한 IP주소가 있고 그중 하나가 216.58.219.206이다.
이로서 브라우저는 HTTPS를 통해 216.58.219.206 이 IP주소로 google.com에 접속한다는 것을 파악했다.
이때 도메인 주소 뒤에는 /이라는 경로값이 저절로 입력되어 google.com의 첫화면으로 이동한다.
뒤에 경로를 maps라고 치면 구글 지도가 나타날 것이다.
구글에 요청
이제 브라우저는 google.com이라고 부르는 곳에 접속하려면 HTTPS를 이용해서 IP주소(216.58.219.206)의 첫 화면으로 가야한다는 것을 알았다. 이 정보를 취합한 '요청'을 구글 웹사이트 서버에 전송한다.
서버는 브라우저의 요청을 받고 우리가 첫화면에 접속하기를 원한다는 사실을 알게된다.
그래서 우리가 원하는 웹페이지를 준비하기 위해 필요한 것을 확인한다.
확인 작업이 끝나면 서버는 첫화면을 출력하기 위한 코드를 불러들인다.
이 코드는 HTML, CSS, JS언어로 작성된다.
다시 브라우저로
구글 서버가 코드를 다시 브라우저로 전송한다. 이를 '응답'이라고 한다.
브라우저는 이 코드를 이용해 화면에 웹 페이지의 구성 요소들을 보기 좋게 표시하고 사용자가 클릭, 글자입력 등 필요한 행위를 할 수 있게 한다.
이 화면에서 링크를 클릭하거나 검색을 하면 새로운 URL로 이동한다.
그러면 위의 과정이 처음부터 반복된다.
인터넷으로 정보를 전송하는 것과
핫소스를 배송하는 것의 공통점은?
로스엔젤레스에 사는 핫소스 마이나가 촐롤라의 대용량 핫소스를 50병 주문했다.
촐롤라는 로스엔젤레스와 반대편인 뉴욕에 있다.
뉴욕에서 촐룰라 직원 A가 주문을 확인한다.
5병씩 10상자에 나눠남고 받는사람이 알아볼 수 있게 상자마다 1/10 2/10 이렇게 적는다.
직원 A는 주문자의 주소를 모르기 때문에 상자에 주문자의 이름만 기입한다.
이제 직원 B가 A에게서 상자를 넘겨받는다. 그리고 주문자가 회사 웹사이트 가입자임을 확인하고 DB에서 주소를 찾는다. 그리고 상자에 주소를 적어서 우체국으로 전달한다.
우체국 직원은 거리가 멀어서 바로 보낼 수 는 없다.
가까운 경유지에 보내고 또 그 도시에서 다른 도시로 넘겨서 로스엔젤레스로 마침내 도착하여 주문자의 집으로 배송된다.
경유지가 상자마다 다르다면 순서도 제각각이다.
1번 박스보다 3번박스가 먼저올 수도 있다.
마침내 모두가 도착한다.
TCP/IP
TCP(Transmission Control Protocol 전송 제어 프로토콜)과 IP(인터넷 프로토콜)
인터넷상의 정보는 TCP와 IP를 통해 이 컴퓨터에서 저 컴퓨터로 전송된다.
이 두 프로토콜이 위에서 만난 촐룰라 직원들과 비슷한 역할을 한다.
보통 웹페이지는 한 번에 다 보내기엔 용량이 크기 때문에 TCP가 다수의 packet으로 소분하고 라벨을 붙인다.
그리고 직원B가 DB에서 주소를 찾은것 처럼 서버에서는 DNS를 통해 IP주소를 찾는다.
이제 정보는 IP를 통해 사용자에게 전달된다.
IP는 각 패킷이 짧은 연결로들을 경유하게 하는데 이때 이 연결로에서 저 연결로로 건너가는 과정을 홉hoop이라고 부른다. 패킷은 어떤 길을 이용하든 간에 결국에는 목적지에 도착하게 되어있다.
패킷이 사용자에게 도달하면 TCP가 원래 순서대로 재결합하고 혹시 빠진 패킷이 있다면 웹사이트에 재전송을 요청한다.
HTTP와 HTTPS
HTTP와 HTTPS는 TCP와 IP에게 지시를 내린다.
이 페이지를 가져다 줘! 라고 하면 TCP와 IP가 웹페이지를 가져다 주는 것이다.
이 네개의 프로토콜은 우리가 온라인에서 하는 거의 모든 행위의 필수 요소이다.
정보를 어떻게 이 컴퓨터에서 저 컴퓨터로 이동할까?
이것을 알아보기 위해 트레이스루트라는 맥/리눅스용 도구를 이용해 알아볼 수 있다.
패킷은 직선으로 날아가지 않았다. 케이블을 타고 이동하기 때문에 지리적 제약을 받을 수 밖에 없었다.
월스트리트의 트레이더는 왜 산맥까지 뚫어가며 광케이블을 직선으로 깔았을까?
인터넷 케이블
케이블이 왜 중요한지 따져보자.
IP를 통해 전송되는 정보는 장거리 지하 케이블을 타고 이동한다.
이때 많이 쓰는 케이블이 광케이블이다.
광케이블은 유리로 제작되고 머리카락만큼 가늘다.
정보는 케이블을 통해서 이동하는데 이동 지점 간의 최단거리는 직선이므로 직선에 가까운 케이블을 이용할 수록 인터넷 속도가 빨라진다.
결론
1. 브라우저창에 google.com을 치면
2. URL주소를 해석해서 http인지 https방식인지 확인하고
3. DNS에서 IP주소를 찾는다.
4. 그리고 이 정보를 취합한 요청을 구글 서버에 전송하고
5. 서버는 브라우저의 요청에 필요한 코드를 불러들인다.(그 코드는 html, css, js언어로 작성된다.)
6. 서버가 브라우저로 응답을 보낸다. (코드를 보낸다. 보통 index.html파일이다.)
7. 브라우저는 index.html 파일을 파싱한다.
8. 한줄 한줄 읽으면 DOM트리를 만들어나간다.
9. 중간에 CSS요청이나 JS코드를 만나면 중단하고 요청, 응답을 하고 끝나면 다시 html을 다시 읽고
10. DOM트리를 완성한다.
11. 사용자가 클릭하여 다른 경로로 이동하면 이 과정을 처음부터 반복한다.
'컴퓨터공학지식' 카테고리의 다른 글
| [CS] Http와 Https의 차이점 (0) | 2021.09.28 |
|---|