📚[네트워크] 웹 통신의 큰 흐름

브라우저에서 www.google.com을 입력하면 어떤 일이 벌어질까❓
한 번쯤은 궁금했던 문제에 대해 알아보도록 하자.

---

1. Browser가 URL에 적힌 값을 파싱

즉, 브라우저가 입력받은 URL의 구조를 Protocol, Domain, Port로 해석하는 것이다.
위에서 예시로 제시한 google의 URL을 예시로 들어 자세히 설명하자면 아래와 같다.

https://www.google.com:443
Protocol: https
URL: www.google.com
Port: 443

🧐 여기서 궁금한 점!
나는 프로토콜과 포트를 제외한 URL만 입력했는데?
만약 프로토콜이 HTTP라면 80 포트를 기본 값으로 요청하고, 프로토콜이 HTTPS라면 443 포트를 기본값으로 요청하게 되니 URL만 입력해도 프로토콜과 포트까지 모두 입력이 된 상태가 된다.
하지만 명시적으로 포트를 선언했다면 선언한 포트값을 입력해야 한다!👌

---

2. HSTS(HTTP Strict Transport Security) 목록 조회

HTTPS 프로토콜로 접근해야 하는 주소에 HTTP로 접근하게 되면 서버측에서 302 리다이렉트를 이용해 강제로 HTTPS로 전환시킬 수 있다.
하지만 이건 HTTP 프로토콜을 거쳐가는 방법이라 보안에 취약할 수 있기 때문에 클라이언트에게 HTTPS를 강제하도록 권장하는데 이게 바로 HTST다!🌟

HSTS는 브라우저가 HTTPS 프로토콜만을 사용해서 서버와 통신하도록 하는 기능이다.
브라우저가 자신의 HSTS 캐시에 HTTPS로만 연결되도록 요청한 URL을 저장해서 만든 HSTS 목록이 있는데 이 목록을 조회해서 해당 요청을 HTTPS로 보낼지 판단한다.
만약 이 목록에 해당 URL이 있다면 명시적으로 HTTP로 보내도 브라우저가 이를 HTTPS로 요청하고 이 목록에 없다면 첫 요청은 HTTP로 보내게 된다.

---

3. IP주소로 변환

해당 도메인 주소로는 컴퓨터끼리 통신이 불가능하니 DNS Lookup 과정을 통해 해당 브라우저에서 자신의 로컬 hosts 파일과 DNS cache에 해당하는 URL의 존재 여부를 확인해야 한다.
만약, 존재하지 않는다면 DNS 서버에 요청하여 해당 URL을 IP주소로 변환한다.

💡 DNS Lookup 이란?
리눅스, 맥OS, 윈도우 등에서 nslookup라는 명령어로 DNS 레코드를 조회할 때 사용하는 것이라고 생각하면 된다.

🔍DNS Lookup 과정
Browser -> hosts 파일 -> DNS Cache 순서대로 Domain에 매칭되는 IP를 찾는다.
일반적으로는 Root Domain Server에서부터 Serve Domain Server 순으로 찾게 된다.

💡 hosts 파일이란?
hosts 파일은 호스트 네임에 대응하는 IP주소를 저장하는 파일로 DNS 서버에서 주소정보를 제공받지 않아도 서버의 위치를 찾게 해주는 파일이다.
OS별로 가지고 있으며, DNS 서버가 존재하기 전에 IP주소를 매핑하는 테이블로 사용했는데 현재는 그 역할을 DNS 서버가 잘 해주기 때문에 일반적인 상황에서는 거의 사용하지 않는다고 볼 수 있다.

---

4. 라우터를 통해 해당 서버의 게이트웨이까지 이동

DNS 서버에게 IP 주소를 받았으니 서버로 요청해야 하지만 해당 IP 주소로 어떻게 가야하는지 경로를 알 수 없다.
그 경로는 네트워크 장비인 라우터를 통해 알 수 있는데, 라우터에서 라우팅 테이블을 통해 해당 요청이 어떤 경로를 통해 가야할지 경로를 지정해주기 때문에 라우터를 통해 요청은 해당 IP를 찾아가게 된다.

---

5. ARP를 통해 IP 주소를 MAC 주소로 변환

실질적인 통신을 하기 위해서는 논리 주소인 IP 주소를 물리 주소인 MAC 주소로 변환해야 하기 때문에 해당 네트워크 안에서 ARP를 Broad Casting한다.
그럼 해당 IP주소를 가지고 있는 노드가 자신의 MAC 주소를 응답한다.

💡 ARP란?
Address Resolution Protocol의 줄임말로 네트워크 상에서 IP 주소를 물리적 MAC 주소로 바인딩 시키기 위해 사용하는 프로토콜이다.

💡 MAC 주소란?
MAC 주소란 12개의 16진수 숫자로 구성되어 있는 물리적 주소이다.
이 숫자 중 앞 6개의 숫자는 네트워크 카드를 만든 회사를 나타내는 것이고 뒤 6개의 숫자는 각 회사에서 임의로 붙이는 일종의 시리얼 번호라고 생각하면 된다.

---

6. 웹 서버 접속

해당 서버에 접속하기 위해서는 TCP 소켓 연결을 진행해야 한다.
우리가 일반적으로 TCP 통신을 하기 위해서는 3-way-handshaking 과정을 거쳐야 하는데 여기서 3-way-handshaking 과정이란 서로의 상태를 묻는거라 볼 수 있다.

Client: Server야, 내가 요청하면 받을 수 있어?
Server: 응! 받을 수 있어! 너도 내가 응답하는거 받을 수 있어?
Client: 응! 나도 받을 수 있어!

클라이언트에서 서버에 연결 요청(SYN)을 하는데 이 때 클라이언트는 CLOSED, 서버는 LISTEN 상태이다.
다른 컴퓨터로 전송된 TCP 소켓으로 연결이 이루어지도록 요청하는데 SYN이 두 번째 시스템에서 수신되면 SYN/ACK가 SYN이 요청한 주소로 다시 전송되고 마지막으로는 원래 컴퓨터가 SYN/ACK를 수신하면 최종 ACK가 전송된다.

---

7. HTTP/HTTPS 프로토콜로 요청 및 응답

TCP 연결이 성공하였으니, 서버에 요청했던 페이지를 달라고 하면 서버는 이 요청을 수락할 수 있는 것인지 확인 후 올바른 요청이라고 판단 될 경우 응답을 생성해서 브라우저로 전달한다.

---

8. 브라우저가 응답 해석

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것인데, 보통 그 자원은 HTML 문서로 이루어져 있거나 PDF 파일 또는 이미지 파일 등으로 이루어져 있다.

서버에서 전달받은 응답은 HTML, CSS 등의 코드로 이루어져 있는데, 브라우저가 HTML과 CSS의 명세에 따라 HTML 파일을 해석해서 화면에 표시해준다.
이렇게 요청 받은 내용을 브라우저에 표시하는 일을 하는 걸 렌더링 엔진이라고 한다.

💡 렌더링 엔진의 기본적인 동작 과정
1. DOM 트리 구축을 위한 HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기