×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 1,485,639명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)


HTTP 리퀘스트 메시지를 통해 브라우저와 웹 서버가 통신하는 과정을 간단하게 작성해 보았다.


그 후 내용은 뒷 게시물에서 계속해서 작성하고자 한다.


1. HTTP 리퀘스트 메시지를 작성한다.


이 글을 보고 있는 사용자들은 www.crocus.co.kr 이라는 블로그에 들어와 있다.


이때 블로그를 들어오기 위해 URL을 입력해야하고 url의 의미에 따라 브라우저는 메시지를 만들어 웹 서버에 메시지를 보내게 된다.


이때 url의 의미라는 것은 http, ftp, file, mailto 등등이 존재하고 메시지를 수신하는 대상이 웹 서버라면 HTTP 프로토콜을 사용하고 FTP라면 FTP 프로토콜을 사용하는 방식이다.


이 메시지를 만들기 위해 브라우저가 하는 행동은 아래와 같다.



* HTTP 프로토콜


HTTP 프로토콜에 대한 개념을 잠깐 짚고 넘어가면 아래와 같다.


HyperText Transfer Protocol  약자인 HTTP는 하이퍼텍스트를 빠르게 교환하기 위한 프로토콜의 일종으로 서버와 클라이언트의 사이에서 어떻게 메시지를 교환할 지를 정해놓은 규칙이다.


80번 포트를 사용하며 HTTP의 구조는 요청(Request)과 응답(Response)으로 구성되어 있다. EX)

클라이언트가 웹 페이지에서 링크가 걸려있는 텍스트를 클릭(요청)

하면 링크를 타고 새로운 페이지로 넘어간다(응답).


따라서 우리가 사용하는 웹 브라우저에서 인터넷 주소 맨 앞에 들어가는 http://는 바로 이 프로토콜을 사용해서 정보를 교환하겠다는 표시인 것이다.


HTTP 프로토콜은 서버/클라이언트가 주고받는 메시지의 내용이나 순서를 정한 것이다.


클라이언트에서 리퀘스트 메시지를 서버에 날리게 될 때


이때 메시지 속에는 무엇을 보내는지, 어떻게 사용할 것인지 보내게 된다.


무엇에 해당하는 것은 www.crocus.co.kr/a.html 처럼 a.html 파일을 이라는 것에 해당되고 


어떻게 사용할 것인지에 해당하는 것은 우리가 흔히 이용하는 GET, POST 같은 Method들을 의미한다.



대표적인 4가지 Method는 다음과 같다.


 GET

 URI로 지정한 정보를 받을 때 쓴다. 

 POST

 클라이언트에서 서버로 데이터를 송신한다.

 대표적으로 Input 폼에서 submit을 클릭하는 경우에 사용한다.

 PUT

 서버에 파일이 없다면 생성하고 있다면 덮어쓰기한다.

 DELETE

 URI로 지정한 서버의 파일을 삭제한다.



즉, 브라우저는 URL을 분석하고 웹 서버와 파일명을 바탕으로 HTTP 리퀘스트 메시지를 포멧에 맞게 만들어내게 된다.



리퀘스트 메시지


리퀘스트 메시지의 1번 부분리퀘스트 라인이라고 한다.

즉, 위의 한 행으로 리퀘스트 메시지의 대략적인 내용을 알 수 있다는 의미이다.


2번 부분메시지 헤더라 하고 리퀘스트의 부가적인 정보를 나타내며 한 행에 한 개의 헤더 필드를 쓴다.


3번 부분은 클라이언트에서 서버에 송신하는 데이터가 담기는 내용부분이다.

POST 같은 메소드로 웹 서버에 데이터를 보낼때 들어가는 부분이다.


GET /crocus.png HTTP/1.1

Accept : * / *

Referer: https://www.crocus.co.kr/a.html

Accept-Language: kr

Accept-Encoding: hzip

User-Agent: Mozilla/4.0

Host: www.crocus.co.kr

Connection: Keep-Alive 




응답 메시지


1번 부분스테이터스 라인이라 하며 응답 문구에는 404 NOT FOUND 처럼 응답 문구가 들어가게 된다.


2번 부분에는 응답 메시지의 부가적인 정보가 들어가게 되고


3번 부분에는 실제로 응답된 데이터가 들어가 있게 된다.


HTTP/1.1 200 OK

Date: THU, 27 Sep 2018 23:24:11 GMT

Server: Apache

...

Accept-Ranges: bytes

Content-Length: 1234

Connection: close

Content-Type: image/png





www.crocus.co.kr 블로그 첫 화면을 들어가면 다음과 같이 나타난다.


이때 input 폼에 값을 입력하고 엔터 키를 누르면 이때 GET이 요청된다.


즉, 위의 폼은 실제로 다음과 같이 구성된다.


<input id="search-text" v-model="currentText" @keyup.enter="goSearch">


위의 코드를 더 자세히 보면 대략적으로 다음과 같다.


<form method="GET" action="/search/">
    <input type="text" name="myfield">
    <input type="submit" value="SEND" name="mySendBtn">
</form>



이제 이 코드를 웹 서버에 보내게 되면


GET /search/입력한내용&mySendBtn=SEND HTTP/1.1

(헤더내용)


이런 식으로 웹 서버에 보내지게 된다.





서버는 위의 내용을 받고 이제 클라이언트에 응답 메시지를 보내는데 이때 스테이터스 코드가 함께오며 아래와 같다.


Code 

Explanation 

1xx

처리 경과 상황등을 통지 

2xx 

정상 종료 

3xx 

다른 조치가 필요함을 나타냄 

4xx 

클라이언트측 오류 

5xx 

서버측 오류