[cs 스터디] 2-5. HTTP - HTTP/1.0, HTTP/1.1

YooJeeun·2025년 1월 3일

cs 스터디

목록 보기

23/65

기본적으로 HTTP는 전송 계층 위에 있는 애플리케이션 계층으로서 웹 서비스 통신에 사용된다.

HTTP/1.0

HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계 되었다. 수명이 짧은 연결이라고 함. HTTP 요청은 자체 요청에서 완료가 된다. -> 서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속 해서 열어야 하기 때문에 RTT가 증가하는 단점이 있다.

RTT(Round Trip Time): 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간 = 패킷 왕복 시간

RTT의 증가를 해결하기 위한 방법

연결할 때마다 RTT가 증가 -> 서버에 부담이 가고 사용자 응답 시간이 길어지게 된다.
이를 해결하기 위한 방법

이미지 스플리팅
코드 압축
이미지 Base64 인코딩
방식을 사용하곤 했다.

이미지 스플리팅
많은 이미지를 다운받게 되면 과부하가 걸리기 때문에 많은 이미지가 합쳐 있는 하나의 이미지를 다운로드 받고, 이를 기반으로 background-image의 position을 이용하여 이미지를 표기하는 방법이다.

#icons>li>a {
    background-image: url("icons.png");
    width: 25px;
    display: inline-block;
    height: 25px;
    repeat: no-repeat;
}
#icons>li:nth-child(1)>a {
    background-position: 2px -8px;
}
#icons>li:nth-child(2)>a {
    background-position: -29px -8px;
}

코드 압축
코드를 압축해서 개행 문자, 빈칸을 없애서 코드의 크기를 최소화 하는 방법이다.

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

위 코드를 아래 처럼 바꾸는 방법이다.

const express=require("express"),app=express(),port=3e3;app.get("/",(e,p)=>{p.send("Hello World!")}),app.listen(3e3,()=>{console.log("Example app listening on port 3000")});

이미지 Base64 인코딩
이미지 파일을 64진법으로 이루어진 문자열로 인코딩 하는 방법이다.
서버와의 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다는 장점이 있다. 하지만 Base64 문자열로 변환할 경우 37% 정도 크기가 더 커지는 단점이 있다.

인코딩: 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 방식이다.

HTTP/1.1

HTTP/1.0의 단점을 해결하기 위해 나옴.
1. 매번 TCP 연결을 하는 것이 아니라 한 번 TCP 초기화를 한 후에 keep-alive라는 옵션으로 여러 개의 파일을 송수신 할 수 있게 바뀌었다.
HTTP/1.0에서도 있었지만 표준화가 되어있지 않았고 1.1부터 표준화 되어 기본 옵션으로 설정되었다.

HTTP/1.0은 서버가 하나의 호스트만 가진다고 가정하기 때문에 HTTP/1.0은 헤더에 호스트를 포함하지 않았다. 이때문에 HTTP/1.0은 하나의 IP에 하나의 호스트만 가질 수 있었다.
그러나 사실 서버는 여러개의 호스트를 가질 수 있으며 이런 유연성을 위해 HTTP/1.1은 헤더에 특정 호스트를 포함할 수 있게 변경되었으며 항상 호스트를 포함해서 요청하도록 바뀌었다.
대역폭 최적화가 되었다. HTTP/1.0의 경우 어떠한 파일을 다운로드 받다가 연결이 끊기면 다시 다운로드 받는 것은 불가능 했다. 이를 다시 다운로드 받을 수 있게 바뀌었다.
한번 발생하면 그 다음부터는 3-웨이 핸드셰이크가 발생하지 않지만 문서 안에 포함된 다수의 리소스(이미지, css 파일, script 파일)를 처리하려면 요청할 리소스 개수에 비례해서 대기 시간이 길어지는 단점이 있다.