HTTP

HTTP란?

• Hyper Text Transfer Protocol의 약자로, 웹 브라우저와 웹 서버간의 원활하기 위해 필요한 통신 규약이다.

• HTML, CSS, JS 등의 컨텐츠 및 정보를 주고받기 위해 서로가 알아 들을 수 있는 공통의 약속인 message 를 뜻한다.

• message 는 client의 request, server의 response 각각을 위해 구분되어 있다.

✔ 그림처럼 client 측에서 HTML 파일을 얻기 위해 request를 하며, server는 이에 대해 response를 하고 있다.

이러한 웹 브라우저와 웹 서버간의 통신은 어떻게 이루어지는지 개발자 도구를 통해 확인해보도록 하겠다.

Developer tool - Network tab

개발자 도구의 Network tab은 웹 브라우저와 웹 서버간의 통신 모니터링을 가능케 한다.

✔ live server를 통해 가상 서버로 1주차 과제 자기소개 페이지의 통신 내역을 확인해보았다.

이러한 모니터링으로 웹 브라우저와 웹 서버가 주고 받은 메세지, 즉 request, response를 확인할 수 있었다.

1. Request(client)

Request Headers' 는 웹 브라우저가 웹 서버에게 요청한 데이터를 보여주며 이를 Request Message Header이라고도 한다. 구성 데이터를 살펴보자.

• Request Line

  • GET / index.html HTTP/1.1: GET or POST 통신 방식 확인 / 요청하는 정보 / HTTP 버전

• Request Headers

  • Host: 127.0.0.1:5500: 필수 정보, 인터넷에 연결된 컴퓨터 1대를 식별하는 이름 (본인은 웹서버가 아닌, live server를 통해 가상 서버로 실행시켰으므로 가상 서버에 대한 정보가 뜬다.)

  • User-Agent: ...: 웹 브라우저의 다른 표현 (운영체제, 브라우저 정보 표시)

  • Accept-Encoding: gzip, deflate, br: 통신 데이터량이 많을 경우, 데이터의 압축 방식을 뜻한다.

  • If-Modified_Since: ..: 사용자가 갖고있는 파일의 마지막 다운로드 날짜가 언제인지를 뜻한다.
    (만일 웹서버가 갖고 있는 파일이 더 최신일 경우, 업데이트된 파일을 전송하며 최신이 아닐 경우 전송하지 않는다.)

2. Response(server)

Response Headers는 웹 서버가 웹 브라우저의 요청에 응답한 컨텐츠(정보, 데이터)를 보여준다. 구성 데이터를 살펴보자.

• Request statusl line

  • HTTP/1.1 200 OK: HTTP 버전 / status code (200: 성공적으로 전송함) / status code에 대한 상태메시지

• Response header

  • Content-Type: text/html: 응답형식 / 언어

  • Content-Length: 9889 : 응답하는 컨텐츠의 전체 파일 크기를 뜻한다. (단위는 bytes이다.)

  • Last-Modified: ... : 마지막으로 파일이 수정된 날짜

Result

결론적으로 위처럼 웹브라우저, 웹서버간의 요청 및 응답이 이루어진다.

1. 웹 브라우저 측에서 Request header message를, 인터넷을 통해 웹 서버로 전달한다.

2. 웹 서버는 전달받은 Request header message 정보를 해석, Response header message 및 본문 내용을 참조하여 사용자의 화면에 표시를 해준다.

Reference

• 생활코딩 - HTTP