HTTP / Web Server

 

1. HTTP란 ?

- 데이터를 주고 받는 양식을 정의한 '통신규약'중 하나. (통신규약 : Protocol)

- 매우 범용적인 양식을가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약

=> 컴퓨터 끼리 데이터를 주고 받을때 정해둔 약속

- HTTP라는 통신 규약을 이용하여 서버나 클라이언트(브라우저)끼리 의사소통을 할 수 있게된다.

! Point

의사 표현의 수단: 사람의 말 ↔ 컴퓨터의 네트워크

의사 표현의 방법: 사람의 언어 ↔ 컴퓨터의  통신 규약

 

2. HTTP로 데이터를 주고받는 원리 ?

- 언제나 Request, Response라는 개념이 존재한다.

- 서버와 브라우저의 관계로 말하자면

1. 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 **요구(Request)**.
2. 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 **반환(Response)**
3. 없다면 없는 페이지에 대한 데이터를 반환 (일반적인 웹 서버 기준)
4. 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려준다

- '데이터'는 어떠한 데이터든 주고 받는게 가능

 

3. 브라우저에서 HTTP 동작원리 확인

1) 개발자 도구와 네트워크 탭 열어보기

1. 원하는 웹 페이지에 들어간다
2. F12를 눌러 개발자 도구(혹은 DevTool)을 연다
3. 네트워크 탭을 누른다
4. 새로고침을 누른다
5. 나오는 목록이 서버에서 받아온 데이터 목록

2) 네트워크 (Network) 탭 맨 위의 페이지 데이터 클릭

데이터가 나오지 않는다면 새로고침 해준다.

3) Headers 탭

General - 브라우저에서 서버로 보낸 Request 데이터

Request Headers

Response Headers

4) Response 탭 

서버에서 브라우저로 반환해준 웹페이지를 그려주기 위한 데이터

4) 추가 데이터와 데이터의 차이

Method

• GET - 이름 그대로 어떤 리소스를 '얻을 때' 사용, 웹서핑시 거의 모든 요청들(예외 - https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-formmethod)
• POST - 웹서버에 데이터를 '게시'할 때 사용하는것이 일반적이다. (ex. 회원가입, 게시글 작성, 댓글 작성)

 

Header (추가 데이터, 메타 데이터)

• 브라우저가 어떤 페이지를 원하는지 ?
• 요청 받은 페이지를 찾았는지 ?
• 성공적으로 찾았는지 ?

등등 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣어 주고받는다.

- Method도 헤더에 포함되어 서버에 보내짐

 

Payload (데이터, 실질적인 데이터)

• 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있다
• 클라이언트(브라우저)가 요청 할 때도 Payload를 보낼 수 있다.
• 'GET method를 제외하곤 모두 Payload를 보낼 수 있다' 라는게 HTTP에서의 약속

 

4. 웹 서버의 이해

1) 웹 서버란? 

- 인터넷을  통해 HTTP를 이용하여 웹상에서 클라이언트의 요청을 

응답해주는 통신을 하는 컴퓨터 또는 프로그램

 

2) 기본 동작 원리

1. 브라우저를 통해 HTTP request로 웹사이트를 웹서버에 요청
2. 웹서버는 요청을 승인하고 HTTP reponse를 통해 웹사이트 데이터를 브라우저에 전송
3. 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려낸다.

- 기본적으로 브라우저가 웹서버에 요청을 할때는 항상 GET method로 요청하게 된다.

 

더 알아보면 좋은 것들

1. 웹 서버 (Web Server)와 웹 어플리케이션 서버 (WAS)의 차이점
2. HTTP와 HTTPS의 차이점

 

참고할만한 추가 자료

 

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

HTTP | MDN

https://brunch.co.kr/@swimjiy/39

그림으로 쉽게 보는 HTTP 변천사

https://brunch.co.kr/@springboot/21