WEB2 - HTTP

 

(옮)

https://gngsn.tistory.com/26

--------------------------------------------------------------------------------------------------------------------

이 수업은 웹브라우저와 웹서버가 컨텐츠(html, 이미지, 오디오, css, javascript 파일등)을 주고 받기 위해서 사용하는 통신규칙인 HTTP(HyperText Transfer Protocol)의 원리를 알려드리기 위한 수업입니다.

 

웹이 동작하는 원리가 궁금하신 분, 웹 사이트가 보다 빠르게 동작하길 원하는 분, 좀 더 안전한 웹사이트를 구축하고 싶은 분들께 권합니다.

--------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------

HTTP 프로토콜

1990년 팀 버너스리와 그의 동료들이 웹을 세상에 내놨을 때 크게 4가지 요소로 돼 있었음.

1.웹페이지를 만드는 컴퓨터 언어인 HTML

2.원하는 웹페이지에 방문할 수 있도록 도와주는 주소체계인 URL(, URI)

3.웹페이지를 주고받는 소프트웨어인 웹브라우저(, 웹서버)

4.웹브라우저와 웹서버가 통신을 할때 사용하는 통신규칙인 HTTP

=HyperText Transfer Protocol

 

웹을 구성하는 가장 중요한 요소들.

웹이 아무리 복잡해도 이 넷에서 한발자국도 벗어날 수 없다.

 

HTTP는 처음엔 매우매우 단순한 통신규칙 이었음. 이것만으로도 충분했었어

하지만 웹이 폭발적으로 성장하면서 단순한 HTTP의 기능만으론 성능, 보안, 안정성을 확보하는게 어려워졌음.

(당시에 World Wide Wait라고 불렀다.)

 

그래서 HTTP는 보다 풍부한 기능을 가진 프로토콜로 발전하기 시작

 

오늘날에는 HTML과 같은 텍스트파일 뿐만 아니라 이미지, 오디오, 동영상과 같은 다양한 멀티미디어 파일을 전송하는 매우매우 중요한 프로토콜로 군림

 

인터넷에서 가장 중요한 통신규칙이 된 HTTP는 웹을 넘어서 인터넷이 동작하는 근간

 

클라이언트는 어떤 메시지를 통해 서버에 요청하고, 서버는 어떤 메시지를 통해 응답하는지를 살펴볼 것.

 

이 여행이 끝나면 웹을 바라보는 시야가 넓어질 것.

더 나아가 인터넷 위에서 동작하는 아직 배운적도 없는 다른 프로토콜에 대한 이해도 넓어질 것

본질은 같으니까

 

--------------------------------------------------------------------------------------------------------------------

HTTP-2.소개

HTTP가 뭔지에 대한 비유적인 얘기를

 

클라이언트가 서버한테 서버님, HTML주세요 = 요청, Request

여기있습니다 하고 물건을 주는 행위 = 응답, Response

HTTP라고 하는 것은 Request와 Response를 나타냄.

HTML, CSS, JavaScript이미지와 같은 이런 파일들은 서로가 주고받는 컨텐츠라면 그 컨텐츠를 주고받기 위해서는 서버와 클라이언트가 서로가 알아들을 수 있는 공통의 약속인 메시지가 필요 그걸 HTTP라고 하고 그건 크게 Request와 Response를 위한 메시지로 구분돼 있음.

말하다보니 매우 추상적이지만 자꾸 얘기다하다보면 물질처럼 손에 잡힌다

 

개발자도구로 보자 우클릭 Inspect눌러서 Network탭 누르면 웹브라우저와 웹서버가 어떤 통신을 하고있는지를 모니터링할 수 있는 툴

 

아무페이지든 reload하면 목록이 주루룩 나오는데 클릭하면 HTTP메시지를 볼 수 있다

목록중에 .jpg파일이 있는 이유 : HTML코드를 읽으며 내려가다가 <img sr=“어쩌구.jpg를 보고 다시 웹서버한테 우리모르게 조용하게 요청함.

 

Network탭을 통해 웹브라우저와 웹서버가 통신하는 내용을 감청할 수 있다 이건 굉장히 중요한 테크닉임

 

파일 누르면 Headers탭의 Request Headers 부분이 웹브라우저가 웹서버에게 요청한데이터

Request Headers(웹브라우저가 웹서버에게 요청한데이터), 옆에 View source라고 돼 있는걸 클릭하면(view parsed로 바뀌지만) 날것그대로, 그렇게 텍스트로 만들어서 웹브라우저가 웹서버한테 보내준 것.

GET방식으로(몰라도됨) 1.html을 요청했고, 내가 사용할 수 있는 통신방법은 HTTP1.1이다

밑에 HOST는 웹브라우저가 어떤 웹서버의 주소로 접속했는지. 이 두 개가 필수적인 정보.

 

Response Headers의 View source를 보면

첫 번째 줄에는 반드시 이렇게 생긴 코드를 넣도록 약속돼 있음. 위 그림.

나도 HTTP1.1로 통신할거야 자기 통신방법을 웹서버가 웹브라우저에게 응답하는 컨텐츠

200이라는건 성공적으로 데이터를 찾아서 너한테 보내줄게 뜻

이 두 개가 필수

밑에 컨텐츠의 길이, 응답하는 정보가 text이고, text중에 html이다 라는것들도 알려주고있음

 

웹브라우저는 이런 정보들을 받아서 자기 필요에 따라서 잘 처리해서 화면에 표시해주게 됨

 

즉 웹브라우저는 사용자가 요청한 정보를 웹서버에게 대신 물어주는 것.

Request Headers같은 저렇게 생긴 텍스트 정보를 만들어서,

웹서버는 자기가 갖고있는 정보를 보내주면서 저렇게 생긴 응답헤더를 만들어주는 기계

 

웹브라우저는 응답한 정보를 화면에 적당히 그려주는 역할.

--------------------------------------------------------------------------------------------------------------------

HTTP-3.Request message

웹서버와 웹브라우저가 주고받는 메시지를 좀 더 자세하게 보기

 

Request Headers 를 클릭해서 보면(▽view source를 클릭하심)

제일 먼저 나오는 행을 요청행 이라고 부름.

이미지 검색으로 http request header format 검색

서버쪽으로 전송해야할 정보가 있다면 그 정보가 실제 내용임. = body 라고함.

바디와 헤더는 중간에 블랭크 라인을 둬서 구분

 

이제 실제 우리가 했던걸 보자 그대로다.

GET은 메소드라고 하는 것. 웹브라우저와 웹서버가 어떤 방식으로 통신할것인가.

데이터를 웹서버로부터 가져올때 쓰는게 GET, 브라우저를 주소를 치고 엔터를치면 그게 겟방식.

▽로그인같은거 할 때 전송버튼을 누르면 데이터를 전송 - 이건 POST

/1.html은 우리가 요청한게 무엇인가. 웹서버는 저거에 따라 웹브라우저가 요청한 정보를 응답한다. HTTP/1.1은 웹브라우저가 현재 사용할 수 있는 HTTP의 버전, 웹서버는 이거에 맞춰서 웹브라우저에게 적당한 방식으로 통신을 함

 

Host부터 리퀘스트 헤더라고 불리는 부분

Host는 필수. 호스트는 인터넷에 연결돼있는 컴퓨터 한 대한대를 식별하는 이름. 우리가 요청하는 웹서버의 주소를 적는 것.

하나의 웹서버가 여러 개의 도메인을 서비스할 수 있는데, A.com, B.com, C.com 이라는 도메인을 호스팅하고 있으면 각각의 주소별로 다른 웹사이트라고 한다면 웹서버는 요청하는 주소가 뭐냐에따라서 다른 정보를 보내줄 수 있다. 그걸 가상호스트라고 함.

 

8080 : 한 대의 호스트에는 여러대의 서버가 설치될 수 있다. 8080이라고 하는 포트번호에 등록돼 있는 웹서버를 의미.

 

User-Agent는 웹브라우저의 다른 이름

요청하는 웹브라우저가 어떤 웹브라우저인지를 보여줌. 운영체제, CPU, 웹브라우저 정보가 있어서 통계를 낼 수 있다. 또 이정보를 통해 로봇이 접근하는걸 차단할 수 있다.

 

Accept-Encoding : 응답하는 데이터의 양이 많으면 압축해서 전송하고 웹브라우저가 압축을 풀어서 처리. 네트워크의 자원을 아낄 수 있다. 그때 이 웹브라우저는 어떤 압축방식을 지원하냐

 

If-Modified-Since : 요청할때마다 다운로드 받는게 효율적이지 않다. 내가 마지막으로 접속할 때 다운로드 받았던게 저날짜고 웹서버는 자기가 갖고 있는 파일이랑 뭐가 더 최신인지 보고 자기거가 더 최신이면 전송을 해준다. 속도도 줄이고 윈윈이다.

--------------------------------------------------------------------------------------------------------------------

HTTP-4.Response message

이번엔 응답메시지

Response Headers

[첫번째 행 얘기중임]

status : 잘됐는지 잘 안됐는지 잘안되면 어떻게 안됐는지

http status codes로 검색하면 위키피디아 등에 다 나옴.

3xx 를 응답해주면 웹브라우저가 바로 다른곳으로 이동함

404 : 주소로 접속했는데 서버에 그게 없다. 너 왜 없는거 요청하냐

403 Forbidden : 관계자외 출입금지 접속하면 안되는곳, 넌 여기에 오면 안돼요

5xx는 서버쪽, 500은 서버쪽에 문제가 있습니다

 

이제 헤더들

유명한 헤더는 Content-Type: 웹서버가 응답할 때 이 응답은 text고, html이라는 언어. 웹브라우저는 이걸 보고서 정보를 HTML로 해석해서 화면에 표시해줌. imgae/jpeg로 돼 있으면 이미지

 

Content-Length: 컨텐츠의 전체크기, 단위 바이트

Content-Encoding: 이렇게 압축했다 이걸 읽으려면 이걸로 압축을 풀어라

Last-Modified: 이 정보는 언제 마지막으로 수정됐습니다.

 

웹브라우저는 요청을 하기전에 view source처럼 코드를 생성한다. Request Headers처럼

그다음 POST인 경우 처럼 웹브라우저가 웹서버에게 보낼 정보가 있을 때

한줄띄고 정보를 담음. 메시지를 만들고 인터넷을 통해 웹서버에게 보내주면

 

웹서버는 그 정보들을 해석해서 응답메시지를 만들어준다

그리고 또 한칸 띄우고 HTML코드 등 그 내용 전체를 써줌 - ▽오 여기다 HTML을?? 그리고 이건 네트워크의 Response탭에 있다.

웹서버는 저 내용을 헤더와 본문을 보내고, 웹브라우저는 두 개를 참조해서 사용자에게 화면에 표시해주게되는걸 통해서 이 작업이 끝나게 되는 것.

이것만 이해하면 나머지는 검색을 통해 알아내면 된다.

--------------------------------------------------------------------------------------------------------------------

HTTP-5.수업을 마치며

궁금해할만한 주제 소개

(1)HTTPS = SSL

http로 통신하면 누군가 여러분의 정보를 보고 있는 것으로 간주하셔야합니다.

https로 하면 전송하고 있는 내용을 가로챈다고 하더라도 그 안에 무슨 내용이 담겨있는지는 당사자들만 앎. 암호화 돼 있기 때문. http에서 로그인을 요구하면 하지말아야함

(2)Cache 저장한다는 말. 이미 다운된 저장된 파일을 읽어서 성능향상

(3)

 

(4)