본문 바로가기

책 기록/책 서평

#2 리얼월드 HTTP - HTTP의 의미와 구성 요소

유튜브 강의 링크: https://youtu.be/kiZSh12Wb9E

 

안녕하세요.

이번 시간에는 HTTP의 대해서 이야기를 나눠 보겠습니다 :)

웹을 처음 공부하실 때 HTTP 통신, GET 방식, POST 방식 이런 이야기를 정말 많이 들으실거에요.

공부를 하다보면 도대체 HTTP 통신이 무엇이지라는 생각이 들었는데요.

그래서 HTTP랑 조금 더 친해지기 위해서 이렇게 소개를 드리게 되었습니다.

조금 더 나은 개발과 지식을 쌓을 수 있도록 HTTP의 구성 요소에 대해서 알아보겠습니다.

 

HTTP라 함은 웹 브라우저가 웹페이지를 사용자에게 보여주기 위해서 서버로 데이터를 요청하기 위한 약속입니다.

역시나 이렇게만 이야기 들으면 와닿지 않으니, 아주 단순한 초기 버전부터 살펴보겠습니다.

 

HTTP 시작은 매우 단순했습니다.

1. HTTP 0.9

> 브라우저에서 서버로 페이지를 호출

# 브라우저(클라이언트) -> 서버
/greeting.html

 

< 서버로부터 단순히 웹사이트(html) 내용 반환

# 서버 -> 브라우저(클라이언트)
<html>
  A very simple HTML page, Say Hello.
</html>

HTTP(Hyper Text Transfer Protocol)라는 이름처럼 헤더, 상태 코드 이런 내용 없이 오로지 html만 받아 옵니다.

HTTP라는 이름이 이제는 이해가 되겠습니다. 초기에는 그냥 html만 받아 왔습니다. 아 그래서 Hyper Text라는 이름을 사용하게 되었구나 이제야 이해가 됩니다. 지금에는 이미지, 파일이나 다양한 데이터를 주고 받는데 왜 Hyper Text라는 이름이 사용되었는지 의문이었습니다.

지금에는 더 많은 기능들이 필요하여 초기 버전이 발전해서 지금의 HTTP를 구성하게 되었습니다.

2. HTTP 1.0

웹이 점점 발전하면서 HTTP에 더 많은 기능을 필요로 했습니다. 클라이언트에서 페이지 요청 이외에는 무언가를 할 수도 없었고 서버가 올바르게 응답을 했는지도 알 수 없었습니다.

"브라우저(클라이언트)가 페이지 요청을 하면 서버는 데이터를 반환한다"라는 HTTP의 뼈대는 0.9에서 완성이 되었습니다. HTTP 1.0에는 이전 보다는 기능이 조금 더 추가가 되겠습니다.

 

> 브라우저에서 서버로 페이지를 호출

# 브라우저(클라이언트) -> 서버
GET /greeting.html HTTP/1.0
User-Agent: Mozilla/2.0 (Windows 3.1)
  • 메서드 추가  (HEAD, POST)
  • 요청 시 HTTP 버전이 추가
  • 요청 시 User-Agent 헤더 추가 

 

< 서버로부터 내용 반환

200 OK
Date: Tue, 15 Nov 1994 08:12:31 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/html
<html>
	A page with an image <img SRC="/myimage.gif">
</html>
  • 결과의 대한 상태 코드 반환
  • 추가 내용을 위한 헤더 추가
  • Content-Type의 따라서 html 내용뿐만 아니라 image도 전송이 가능

 

지금 까지 사용 되는 HTTP 구성들은 1.0 버전에서 이미 만들어졌습니다.

HTTP 구성 요소

  • 메서드와 경로
  • 헤더
  • 바디
  • 상태 코드

용도의 따른 메서드(GET, POST 등)와 경로, 요청의 대한 설명을 위한 헤더, 보내고자 하는 데이터를 담은 바디, 마지막으로 처리가 정상적으로 되었는지에 대한 상태코드로 HTTP는 구성이 되어 있겠습니다.

지금 보시는 구성 요소의 조합을 통해서 브라우저와 서버가 필요의 따른 동작을 하는거에요. 웹 개발을 하시거나 HTTP 통신을 하실 때 적어도 구성 요소 틀을 알고 있으신다면, 필요한 내용은 조금 더 학습을 하시기 수월하겠습니다.

3. HTTP 1.1

마지막으로 지금까지 표준으로 사용이 되고 있는 HTTP 1.1 샘플을 보겠습니다.

> 브라우저에서 서버로 페이지를 호출

GET /en-US/docs/Glossary/Simple_header HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header

 

< 서버로부터 내용 반환

200 OK
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Wed, 20 Jul 2016 10:55:30 GMT
Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
Keep-Alive: timeout=5, max=1000
Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
Server: Apache
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding

(content)

HTTP 1.0 버전보다는 복잡해보입니다. 하지만 4가지 구성 요소의 기본적인 틀은 같습니다. 단지 기능들이 더욱 추가가 되어 조금 더 복잡해진 모습입니다.

추가 기능 예)

  • Keep-Alive를 통한 통신 유지
  • 새로운 메서드 추가 - PUT, DELETE, OPTION, TRACE, CONNECT
  • 서버의 신뢰성 향상 및 데이터 전송 시 청크 방식 도입

웹을 처음 학습을 하신다면 모든 속성들을 알기도 어렵고, 사실 HTTP 표준 관련 개발자가 아니고는 HTTP 상세 내용을 다 아시는 분도 있을까 싶을 정도로 방대합니다.

 

우리에게 지금 당장 숙지해야 되고, 필요한 기준은 HTTP의 구성 요소 4가지입니다.

1) 메서드와 경로

2) 헤더

3) 바디

4) 상태 코드

위의 4가지의 조합으로 브라우저와 서버간의 작업들이 이루어지니 4가지 요소를 통해서 HTTP 통신의 기준을 잡아주시면 조금 더 수월하게 개발을 하실 수 있으시리라 생각이 되겠습니다.

 

마지막으로 1가지 더 추가적으로 설명을 드리고 싶은 내용이 있는데요. 메서드 종류 관련 내용입니다. 메서드에는 대표적으로 GET, PUT, POST, DELETE 4가지 메서드의 존재만을 알고 있으실 수 있습니다. 4개의 메서드 이외에도 땡땡가지 메서드가 존재하는데요.

 

1) 자주 쓰이는 메서드

GET: 리소스 요청 (페이지 요청)

PUT: 리소스 변경 (데이터 수정)

POST: 리소스 제출 (데이터 생성)

DELETE: 리소스 삭제 (데이터 삭제)

 

2) 이외 메서드

PATCH: 리소스 부분 수정

CONNECT: 서버와 연결

OPTIONS: 통신 옵션 설명

TRACE: loop-back 테스트

HEAD: GET 요청과 동일하나 헤더만을 요청

 

이런 추가적인 메서드가 있다라는 내용까지 숙지를 해주시면 좋겠습니다.

감사합니다 :)

 

참고내용)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP

 

Evolution of HTTP - HTTP | MDN

HTTP (HyperText Transfer Protocol) is the underlying protocol of the World Wide Web. Developed by Tim Berners-Lee and his team between 1989-1991, HTTP has gone through many changes that have helped maintain its simplicity while shaping its flexibility. Kee

developer.mozilla.org