[네트워크] HTTP/1.0

기본적으로 HTTP는 애플리케이션 계층으로서 웹 서비스 통신에 사용된다. HTTP/1.0에서 HTTP/3까지 발전했는데, HTTP/1.0부터 HTTP/3까지 하나씩 알아보고자 한다.

 

HTTP / 1.0

HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었다. 이러한 설계 때문에 RTT의 증가를 불러왔다.

* RTT : 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간. 즉, 데이터가 전송되는 데 걸리는 시간과 해당 데이터의 수신 확인에 소요되는 시간을 더한 값이다.

서버로부터 파일을 가져올 때마다 TCP의 3-way handshake를 계속해서 하기 때문에 RTT가 증가하는 단점이 있다.

 

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

매번 연결할 때마다 RTT가 증가하면서 서버에 부담이 많이 가고, 사용자 응답 시간이 길어졌다. 이를 해결하기 위해서 다음과 같은 방법을 사용했다.

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

icons.png

#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;
}

위 사진처럼 수많은 아이콘들을 모두 각각의 이미지 파일로 저장해서 사용하는 것이 아니라, 하나의 이미지 파일에 저장된 아이콘들을 background-position 속성을 이용해서 배경의 위치를 조절해주면서 아이콘을 하나씩 사용한다.

이렇게 하면 a 태그에 설정된 25px * 25px 사이즈 안에서 icons.png의 위치를 바꿔가면서 원하는 아이콘으로 설정할 수 있다. 

 

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

const express=require('express')
const app=express()
const port=3000

app.get('/', (req, res) => {
	res.send('Hello Wordl!')
})

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 Wordl!')}),app.listen(3e3,()=>{console.
log('Example app listening on port 3000')});

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

 

• 이미지 Base64 인코딩
  • 이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법이다.
  • 이 방법을 사용하면 서버와의 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다는 장점이 있다.
  • 하지만, Base64 문자열로 변환할 경우 크기가 37% 정도 더 커지는 단점이 있다.
  • 인코딩 : 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 방식