[CS] HTTP 의 개념과 구성요소

HTTP 란(Hypertext Transfer Protocol) ?

HTTP는 웹 브라우저(클라이언트) 와 서버가 데이터를 통신하고 교환할 수 있는 표준 프로토콜이다.

OSI7 계층 중 애플리케이션 계층 즉 최상위 레이어에 위치하고 있다.

 

HTTP의 특징

1. Stateless (무상태) 

- 요청이 끝나면 클라이언트와 서버간 상태를 유지하지 않습니다.

  * 연결을 안하고 있다는 의미 X, 이전 요청에 대한 상태를 유지 안하고 있다는 의미 입니다.

- HTTP/1.1 부터 keep-alive 를 통해 연결 유지 가능

  * keep-alive : 요청을 처리한 후에도 TCP 연결을 즉시 종료하지 않고 일정시간 유지합니다.

    TCP 는 연결 수립 과 종료 시 3-hand-shake 및 4-hand-shake 방식을 사용하는대, 그 과정의 네트워크 Cost 를 절감하기 위함 입니다.

2. Request - Response 구조

- 클라이언트가 요청을 보내면, 서버가 응답하는 구조입니다.

 * SSE(Server-sent Events) 와 같은 방식 또한, 초기엔 클라이언트가 서버에 HTTP 요청을 보내고, 그 후에 연결을 유지하며 진행하는 방식으로 HTTP 프로토콜 기반입니다.

 * HTTP/2.0 부터 서버에서 추가적인 리소스(CSS, JS) 등을 클라이언트 요청 없이 푸시하는 기능이 추가되었습니다

   단 어떤 리소스가 클라이언트에 필요한 리소스인지 파악하는 것이 모호하기 때문에 많은 브라우저에서 채택 안하고 있는 현실..ㅎ

 

 

HTTP의 버전 및 한줄로 보는 특징

HTTP 는 0.9, 1.0, 1.1, 2.0, 3.0 등 버전이 계속해서 나오고 있으며, 현재는 주로 1.1 혹은 2.0 을 사용 중 이다.

 

* 다른 여러 특징이 있지만, 주관적으로 대표 특징만 뽑아봤습니다.

 

1. HTTP/1.1 ->  Keep-alive

2. HTTP/2.0 ->  Multiplexing (병렬 요청/응답)

3. HTTP/3.0 -> UDP

 

 

 

HTTP 구성요소 및 예제 응답 코드

1. REQUEST

Startline

- Method, Path, Version 등 

Header

- 요청 관련 메타데이터

- Content-type, Content-Length, Auth(필요시), Cache , Origin 등등

Body

- 요청 데이터

2. RESPONSE

Stateline

- 요청에 대한 상태, Status code 등

Header

- 응답 메타데이터

-  Content-type, Content-Length, Auth(필요시) 등등

Body

- 응답 데이터

 

 

실제로 내가 개발 중인 프로젝트에서 해당 내용을 확인해봤다.

 

 REQUEST

console.log("Method:", req.method);
console.log("Protocol:", req.protocol);
console.log("Hostname:", req.hostname);
console.log("Original URL:", req.originalUrl);
console.log("Path:", req.path);
console.log("HTTP Version:", req.httpVersion);

// 요청 헤더
console.log("Headers:", req.headers);

 

실행결과

[0] Method: POST    # 요청 방식
[0] Protocol: http  # 프로토콜 
[0] Hostname: localhost # hostname
[0] Original URL: /auth/login/ # 요청 URL 
[0] Path: /login/ # URL PATH 
[0] HTTP Version: 1.1 # HTTP 버전 현재는 1.1
[0] Headers: {
[0]   host: 'localhost:5985', # 서버의 Host 즉 서버가 5985 로 실행중
[0]   connection: 'keep-alive', # 연결 유지 명시
[0]   'content-length': '40', # 요청 본문의 바이트 단위 크기
[0]   'sec-ch-ua-platform': '"Windows"', # 클라이언트 OS
[0]   'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36', # 클라이언트 애플리케이션(브라우저인지 등)의 정보
[0]   accept: 'application/json, text/plain, */*',  # 클라이언트가 서버한테 response 받길 원하는 유형
[0]   'sec-ch-ua': '"Chromium";v="130", "Google Chrome";v="130", "Not?A_Brand";v="99"', # 클라이언트의 엔진 정보 및 브라우저 정보
[0]   'content-type': 'application/json', # 요청 본문의 미디어 유형, 현재는 Rest API, 여기에 파일이나, 오디오 등 명시 가능
[0]   'sec-ch-ua-mobile': '?0', # 클라이언트가 모바일 인가? ?0 은 모바일이 아님을 나타냅니다. ?1 은 모바일 장치를 나타냅니다.
[0]   origin: 'http://localhost:3000', # 요청이 시작된 URL, 즉 클라이언트 URL
[0]   'sec-fetch-site': 'same-site', # 요청이 사이트 간에 요청인지, 사이트 내부에서 요청인지. Samesite는 사이트 내 요청, same-origin 출처 동일, same-site 동일한 사이트 내 다른 도메인(ex a.a.com -> a.com), cross-site 아예 다른 사이트, none
[0]   'sec-fetch-mode': 'cors', # 보안과 리소스 로딩에 사용하는 모드, 현재는 CORS 사용한 모드를 나타냄 그 외 navigate, no-cores, same-origin 등 이 있음
[0]   'sec-fetch-dest': 'empty', # 요청의 대상 리소스. 현재는 대상 없음
[0]   referer: 'http://localhost:3000/', # 요청이 발생한 페이지의 url. 즉 현재는 /페이지에서 요청이 시작됨
[0]   'accept-encoding': 'gzip, deflate, br, zstd', # 클라이언트가 서버로 받을 수 있는 인코딩 방식
[0]   'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7' # 클리아언트가 선호하는 언어 순서
[0] }

 

RESPONSE

console.log(res.getHeaders());

{
[0]   'x-powered-by': 'Express', # 서버가 Express 프레임워크를 사용하고 있다는 정보. 보안상 비노출 권장
[0]   'access-control-allow-origin': '*', # CORS 정책으로 *(모든출처) 에서 접근 허용. 보안상 특정 출처 허용 권장
[0]   'content-type': 'application/json; charset=utf-8', # 응답 본문의 형식 및 인코딩
[0]   'content-length': '324', # 본문의 길이 
[0]   etag: 'W/"144-Am+6JxjL2RfQwTQT5lH5nt2WnyM"' # 응답 데이터의 버전. 브라우저 캐싱을 위해 사용.  이 값을 클라이언트에서 저장 후 다음 요청시 전달한다면, 변경되지 않은 데이터라면 304 응답으로 서버에서 리소스를 재전송하지 않아 자원이 절약됩니다.
[0] }

 

 

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

HTTP 개요 - HTTP | MDN

 

https://developer.chrome.com/blog/removing-push?hl=ko

Chrome에서 HTTP/2 서버 푸시 삭제  |  Blog  |  Chrome for Developers

https://imkdk.tistory.com/29

[HTTP] HTTP 0.9/1.0/1.1/2.0/3.0 특징 정리

http://www.ktword.co.kr/test/view/view.php?no=6431

컨텐트 타입