Interview/Network

웹브라우저에서 도메인을 접근하기 위한 내부 트래픽 로직

김 정출 2024. 9. 28. 10:54

웹브라우저에서 도메인을 접근하기 위한 내부 트래픽 로직

웹브라우저가 특정 도메인에 접근할 때 내부적으로 발생하는 트래픽 로직은 여러 단계를 거치며, 이 과정에서 DNS 요청, 네트워크 통신, 그리고 여러 프로토콜이 사용됩니다. 아래는 웹브라우저가 도메인에 접근하는 전체 흐름을 간단히 설명한 것입니다.

1. URL 입력 및 파싱

  • 사용자가 브라우저에 URL을 입력하면, 브라우저는 해당 URL을 파싱합니다.
  • URL은 보통 다음과 같은 형식을 따릅니다: https://www.example.com:443/path?query=abc#fragment
    • https : 프로토콜 (HTTP, HTTPS)
    • www.example.com : 도메인
    • 443 : 포트 번호 (생략되면 기본값 사용)
    • /path, ?query=abc, #fragment : 경로, 쿼리 파라미터, 프래그먼트(앵커)

2. 캐시 확인

  • 브라우저는 로컬 캐시를 먼저 확인합니다. 만약 캐시에 해당 리소스가 있으면, 서버에 요청을 보내지 않고 캐시된 데이터를 사용합니다.
    • DNS 캐시 : 도메인에 해당하는 IP 주소가 브라우저 또는 운영체제의 DNS 캐시에 존재하는지 확인.
    • HTTP 캐시 : 이전에 받아놓은 웹 페이지나 리소스가 만료되지 않은 상태인지 확인.

3. DNS 해석 (Domain Name Resolution)

  • 브라우저가 도메인(example.com)을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보냅니다.
  • 요청 과정:
    1. 브라우저가 운영체제의 DNS 캐시를 먼저 확인.
    2. 캐시에 없으면, 로컬 DNS 리졸버(DNS 클라이언트)가 DNS 서버(보통 ISP 제공)로 요청을 전송.
    3. DNS 서버가 해당 도메인의 IP 주소를 반환.
    4. 반환된 IP 주소는 브라우저와 운영체제에 캐시됩니다.

4. TCP 연결 (3-Way Handshake)

  • 브라우저는 DNS 요청을 통해 얻은 IP 주소와 포트(일반적으로 80번 포트는 HTTP, 443번 포트는 HTTPS)로 TCP 연결을 시도합니다.
  • TCP 3-Way Handshake 과정:
    1. 클라이언트가 서버에 SYN 패킷을 전송하여 연결 요청.
    2. 서버가 SYN-ACK 패킷으로 응답.
    3. 클라이언트가 ACK 패킷을 전송하면 연결이 성립.

5. TLS 핸드셰이크 (HTTPS인 경우)

  • 만약 URL이 HTTPS 프로토콜을 사용한다면, TLS (전 Transport Layer Security) 핸드셰이크가 이루어집니다.
  • TLS 핸드셰이크 과정:
    1. 클라이언트와 서버는 서로 암호화된 통신을 하기 위한 키 교환 및 인증서 교환을 합니다.
    2. 서버는 SSL/TLS 인증서를 클라이언트에 전송하고, 클라이언트는 이를 확인합니다.
    3. 키가 협상되고 안전한 암호화 통신 채널이 생성됩니다.

6. HTTP 요청 전송

  • 연결이 완료되면 브라우저는 서버에 HTTP 요청을 보냅니다. 이때, 요청의 기본 구조는 다음과 같습니다:
    • 요청 라인: GET /path HTTP/1.1
    • 헤더: 브라우저 정보, 쿠키, 인증 정보, 콘텐츠 형식 등
    • 바디: POST 요청 등에서 필요한 데이터가 여기에 포함됩니다.

7. 서버 응답 수신

  • 서버는 브라우저의 요청을 처리한 후, 응답을 반환합니다. 응답은 다음과 같은 구조를 가집니다:
    • 응답 라인: HTTP/1.1 200 OK
    • 헤더: 응답의 메타데이터 (콘텐츠 타입, 쿠키, 캐시 정보 등)
    • 바디: 실제 웹 페이지나 리소스 (HTML, CSS, JS 등)

8. 콘텐츠 렌더링

  • 브라우저는 서버로부터 받은 응답을 분석하여 웹 페이지를 렌더링합니다.
  • 이 과정에서 HTML, CSS, JS 파일이 파싱되고, 추가적인 리소스(이미지, 비디오 등)가 필요하면 추가 HTTP 요청이 발생합니다.

9. 추가 요청 및 처리

  • 페이지 로드 과정에서 브라우저는 추가로 필요한 리소스에 대해 더 많은 HTTP 요청을 보낼 수 있습니다.
  • 이런 추가 요청은 비동기로 발생할 수 있으며, 사용자가 상호작용할 때도 새로운 요청이 발생할 수 있습니다 (예: AJAX 요청).

10. 연결 종료

  • 페이지가 완전히 로드되면 서버와의 연결은 종료되며, Keep-Alive 헤더에 따라 연결이 유지될 수 있습니다.

이와 같은 단계를 통해 브라우저는 사용자가 입력한 URL에 접근하여 웹 페이지를 가져오고, 화면에 렌더링합니다.