네트워크

웹 통신 흐름

정한_s 2023. 7. 1. 23:37

웹 브라우저와 웹 서버간이 통신 프로세스는 여러 단계로 나뉩니다. 브라우저가 웹 페이지를 요청하면, 그 요청은 DNS 부터 시작해서 최종적으로 요청, 응답까지 도달 합니다.

 

웹의 통신 흐름의 각 요소를 살펴보겠습니다.

1. 사용자의 브라우저 입력

사용자의 요청을 브라우저에서 검증하여 유효한지 확인하는 단계입니다. 입력된 URL을 분석하여 여러 요소를 파악합니다.

 

URL 문법

scheme://[userinfo@]host[:port][/path][?query][#fragment]
ex) https://www.google.com:443/search?q=hello&hl=ko

• scheme : 프로토콜을 명시합니다
• urderinfo : url에 사용자 정보를 포함해서 인증합니다. 거의 사용하지 않습니다
• host: 호스트명(도메인명 or IP)
• port : 접속 포트 (http:80, https:443)
• path: 리소스 경로를 나타냅니다
• query: key=value 형태로 정보를 제공합니다
• fragment: html 내부 북마크에서 사용합니다, 서버에 전송하는 정보가 아닙니다

 

이를 통해 브라우저는 다양한 정보를 얻습니다.

이후 브라우저는 먼저 자체 캐시를 확인해서 요청된 URL에 대한 정보(예: 캐시된 웹 페이지, 이미지, 스크립트 등)가 이미 있는지 확인합니다. 캐시된 정보가 있고 이 정보가 아직 유효하다면, 브라우저는 이 정보를 사용하여 웹 페이지를 렌더링하고 다음 단계를 생략할 수 있습니다

 

캐시 예시
초기 요청

캐시된 요청 존재 하는 경우

  • 그렇다면 캐시된 정보는 어떻게 유효한지 알 수 있을 까?
    웹 서버는 캐시 가능한 자원에 대한 응답으로 캐시 제어 방법을 명시하는 특정 HTTP 헤더를 보냅니다. 이에는 Cache-Control, ETag, Last-Modified 등이 있습니다.
    • Cache-Control: 이 헤더는 웹 페이지 또는 다른 자원이 캐시될 수 있는지, 그리고 캐시된 자원이 얼마 동안 유효한지를 나타내는 지시자를 포함합니다. 예를 들어, Cache-Control: no-cache는 브라우저에게 항상 원본 서버로 부터의 검증이 필요함을 알립니다. Cache-Control: private, max-age=3600는 해당 자원을 3600초 동안 캐시할 수 있고, 캐시된 버전은 원본 사용자만 사용할 수 있음을 나타냅니다.
    • ETag: ETag 헤더는 특정 버전의 자원을 고유하게 식별하는 토큰을 제공합니다. 브라우저가 서버에 동일한 자원의 요청을 보낼 때, If-None-Match 헤더에 이전 ETag 값을 포함시킬 수 있습니다. 서버는 이 값을 확인하고, 만약 값이 같다면 304 Not Modified 상태 코드와 함께 본문 없이 응답을 보내고, 다르다면 새로운 자원과 함께 200 OK 응답을 보냅니다.
    • Last-Modified: 이 헤더는 자원이 마지막으로 변경된 시간을 나타냅니다. 브라우저는 이 값을 If-Modified-Since 헤더에 포함시켜 요청을 보낼 수 있습니다. 서버는 이 값과 자원의 실제 수정 시간을 비교하고, 변경되지 않았다면 304 Not Modified를 반환하고, 변경되었다면 새로운 자원과 함께 200 OK 응답을 보냅니다.

(추가)
DNS Prefetching 기능 : 최신 브라우저에는 사용자가 링크를 클릭할 것으로 예상되는 URL에 대해 미리 DNS lookup을 수행 할 수 있습니다.
HSTS :웹 서버가 브라우저에게 모든 통신을 HTTPS를 사용해야 한다고 지시하는 보안 기능입니다. 만약 브라우저가 해당 사이트로부터 HSTS 정책을 받았다면, 브라우저는 HTTP 연결을 HTTPS로 강제로 변경합니다.

2. 도메인 이름 IP 주소 변경

컴퓨터가 도메인 이름을 IP 주소로 변환할 때, 다음의 순서로 이루어집니다.

  1. hosts 파일 확인: 운영 체제는 먼저 hosts 파일을 확인하여 요청된 도메인 이름에 대한 IP 주소가 있는지 검사합니다. 이 파일에 해당 도메인에 대한 엔트리가 있으면, 해당 IP 주소가 사용되고, DNS lookup은 수행되지 않습니다.
  2. 로컬 DNS 캐시 확인: hosts 파일에 해당 엔트리가 없으면, 운영 체제는 로컬 DNS 캐시를 확인하여 이전에 찾아둔 IP 주소가 있는지 확인합니다.
  3. DNS Lookup 수행: hosts 파일과 로컬 DNS 캐시 모두 해당 도메인 이름에 대한 정보가 없으면, 운영 체제는 DNS 서버에 DNS lookup을 수행합니다.
    어떤 DNS 서버에 질의를 보낼지는 etc/resolv.conf 파일에 지정된 DNS 서버에 대해 질의를 수행합니다.
    DNS의 질의는 Root → TLD → 도메인 순서대로 질의 합니다.

DNS는 사람이 이해하기 쉬운 도메인 이름을 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 시스템 입니다.

3. TCP/IP 연결

DNS Lookup이 완료되면, 브라우저는 해당 IP 주소로 TCP/IP 연결을 생성합니다. 이 과정에서는 3-way handshake가 일어나게 됩니다. (SYN -> SYN + ACK -> ACK)

4. HTTP(S) 요청/응답

TCP 연결이 성공적으로 수립되면, 브라우저는 HTTP(Hypertext Transfer Protocol) 또는 HTTPS(HTTP Secure) 요청을 서버로 보냅니다. 요청 메서드(GET, POST 등), 헤더, 쿠키, 쿼리 매개변수 등이 이 요청에 포함될 수 있습니다.

5. 웹 페이지 렌더링

브라우저는 받은 HTML, CSS, JavaScript를 해석하고 렌더링하여 사용자에게 웹 페이지를 표시합니다. 이 과정에서 추가적인 요청이 필요한 경우(예: 이미지, CSS, JavaScript 파일 등) 다시 HTTP(S) 요청을 보내게 됩니다

6. 세션 유지

사용자가 웹 사이트 내에서 다른 페이지로 이동할 경우, 웹 서버와의 연결이 유지되거나 새로운 연결이 생성됩니다. 이는 HTTP가 무상태(stateless) 프로토콜이기 때문에, 웹 서버가 이전 요청에 대한 정보를 기억하지 않습니다. 따라서 쿠키, 세션, 토큰 등을 사용하여 사용자 상태를 유지합니다.

 

7. 연결 종료

사용자가 웹 사이트를 떠나거나, 일정 시간동안 통신이 없을 경우, 연결은 종료됩니다.