[CS] 브라우저에 www.google.com을 치면 어떤 일이..?

잠깐 멈춰두었던 1일 1CS의 이번 주제는 '네트워크' 의 웹 브라우저 통신 방식입니다!

브라우저에 우리가 아래와 같이 www.google.com을 치면 구글 페이지로 이동하게 될텐데,  그 과정에서 어떤 일들이 일어나는 걸까요?

 

 

1. 사용자가 브라우저에 www.google.com을 친다.

2. 브라우저는 DNS 조회를 통해 캐싱된 기록을 먼저 조회한다.

 

(1) 브라우저 캐시 확인

- 접속한 기록이 있다면 캐시에 저장되는데 이때 IP주소와 TTL값이 포함

* TTL(Time to Live) - 해당 IP 주소가 유효한 기간

- TTL이 만료되지 않았다면, 캐시에서 IP 주소를 가져옴

 

(2) 운영체제 캐시 확인

- systemcall을 통해 접근 가능

 

 

(3) 라우터 캐시 확인

- 브라우저와 운영 체제에도 없을 경우 로컬 네트워크에 있는 라우터로 전달

 

(4) ISP 캐시 확인

 

마지막으로, ISP 캐시를 확인합니다. 만약 위 모든 단계에서 DNS 기록을 찾지 못한다면, 브라우저는 ISP에서 DNS 기록을 탐색

* ISP(Internet Service Provider): SK브로드밴드, KT 등 한국에서 인터넷 서비스를 공급하는 회사

 

-> 모두 없을 경우 3번으로 넘어감

 

3. DNS 서버에 쿼리를 보냄

- 여러 DNS 서버를 계속 왔다갔다 하며 입력한 URL에 대한 IP 주소를 물어보고 다닙니다

(Root -> TLD -> 권한 있는 서버 순으로 탐색)

 

(1) Root 서버: .com에 대한 정보를 반환.

(2) TLD (Top Level Domain) 서버: google.com에 대한 정보를 반환.

(3) 권한 있는 서버: www.google.com의 IP 주소를 반환.

 

브라우저: 반환 받은 IP 주소로 서버에 TCP 연결 요청

 

4. TCP 3-Way Handshake

1. 브라우저 → 서버: SYN 패킷 전송 (연결 요청).

ex) 브라우저: 나 연결 시작하고 싶어

 

2. 서버 → 브라우저: SYN-ACK 패킷 전송 (연결 수락).

ex) 서버: 준비됐어 확인해줘~

 

3. 브라우저 → 서버: ACK 패킷 전송 (연결 확인).

ex) 브라우저: 나도 준비됐어~

 

5. SSL/TLS 핸드 쉐이크 (HTTPS인 경우)

- 브라우저와 서버간 TLS(Transport Layer Security) 핸드 쉐이크 발생

- SSL과 TLS 모두 서버, 애플리케이션, 사용자 및 시스템 간의 데이터를 암호화하는 통신 프로토콜

 

* SSL (Secure Sockets Layer) 은 보안 취약점이 있어 TLS로 거의 대체 되었어요!

 

(1) 브라우저가 서버에 SSL/TLS 인증서를 요청

(2) 서버가 인증서를 브라우저로 전송.

(3) 브라우저가 인증서의 유효성을 검증

(4) 브라우저와 서버는 데이터를 암호화하기 위한 세션 키를 생성하고 공유.

 

-> 한줄 요약: 브라우저와 서버간의 모든 통신이 암호화되어 진행

 

6. HTTP 요청 전송

- 아래의 내용을 담어 브라우저는 HTTP 요청을 서버에 전송

 

* HTTP 메서드: GET (리소스 요청), POST (데이터 전송) 등.

* 헤더(Header): 클라이언트 정보, 쿠키, 인증 토큰, 데이터 타입 등을 포함.

* 바디(Body): POST 요청에만 포함되며, 전송할 데이터를 담음.

 

7. 서버가 요청 처리

 

(1) URL 해석 및 라우팅

• 서버는 요청받은 URL 경로(GET /)와 메서드(GET)를 분석

• 라우팅 시스템에 따라 요청을 처리할 함수(혹은 파일)를 결정

 

(2) 백엔드 작업 수행

• 데이터베이스에서 정보를 조회하거나, 비즈니스 로직을 수행

 

(3) HTTP 응답 생성:

• 요청 처리 결과를 기반으로 응답을 생성

 

• 응답의 주요 구성 요소:

- 상태 코드: 요청 결과를 나타냄 (우리가 흔히 아는 404 Not Found)

- 헤더(Header): 데이터 타입(Content-Type), 캐시 제어(Cache-Control) 등.\

- 바디(Body): 요청한 리소스(HTML, JSON 데이터 등)

 

8.  렌더링

- 렌더링 과정은 아래 글을 참고해주세요 !

 

https://dev-tomato.tistory.com/9

[CS] SPA? 스파 아냐? 😦 SPA vs. MPA, 그리고 웹 렌더링

 

사용자가 보기엔 굉장히 짧은 시간안에 웹사이트가 화면에 그려지지만, 그 뒤엔 이런 과정들이 숨어있었다는 사실,,!

다음 시간엔 에러 코드에 대해 조금 더 자세히 살펴보도록 해요 ! 

 

다음편 예고: 404 NOT FOUND, 에러 코드 종류가 이렇게 많다고?