우리가 만든 서비스는 http/1.1을 사용하는걸 볼 수 있었다.
이에 대해 Lighthouse에서 2.0을 사용하라고 권장했다.
네트워킹의 흐름을 학습하며, 현대 웹의 요구사항에 부적합한 HTTP/1.1을 2.0과 3.0의 멀티플렉싱, 헤더 압축, 서버 푸시와 같은 최신 기능을 통해 속도, 보안, 효율성을 향상시키고, 이를 수치로 직접 비교해보기.
HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받는 서버-클라이언트 모델의 프로토콜.
쉽게 말하면 웹 브라우저가 서버와 통신하는 규칙
HTTP 통신 방법을 더 자세히 알아보자. 먼저 사용자가 웹사이트를 방문하면 브라우저가 웹서버로 리소스를 요청한다. 요청을 받은 웹서버는 HTML, CSS와 같은 리소스를 응답으로 돌려준다. 클라이언트의 요청과 서버의 응답 사이에는 여러 프락시 서버가 있다. 프락시 서버는 캐시를 보관하거나 보안을 위해 서버의 IP 주소를 숨기는 등 다양한 역할을 한다. 이 모든 통신은 안전하게 이뤄지기 위해 TCP(Transmission Control Protocol) 연결을 사용한다.
💡 TCP
TCP는 데이터를 작은 조각(패킷)으로 나누어 전송하며, 각 패킷이 제대로 도착했는지 확인하고, 손실된 패킷은 다시 요청하여 재전송하는 과정을 거칩니다. 예를 들어, 사용자가 웹사이트를 로드할 때 HTML, CSS, 이미지 파일 등 모든 리소스를 정확하고 순서에 맞게 받아야 제대로 표시되는데, TCP가 이 과정을 책임집니다. 이를 통해 HTTP 통신이 끊김 없이 신뢰성 있게 작동할 수 있습니다.
브라우저, 서버가 주고받는 요청과 응답의 형태를 더 자세히 알아보자.
브라우저는 아래와 같은 HTTP 요청을 서버로 보낸다. 첫줄에는 HTTP 요청 메서드, URL 경로, HTTP 프로토콜 버전 정보가 있다. 두 번째 줄부터 모두 HTTP 요청의 헤더이다. key:value
쌍으로 이뤄져있다. 헤더는 웹사이트 도메인의 호스트, 사용자의 브라우저, 언어 등 서버가 필요한 정보를 전달한다.
GET /index.html HTTP/1.1
HOST: example.com
User-Agent: Mozilla/5.0
Accept-Langauage: ko-KR
요청에 문제가 없다면 서버는 아래와 같은 응답을 돌려준다. 첫 줄에는 HTTP 프로토콜 버전 정보와 HTTP 상태코드가 있다. 둘째 줄부터 보이는 key:value
쌍은 모두 헤더이다. 응답의 헤더는 브라우저가 필요한 정보를 전달해준다. 마지막으로 응답의 Body는 브라우저가 요청한 데이터이다. 아래 예시에서는 HTML 데이터를 돌려주고 있다.
HTTP/1.1 200 OK
Date: Sat, 07 Oct 2025 15:59:06 GMT
Server: Apache
Content-Type: text/html
<html>
...
</html>
클라이언트가 서버에 어떤 작업(조회, 생성, 수정, 삭제 등)을 요청할지 지정하는 방식.
GET
: 서버로부터 리소스를 요청하여 데이터를 조회합니다. (읽기 전용)POST
: 서버에 데이터를 전송하여 새로운 리소스를 생성합니다.PUT
: 서버의 리소스를 완전히 대체(갱신)합니다.DELETE
: 서버의 특정 리소스를 삭제합니다.PATCH
: 서버의 리소스의 일부를 수정합니다. (부분 갱신)다른 요청 메소드로 HEAD
OPTIONS
TRACE
CONNECT
도 있지만, 위 5개가 CRUD 작업에 직관적으로 연결되고 REST API 표준에도 적합한 등의 이유로 주로 쓰인다.
HTTP 통신에서 브라우저와 서버는 데이터를 일반 텍스트로 교환한다. HTTP는 데이터를 암호화하지 않고 전송하기 때문에 제3자가 데이터를 가로채고 읽을 수 있다. 보안을 강화하기 위해 HTTP는 HTTPS(Hyper Transfer Protocol Secure)로 확장됐다.
HTTPS는 이름에서도 알 수 있듯이 HTTP의 더 안전한 버전이다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안젆하고 암호화된 연결을 생성한다. HTTPS는 모든 요청 및 응답을 SSL(Secure Socket Layer) 및 TLS(Transport Layer Security) 프로토콜에 따라 암호화한다. 그래서 HTTPS를 사용하면 카드 정보나 비밀번호와 같은 민감한 정보를 보호할 수 있다.
💡 SSL vs TLS
SSL은 HTTPS의 초기 암호화 표준으로 사용되었지만, 현재는 보안이 강화된 TLS가 주로 사용됩니다. TLS는 클라이언트와 서버 간에 암호화 키를 교환하는 핸드셰이크 과정을 통해 안전한 연결을 설정하고, 전송 중인 데이터를 보호합니다. 예를 들어, HTTPS로 웹사이트에 접속하면 TLS가 신용카드 번호나 로그인 정보가 중간에 가로채여도 읽을 수 없도록 암호화합니다.
HTTP/0.9
HTTP/1.0
지속 연결 (Persistent connection)
파이프 라이닝 (pipelining)
💡HOLB (Head Of Line Blocking)
우선순위 원칙에 따라 첫번째 데이터의 응답 속도가 늦어지면 후순위에 있는 데이터 응답 속도도 같이 늦어지는 것.
2.0에서 개선된 점
2.0의 문제점
여전한 RTT
💡RTT (Round Trip Time)
클라이언트가 서버로 패킷을 보내고, 서버가 응답을 보내 다시 클라이언트에 도달하기까지 걸리는 왕복 시간.
TCP 자체의 HOLB
중개자 캡슐화 공격
길다란 커넥션 유지로 인한 개인정보 누출 우려
💡QUIC (Quick UDP Internet Connections)
구글이 개발한 프로토콜로, TCP의 신뢰성과 UDP의 속도를 결합한 새로운 전송 프로토콜. (UDP를 기반으로 추가적인 기능을 구현)
3.0에서 개선된 점
잔존하던 HOLB 현상 해결
패킷 손실 감지에 걸리는 시간 단축
패킷 손실이 발생했을 때 이를 빠르게 감지하고 재전송할 수 있도록 한다.
물론 독립 스트림으로 따로 다뤄서 패킷 손실이 다른 스트림에 영향을 주지는 않지만, 해당 스트림의 복구를 빠르게 해주는 역할을 한다.
향상된 멀티플렉싱
보안 강화
UDP는 신뢰성이 낮다???
TCP와 UDP를 비교했을때, UDP는 기능이 거의 없어서 빠르지만 신뢰성이 낮으므로, 조금 느리더라도 신뢰성이 높은 TCP를 사용했다고 예전에 들어봤을 것이다.
하지만, UDP는 신뢰성이 없는게 아니라 탑재를 안한 것이다. 커스터마이징을 통해 신뢰성도 확보 가능하다.
chrome-extension
프로토콜
data
프로토콜
프로토콜 | 처리 속도 |
---|---|
data 프로토콜 | 서버 요청 없음 → 즉시 처리. 평균 1~2ms 이하. |
HTTP 요청 | DNS 조회 + 서버 요청/응답(대기 시간 포함) → 50~300ms 이상. |
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAU...">
방식 1: 컨테이너 내부 직접 수정 방식
ssh root@223.130.163.180
로 원격 서버에 접속```
sudo docker exec -it refactor-web31-boolock-frontend-1 /bin/sh
```
c. 컨테이너 내부의 Nginx 설정 파일 열기```
vi /etc/nginx/conf.d/default.conf
```
d. HTTP/2.0 적용을 위한 설정 코드 추가.방식 2: 프로젝트 설정 코드 수정
수정 전 nginx.conf
(HTTP/1.1)
server {
listen 80;
server_name boolock.site;
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
server_name boolock.site;
ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application;
gzip_min_length 256;
}
수정 후 nginx.conf
(HTTP/2.0)
server {
listen 80;
server_name boolock.site;
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
http2 on;
server_name boolock.site;
ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application;
gzip_min_length 256;
}
http on;
이 한 줄만 추가됐다.Before
After (유의미한 변화는 없다.)
참고
http://
로 동작Q. “저는 계속 HTTP/1.1 프로토콜이 떠요 ㅠㅠ”
→ 캐시를 지우고 다시 해보세용.
수정 전 nginx.conf
(HTTP/2.0)
server {
listen 80;
server_name boolock.site;
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
http2 on;
server_name boolock.site;
ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application;
gzip_min_length 256;
}
수정 후 nginx.conf
(HTTP/3.0)
server {
listen 80;
server_name boolock.site;
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
http2 on;
http3 on;
quic_retry off;
server_name boolock.site;
ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
ssl_protocols TLSv1.3;
ssl_prefer_server_ciphers off;
add_header Alt-Svc 'h3-23=":443"; ma=86400';
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application;
gzip_min_length 256;
}
h3 연결했는데 왜 일부는 h2로 뜰까?
성능 개선은 미미했지만, 네트워킹 흐름을 공부도 하고 최신 웹 표준 프로토콜로 보안 확보했잖아 한잔해~
🌐 참고 링크
Upgrade your web performance from HTTP/1.1 → 2.0 → 3.0 and showcase the improvements using CapCut APK Pro! Create dynamic videos explaining faster loading speeds, multiplexing, and QUIC protocol with smooth transitions, text overlays, and pro effects. Make complex tech concepts engaging and visually appealing for developers and learners! Click here https://capcutapkpro.app/
HTTP/1.1 → 2.0 → 3.0 업그레이드는 CarX Street Drive와 마찬가지로 속도와 성능을 향상시킵니다. 최신 HTTP/3.0은 빠른 데이터 전송을 지원하여 온라인 멀티플레이어 경험을 개선합니다. 마치 CarX Street Mod APK가 모든 기능을 해제하듯, 최신 프로토콜도 최적화된 웹 연결을 제공합니다. Visit here https://carxstreetdrive.com/
great thanks for sharing, this my blog https://techprim.com/