[CS] 웹 페이지를 접속할 때 생기는 일

이 질문은 뭐 사실 엄청 유명한 면접 단골 질문인건 다들 알거다. 나도 대충은 알지만 정확히 모르기에 정리하고자 한다.

 

1. 브라우저 창에서 URL 입력

• 주소창에 map.google.com을 입력한다.

2. DNS 조회

• 브라우저는 도메인 이름 시스템(DNS)을 통해 입력된 URL의 도메인 이름을 IP 주소로 변환합니다. DNS는 전화번호부와 같습니다. 우리가 친구들 이름은 외우기 싶지만 각각에 맞는 전화번호는 외우기 어렵기에 연결해주는 시스템입니다. 명령어 nslookup으로 IP주소를 알아낼 수 있습니다.

 

 

일단 첫번째로 변환하기 위해 아래 4가지 캐시를 찾습니다.

브라우저 캐시

• 설명: 브라우저 자체가 저장하는 DNS 캐시입니다. 사용자가 방문한 웹사이트의 DNS 정보가 저장되어 있으며, 이 정보를 통해 이전에 방문한 웹사이트의 IP 주소를 빠르게 찾을 수 있습니다.
• 역할: 사용자가 같은 도메인으로 요청할 때, 브라우저 캐시에서 IP 주소를 조회하여 DNS 조회 시간을 단축합니다.

운영체제 캐시

• 설명: 운영체제에서 관리하는 DNS 캐시입니다. DNS 정보가 운영체제의 네임 서버 캐시에 저장됩니다. 이 캐시는 브라우저 외부에서 저장된 DNS 정보를 제공합니다.
• 역할: 브라우저가 직접 DNS 요청을 수행하기 전에 운영체제의 캐시를 확인하여 IP 주소를 빠르게 찾을 수 있습니다.

라우터 캐시

• 설명: 네트워크 라우터나 게이트웨이가 저장하는 DNS 캐시입니다. 일반적으로 가정이나 사무실의 라우터가 DNS 요청을 수행하고, 그 결과를 로컬 캐시에 저장합니다.
• 역할: 여러 클라이언트가 같은 라우터를 사용할 때, 라우터 캐시에서 DNS 정보를 제공함으로써 네트워크 트래픽을 줄이고 DNS 조회 시간을 단축합니다.

ISP DNS 캐시

• 설명: 인터넷 서비스 제공업체(ISP)가 운영하는 DNS 서버에서 관리하는 캐시입니다. ISP DNS 서버는 많은 사용자로부터의 DNS 요청을 처리하고, 그 결과를 캐시에 저장합니다.
• 역할: ISP의 DNS 서버 캐시에서 DNS 정보를 조회함으로써, 외부 DNS 서버와의 요청을 줄이고, DNS 응답 시간을 줄입니다.

이러한 캐시로 트래픽과 전송 시간을 단축시킬 수 있다.

그러나 이렇게 캐시를 뒤져도 안나오면 ISP의 DNS 서버가 DNS 쿼리로 naver.com을 호스팅하는 서버의 IP주소를 찾는다. 여기서 DNS 서버의 도메인 아키텍쳐를 이해해야한다. 과정을 살펴보자.

1. ISP의 DNS 서버가 루트 네임 서버(Root Name Server)에 쿼리

• 설명: 루트 네임 서버는 DNS 체계의 최상위에 위치하며, 모든 DNS 쿼리의 시작점입니다. 도메인 이름의 최상위 도메인(TLD : Top Level Domain) 정보를 가지고 있습니다.
• 과정:
  1. ISP의 DNS 서버는 도메인 이름을 최상위 도메인(TLD) 부분(.com, .net, .org 등)으로 분리합니다.
  2. 루트 네임 서버에 maps.google.com의 최상위 도메인인 .com에 대한 정보를 요청합니다.
  3. 루트 네임 서버는 .com 도메인을 담당하는 TLD 네임 서버의 주소를 반환합니다.

2. ISP의 DNS 서버가 TLD 네임 서버에 쿼리

• 설명: TLD 네임 서버는 특정 최상위 도메인(.com, .net 등)을 관리하는 서버입니다. 이 서버는 해당 TLD 하위에 있는 도메인(예: google.com)에 대한 정보를 가지고 있습니다.
• 과정:
  1. ISP의 DNS 서버는 TLD 네임 서버에 google.com 도메인에 대한 정보를 요청합니다.
  2. TLD 네임 서버는 google.com을 관리하는 권한이 있는 네임 서버(Authoritative Name Server)의 주소를 반환합니다.

3. ISP의 DNS 서버가 권한이 있는 네임 서버에 쿼리

• 설명: 권한이 있는 네임 서버는 특정 도메인에 대한 최종 정보를 가지고 있는 서버입니다. 이 서버는 google.com 도메인에 대한 완전한 DNS 레코드를 관리합니다.
• 과정:
  1. ISP의 DNS 서버는 반환된 권한이 있는 네임 서버에 maps.google.com에 대한 정보를 요청합니다.
  2. 권한이 있는 네임 서버는 maps.google.com에 해당하는 정확한 IP 주소(예: 172.217.3.110)를 반환합니다.

4. IP 주소 반환 및 캐싱

• ISP의 DNS 서버는 받은 IP 주소를 클라이언트(즉, 사용자의 브라우저)에게 반환합니다.
• 반환된 IP 주소는 ISP의 DNS 서버와 클라이언트의 운영체제 및 브라우저에 캐시됩니다. 이 캐시는 설정된 TTL(Time To Live) 동안 유지되며, 동일한 URL에 대한 후속 요청 시 더 빠른 응답을 제공합니다.

5. 브라우저가 웹 서버에 요청 전송

• 클라이언트의 브라우저는 받은 IP 주소를 사용해 maps.google.com의 웹 서버에 직접 HTTP(S) 요청을 보냅니다.
• 웹 서버는 요청된 페이지(예: Google Maps)를 처리하여 브라우저에게 응답합니다.

 

이렇게 성공적으로 DNS에서 IP주소를 찾았다면 이제 다음단계로 넘어갈 수 있다.

 

3. TCP 연결 설정

TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)는 인터넷 프로토콜 스위트에서 데이터를 전송하는 데 사용되는 두 가지 주요 전송 계층 프로토콜. HTTP에서 주로 사용된다.

• IP 주소가 확인되면, 브라우저는 서버와 TCP 연결을 설정합니다. 이때 3-way 핸드셰이크(TCP Handshake)를 통해 연결이 이루어집니다.

과정은 간단하게 아래 3단계로 표현할 수 있습니다.

1. 클라이언트는 인터넷을 통해 서버에 SYN 패킷을 보내 새 연결이 가능한지 여부를 묻는다.
2. 서버에 새 연결을 수락할 수 있는 열린 포트가 있는 경우, SYN/ACK 패킷을 사용하여 SYN 패킷의 ACK(승인)으로 응답한다.
3. 클라이언트는 서버로부터 SYN/ACK 패킷을 수신하고 ACK 패킷을 전송하여 승인한다.

좀 더 자세한 설명은 추후 작성하겠습니다.

 

이렇게 잘 연결되면 요청을 전송할 수 있는 다음 단계로 넘어갈 수 있습니다. 이제 우리가 잘 아는 백엔드를 설계할때 고려하는 상황입니다.

4. HTTP(S) 요청 전송

• 연결이 설정된 후: TCP 연결이 성공적으로 설정되면, 브라우저는 서버로 HTTP 또는 HTTPS 요청을 전송합니다.
• 요청 구성 요소:
  • HTTP 메서드: 요청이 어떤 작업을 수행할 것인지를 나타냅니다. 일반적으로 GET(데이터 조회), POST(데이터 생성), PUT(데이터 갱신), DELETE(데이터 삭제) 등이 사용됩니다.
  • URL: 브라우저가 요청하는 리소스의 경로입니다. 예를 들어, https://www.example.com/index.html의 /index.html이 URL 경로입니다.
  • 헤더 정보: 요청과 관련된 메타데이터를 포함합니다. 여기에는 클라이언트의 브라우저 정보(User-Agent), 인증 정보(쿠키, 토큰), 요청의 콘텐츠 유형(Content-Type), 캐시 제어 정보 등이 포함될 수 있습니다.
  • 본문 데이터: 주로 POST나 PUT 요청에서 사용되며, 서버로 전송할 데이터가 포함됩니다. 예를 들어, 사용자가 입력한 폼 데이터가 본문에 포함될 수 있습니다.
• HTTPS: 만약 요청이 HTTPS를 사용하면, 이 과정에서 데이터는 암호화된 채널을 통해 전송됩니다. SSL/TLS 프로토콜이 사용되어 데이터의 기밀성과 무결성을 보장합니다.

5. 서버에서 요청 처리

• 서버에서 요청 수신: 서버는 브라우저로부터 수신한 HTTP 요청을 해석하고, 요청된 리소스나 작업을 처리합니다.
• 정적 리소스 처리:
  • 정적 파일: 서버가 웹 서버(예: Nginx, Apache)에 의해 호스팅되는 HTML, CSS, JavaScript 파일이나 이미지와 같은 파일을 반환하는 경우입니다.
  • 처리 과정: 서버는 요청된 파일을 디스크에서 찾아 HTTP 응답에 포함시켜 브라우저로 전송합니다.
• 동적 요청 처리:
  • 서버 측 로직: 요청된 리소스가 동적 콘텐츠를 생성해야 하는 경우, 서버 측 애플리케이션(예: Node.js, Django, Spring)이 요청을 처리합니다.
  • 데이터베이스 연동: 서버는 요청에 따라 데이터베이스에 접근해 데이터를 조회, 삽입, 갱신, 삭제할 수 있습니다. 예를 들어, 사용자의 프로필 정보를 조회하는 요청이 있을 수 있습니다.
  • 외부 API 호출: 서버가 다른 서비스의 API를 호출해 데이터를 가져오거나 외부 서비스와 상호작용할 수도 있습니다. 예를 들어, 날씨 정보를 제공하기 위해 다른 서비스의 API를 호출할 수 있습니다.

6. 응답 생성 및 전송

• 응답 구성: 서버는 브라우저의 요청에 대한 응답을 생성하고 HTTP 응답 메시지로 반환합니다.
  • 상태 코드: 서버가 요청을 처리한 결과를 나타냅니다.
    • 2xx: 성공 (200 OK: 요청 성공, 201 Created: 새 리소스 생성 등).
    • 4xx: 클라이언트 오류 (404 Not Found: 리소스를 찾을 수 없음, 401 Unauthorized: 인증 실패 등).
    • 5xx: 서버 오류 (500 Internal Server Error: 서버 내부 오류).
  • 응답 헤더: 응답과 관련된 정보를 포함합니다. 여기에는 콘텐츠 유형(Content-Type), 캐시 제어(Cache-Control), 서버 정보(Server), 쿠키 설정(Set-Cookie) 등이 포함될 수 있습니다.
  • 응답 본문: 실제 데이터가 포함된 부분입니다.
    • HTML: 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다.
    • JSON/XML: API 응답으로 자주 사용되는 데이터 포맷입니다.
    • 파일: 이미지, PDF, 동영상 등 다른 종류의 파일일 수도 있습니다.

7. 브라우저에서 응답 처리

• HTML 해석 및 렌더링:
  • HTML 문서 파싱: 브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model)을 구성합니다. DOM은 HTML의 각 요소를 트리 구조로 표현한 것입니다.
• 추가 리소스 로드:
  • 이미지, CSS, JS 파일: HTML 문서에 링크된 외부 리소스를 브라우저가 추가로 요청하여 로드합니다.
  • 비동기 요청: JavaScript는 비동기로 추가적인 데이터 요청을 서버에 보낼 수 있으며, 이를 통해 페이지를 새로고침하지 않고도 데이터를 갱신할 수 있습니다.
• 페이지 완성: 모든 리소스가 로드되고 스크립트가 실행된 후, 브라우저는 완전한 웹 페이지를 사용자에게 표시합니다.