개발 학습 실습실

이 사이트의 실습은 자바스크립트를 켜야 움직입니다. 아래는 같은 내용을 글로 적은 것입니다.

공부 › 네트워크 › HTTP

HTTP/1.1, 2, 3

파일 30개를 받을 때 버전마다 무엇이 다른가

웹 페이지 하나는 수십 개의 파일(스크립트, 스타일, 이미지)로 이뤄집니다. HTTP/1.1은 연결 하나로 한 번에 하나씩만 받아서 줄을 서야 하고, HTTP/2는 연결 하나에 여러 요청을 섞어 보냅니다. HTTP/3는 그 밑의 전송 계층까지 바꿨습니다.

일부만 실행으로 확인 · HTTP/1.1·2는 브라우저로 확인, HTTP/3와 유실은 재현 못 함

이 실습에 나오는 개념

HTTP/1.1, HTTP/2, HTTP/3
HTTP/1.1은 한 연결에서 요청을 하나씩 차례로 처리한다. HTTP/2는 하나의 연결에서 여러 요청과 응답을 동시에 주고받고(다중화) 헤더를 압축한다. HTTP/3는 TCP 대신 UDP 기반의 QUIC 프로토콜을 사용해 연결 수립을 빠르게 하고, 패킷 하나가 유실되었을 때 다른 요청까지 지연되는 문제를 줄인다.
TCP와 UDP
인터넷에서 데이터를 전송하는 두 가지 대표적인 방식이다. TCP는 통신 전에 연결을 맺고, 데이터가 빠짐없이 순서대로 도착하도록 보장하며, 문제가 생기면 다시 보낸다. UDP는 연결 없이 데이터를 보내며 도착 여부나 순서를 보장하지 않는 대신 가볍고 빠르다. HTTP/1.1과 HTTP/2, 데이터베이스 연결은 TCP를, 실시간 영상·음성이나 DNS는 UDP를 주로 쓴다.
3-way handshake
TCP 연결을 맺을 때 거치는 세 단계의 과정이다. 클라이언트가 연결 요청(SYN)을 보내고, 서버가 수락과 함께 자신의 연결 요청(SYN+ACK)을 보내며, 클라이언트가 이를 확인(ACK)한다. 양쪽이 서로 보내고 받을 수 있는 상태임을 확인한 뒤 데이터 전송을 시작한다.

이렇게 바꿔 보세요

처음 설정으로 실행하면

  1. HTTP/1.1에서는 연결 하나가 요청 하나를 보내고 응답을 다 받아야 다음 요청을 보낼 수 있습니다. 브라우저는 속도를 내려고 같은 서버에 연결을 최대 6개까지 맺습니다. 연결마다 TCP와 TLS 핸드셰이크가 따로 듭니다.
  2. 1번째 묶음: 연결 6개가 파일을 하나씩 맡아 받습니다. 나머지 24개는 연결이 빌 때까지 기다립니다.
  3. 2번째 묶음: 연결 6개가 파일을 하나씩 맡아 받습니다. 나머지 18개는 연결이 빌 때까지 기다립니다.
  4. 3번째 묶음: 연결 6개가 파일을 하나씩 맡아 받습니다. 나머지 12개는 연결이 빌 때까지 기다립니다.
  5. 4번째 묶음: 연결 6개가 파일을 하나씩 맡아 받습니다. 나머지 6개는 연결이 빌 때까지 기다립니다.
  6. 5번째 묶음: 연결 6개가 파일을 하나씩 맡아 받습니다. 기다리는 파일은 이제 없습니다.
  7. 모든 파일을 받았습니다. 전체 약 560ms.

실행 결과

코드

# application.yml
server.http2.enabled: false        # HTTP/2 (TLS 필요)

# nginx
server {
    listen 443 ssl;
    ...
}

<!-- 페이지 하나가 요청하는 파일: 30개 -->

이 모형의 전제

파일 하나를 받는 데 100ms, 유실된 패킷의 재전송에 200ms, 연결 수립에 HTTP/1.1은 60ms(연결 6개가 동시에), HTTP/2는 30ms, HTTP/3는 20ms가 든다고 가정한 모형입니다. 실제 숫자는 네트워크와 파일 크기에 따라 다르며, 브라우저가 같은 서버에 맺는 HTTP/1.1 연결 수 6개는 주요 브라우저의 기본값입니다. 버전별 특징은 각 표준(RFC 9112, 9113, 9114)의 설명을 따랐습니다. 연결 수에 관한 부분은 실제로 확인했습니다. 실제 브라우저(크로미움 기반)에서 0.3초씩 걸리는 요청 18개를 HTTP/1.1 서버에 동시에 보내니 연결 6개로 최대 6개씩 처리되어 931ms가 걸렸고, HTTP/2(Node 내장 구현)로는 요청 30개가 TCP 연결 1개에서 동시에 처리되어 324ms에 끝났습니다. 패킷 유실 시의 차이와 HTTP/3는 이 PC에서 재현하지 못했습니다.

앞 실습: HTTP 메시지와 상태 코드 · 다음 실습: 쿠키

이 실습에 나오는 개념

이 실습에서 보는 것

설정

코드


      
    


    

      
그림

      

      

    


    

      

      

      

    


  


  

    

      
실행 비교

      

      

    

    

      
이렇게 바꿔 보세요