[Network] HTTP & Evolution - 1

뚜비·2023년 5월 2일

Network

목록 보기

5/6

HTTP(HyperText Transfer Protocol)

HTTP는 애플리케이션 계층의 프로토콜로 클라이언트(ex. 크롬 브라우저)가 서버에 웹 요청(HTTP 요청)을 보내면 서버가 응답 메세지(HTTP 응답)를 교환하는 프로토콜
www(월드 와이드 웹)를 이용할 때 사용

🤔 잠깐 HTTP는 사실...
HTTP 프로토콜은 처음에 하이퍼텍스트 문서(다른 문서로의 링크를 담은 문서)를 전송할 의도로 만들어졌음
하지만 해당 프로토콜이 다른 문서 유형을 전송하는데 사용 될 수 있음을 깨달았고 HTTP라는 이름을 바꾸기에 너무 늦었다고..
기본문법

GET /page.html // [HTTP 메서드]  [원하는 리소스]

HTTP 서버의 default 포트 번호 : 80
HTTP 클라이언트는 OS가 주는 임시할당 포트번호 사용
TCP(연결지향, 신뢰적 프로토콜)을 이용

HTTP/1.0

HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계 → RTT 증가를 불러옴
HTTP 헤더를 도입

EX) HTTP GET 요청

GET /page.html HTTP/1.0↵
Header1: Value1↵
Header2: Value2↵
↵

전형적인 HTTP/1.0 GET 요청은 다음과 같다.

GET /page.html HTTP/1.0↵
Accept: text/html,application/xhtml+xml,image/jxr/,*/*↵
Accept-Encoding: gzip, deflate, br↵
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6↵
Connection: keep-alive↵
Host: www.example.com↵
User-agent: MyAwesomeWebBrowser 1.1↵
↵

또는 헤더 없이

GET /page.html HTTP/1.0↵
↵

RTT 증가

서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문에 RTT가 증가하는 단점이 있음

🤔 용어 정리

RTT
패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간이며 패킷 왕복 시간

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

매번 연결할 때마다 RTT가 증가하니 서버에 부담이 많이 가고 사용자 응답 시간이 길어진다는 문제가 발생 이를 위해 다음과 같은 해결방법이 존재

1. 이미지 스플리팅(Image splitting)
많은 이미지를 다운로드받게 되면 과부하가 걸린다.
따라서 많은 이미지가 합쳐 있는 하나의 이미지를 다운로드받고, 이를 기반으로 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;
}

위와 같은 icon 이미지들을 각각 이미지 파일로 분리하여 사용하는 것이 아닌 하나의 이미지 파일로 사용 → background-image: url("icons.png");)
background-position 등을 기반으로 각 이미지를 설정

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

예를 들어 다음과 같은 코드가 있다

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")});

이렇게 개행 문자, 띄어쓰기 등이 사라져 코드가 압축되면 코드 용량이 줄어든다

3. 이미지 Base64 인코딩

이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법

import cv2
import base64
img = cv2.imread('test_image.jpg') #이미지를 읽고
jpg_img = cv2.imencode('.jpg', img) # Base64로 인코딩
b64_string = base64.b64encode(jpg_img[1]).decode('utf-8')

장점 : 서버와의 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다
단점 : Base64 문자열로 변환할 경우 37% 정도 크기가 더 커진다

🤔 용어 정리

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

HTTP/1.1

HTTP/1.0에서 발전한 것이 바로 HTTP/1.1 (지속적 연결, 필수 서버 헤더, 개선된 캐싱 옵션, 청크 인코딩 등)

지속적인 연결

매번 TCP 연결을 하는 것이 아니라 새로운 Connection 헤더(header)로 해결
→ TCP 최초 초기화
→ 헤더의 keep-alive라는 옵션을 지정 == 클라이언트는 서버에 추가적인 요청 전송을 허용하고자 연결을 그대로 두라고 요청
→ 여러 개의 파일을 송수신ㅜ
어떤 이유로든 연결을 종료하고 싶다면 Connection: Close 헤더를 응답에 포함시켜야 함

GET /page.html HTTP/1.0
Connection: Keep-Alive

🤔 잠깐 기존의 HTTP/1.0 연결방식은?
HTTP는 단일 요청 및 응답 프로토콜(TCP기반)

1. 클라이언트가 연결을 맺고
2. 리소스 요청
3. 응답 받으면 연결 종료
즉, 요청을 하려면 매번 TCP 연결을 해야 함!

CF) HTTP/1.0에서도 keep-alive가 있었지만 표준화가 되어 있지 않았고 HTTP/1.1부터 표준화가 되어 기본 옵션으로 설정

한 번 TCP 3-웨이 핸드셰이크가 발생하면 그다음부터 발생하지 않음.
connection을 여러 개 맺어서 동시에 파일을 받을 수 있음.
단점 : 문서 안에 포함된 다수의 리소스(이미지, css 파일, script 파일)를 처리하려면 요청할 리소스 개수에 비례해서 대기 시간이 길어짐

HOL Blocking

HOL Blocking(Head Of Line Blocking)은 네트워크에서 같은 큐(Queue) 혹은 같은 연결에 있는 패킷이 그 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상
HTTP/1.1의 요청-응답 쌍은 항상 순서를 유지하고 동기적으로 수행
image.jpg와 styles.css, data.xml을 다운로드받을 때 보통은 순차적으로 잘 받아지지만 image.jpg가 느리게 받아진다면 그 뒤에 있는 것들이 대기하게 되며 다운로드가 지연되는 상태가 됨

무거운 헤더 구조

HTTP/1.1의 헤더에는 쿠키 등 많은 메타데이터가 들어 있고 압축이 되지 않아 무거움.

HTTP/2

SPDY 프로토콜에서 파생된 HTTP/1.x보다 지연 시간을 줄이고 응답 시간을 더 빠르게 할 수 있음
멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위 처리를 지원하는 프로토콜

멀티플렉싱(multiplexing)

여러 개의 스트림을 사용하여 송수신
이를 통해 특정 스트림의 패킷이 손실되었다고 하더라도 해당 스트림에만 영향을 미치고 나머지 스트림은 멀쩡하게 동작
단순히 browser가 하나의 connection 상에서 동시에 여러 request를 보내는 기술, 받을 때의 순서는 신경쓰지 않는다.
동시에 여러 개의 컨텐츠를 받지만 queue와 같은 기술을 통해서 하나의 connection만으로 content를 동시에 받을 수 있다.

🤔 용어 정리

스트림(stream)
시간이 지남에 따라 사용할 수 있게 되는 일련의 데이터 요소를 가리키는 데이터 흐름

위의 사진은 하나의 연결 내 여러 스트림을 캡처한 모습이다. 병렬적인 스트림(stream) 들을 통해 데이터를 서빙. 또한, 스트림 내의 데이터들도 쪼개져 있음.
애플리케이션에서 받아온 메시지를 독립된 프레임으로 조각내어 서로 송수신한 이후 다시 조립하며 데이터를 주고받음

이를 통해 단일 연결을 사용하여 병렬로 여러 요청을 받을 수 있고 응답을 줄 수 있음. 이렇게 되면 HTTP/1.x에서 발생하는 문제인 HOL Blocking을 해결할 수 있음