꾸밍

host name이 도메인 주소가 같지 않다

호스트 네임 => 컴퓨터의 이름(사람의 이름)

도메인 네임 => 컴퓨터 그룹의 이름(사람의 성)

내부 네트워크를 구분하기 보다는 각 서버 또는 서비스의 영역을 구분하기 위한 것

네이버에서 개발자 도구(F12)를 누른 후에 네트워크 창을 열면 아무런 내용도 없다

하지만 네이버에서 로그인을 하고 나면 네트워크 창에서 

URL https://www.naver.com/nvnewsstand?031

Method GET * POST수정, DELTET삭제, PUT등록

Status Code 200(성공) 400 ( 에러 클라이언트 잘못 ) 500(에러 서버 잘못)

Remote Address  104.93.0.236:443

Referrer Policy  origin

이렇게 나오게 되는것을 읽어야 한다.

그 뒤로 Response Headers

1. cache-control:
   no-cache, no-store, must-revalidate
2. content-length:
   3641
3. content-type:
   text/plain
4. date:
   Tue, 14 May 2019 01:06:17 GMT
5. p3p:
   CP="CAO DSP CURa ADMa TAIa PSAa OUR LAW STP PHY ONL UNI PUR FIN COM NAV INT DEM STA PRE"
6. pragma:
   no-cache
7. referrer-policy:
   unsafe-url
8. server:
   NWS
9. status:
   200
10. strict-transport-security:
    max-age=63072000; includeSubdomains
11. x-edgeconnect-cache-status:
    0
12. x-edgeconnect-midmile-rtt:
    39
13. x-edgeconnect-midmile-rtt:
    65
14. x-edgeconnect-origin-mex-latency:
    3
15. x-edgeconnect-origin-mex-latency:
    3
16. x-frame-options:
    DENY
17. x-xss-protection:
    1; mode=block

그 뒤로 Request Headers

1. :authority:
   www.naver.com
2. :method:
   GET
3. :path:
   /nvnewsstand?031
4. :scheme:
   https
5. accept:
   */*
6. accept-encoding:
   gzip, deflate, br
7. accept-language:
   ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
8. charset:
   utf-8
9. content-type:
   application/x-www-form-urlencoded; charset=utf-8
10. cookie:
    NNB=DZYUAMIKOCMFY; npic=HkmITlkdGpk5Cap2zN3ZNaIklaPo7iwH4niAO6bxahmI9WGcrwMxrLaevRlF7GkWCA==; NaverSuggestUse=use%26unuse; ASID=d36dbca50000016a47a6e2930000004f; nx_ssl=2; PM_CK_loc=4bcf02ceb68dfdba2c20e23a588cde670a66ebf40af782014a89e1b8d00e8fb3; _naver_usersession_=k2i759zFTlGN5HmBDLG8sA==; page_uid=ULogCdppAVRssi1pE/Nsssssssh-175587; BMR=s=1557795736489&r=https%3A%2F%2Fm.post.naver.com%2Fviewer%2FpostView.nhn%3FvolumeNo%3D16047982%26memberNo%3D36765180%26vType%3DVERTICAL&r2=https%3A%2F%2Fsearch.naver.com%2Fsearch.naver%3Fwhere%3Dnexearch%26query%3D6%25BF%25F914%25C0%25CF%25C5%25B0%25BD%25BA%25B5%25A5%25C0%25CC%26sm%3Dtab_etc; nid_inf=1732318704; NID_AUT=jtrc64GU+IMuXSGI6Ft0Kl8xVvpYj9iuivCeMWw50cWpTSyouk2pnfMbG+GLh50Z; NID_SES=AAABhxyLhhsTCdAHNmxWaomOeyqDbMQc5hiyUu4iyNPIkU7nN74Cljua5D+JUNzGZBqIxBb6SeiKENmSL28rNF8H2hu/3ggrgEHexssETZlih7TOE68Pg3MurpLJGEZVEhMFnuasEwWarNPsfQuERu1RLQ8peaqL4mOQ9hjm/WnvT+Ebn/DIFm0XA2UTUfer+r9vxGGP3syJKNzne57z0/BmNTkw7z4Wo06tyDKLFHsCG45GTn5giNFMzWiODLuMyiAzAfO6E/jR7w+hd8cTqI+ysEbDNlZknEXVTNxrojUpgc9ty2vBsOkTg4Nv1rtzh8fru+X/nt3xLzwaJLF56UjsiV/TzZfCQLoo7m3QMoFXmk7iPUkhrSpSUPIu4RN8t147NvBZLUpKTcI6dDso8riLR6MF7/WZ2Z494cBEFec2RScNKB8HAoir0Y/hp7qDfUJiPHMcM40QdVnE1X7V8vP8Cw+jTZ50RzT/vLyMb4QGqpXZtLfGRMwX2k97bFfnOk0mfNf3yAyXhsVKmlJF5ZiMOZ8=; NID_JKL=Rrk71kmR+YS5D3q5vUzzUS6C522YSrEUPfD7MHwue2I=
11. referer:
    https://www.naver.com/
12. user-agent:
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36
13. x-requested-with:
    XMLHttpRequest

유명한 헤더 알아보기

헤더 종류가 너무 많기 때문에 공통 헤더와 요청에서 사용되는 헤더를 알아보자

서버의 역할이 클라이언트로부터 요청을 받아서 응답을 보내는 것이라고 했죠.

요청과 응답은 메시지 형식으로 오고, 메시지는 시작줄, 헤더, 본문으로 구성되어 있습니다.

이번 시간에는 그 중에서 공통 헤더와 요청의 헤더를 알아보는 것입니다.

개발자도구(F12)의 네트워크 탭에서 헤더들을 확인할 수 있습니다.

공통 헤더

요청과 응답에 모두 사용되는 헤더입니다. 이 중에서 Content 시리즈는 엔티티 헤더라고 불립니다.

Date

HTTP 메시지가 만들어진 시각입니다. 자동으로 만들어집니다.

Date: Thu, 12 Jul 2018 03:12:27 GMT

Connection

Connection: keep-alive

HTTP/2를 사용하지 않는다면 보통 HTTP/1.1을 사용하게 되는데요. Connection은 기본적으로 keep-alive로 되어있는데 사실상 아무런 의미도 없습니다. HTTP/2에서는 아예 사라져버렸습니다.

Cache-Control

매우 중요하고 알아두어야 하는 헤더이기 때문에 따로 강좌를 빼서 알려드립니다.

Content-Length

요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해줍니다. 메시지 크기에 따라 자동으로 만들어집니다.

Content-Length: 52

Content-Type

Content-Type: text/html; charset=utf-8

컨텐츠의 타입(MIME)과 문자열 인코딩(utf-8 등등)을 명시할 수 있습니다. 조금 뒤에 나오는 Accept 헤더, Accept-Charset 헤더와 대응됩니다. 위에 예시로 든 헤더는 현재 메시지 내용이 text/html 타입이고 문자열은 utf-8 문자열임을 알려줍니다.

프런트엔드에서 서버로 데이터를 보낼 때는 text/html 이런 것 대신 www-url-form-encoded나 multipart/form-data같은 게 Content-Type이 됩니다.

Content-Language

사용자의 언어를 뜻합니다. 요청이나 응답이 무슨 언어인지와는 관련 없습니다. 예를 들어 한국 사람한테 일본어를 가르치는 사이트일 경우, 페이지 언어는 일본어더라도 Content-Language는 ko-KR일 수 있습니다.

Content-Encoding

Content-Encoding: gzip, deflate

Content-Encoding은 컨텐츠 압축된 방식입니다. 응답 컨텐츠를 br, gzip, deflate 등의 알고리즘으로 압축해서 보내면, 브라우저가 알아서 해제해서 사용합니다. 이 외에도 다양한 압축 알고리즘이 존재합니다. 컨텐츠 용량이 줄어들기 때문에 압축을 권장합니다. 요청이나 응답 전송 속도도 빨라지고, 데이터 소모량도 줄어들기 때문에 가능하면 압축해두세요.

요청 헤더

Host

서버의 도메인 네임이 나타나는 부분입니다(포트 포함). 

Host: www.zerocho.com

Host 헤더는 반드시 하나가 존재해야 합니다.

User-Agent

Host보다 더 유명한 헤더는 User-Agent입니다. 현재 사용자가 어떤 클라이언트(운영체제와 브라우저 같은 것)를 이용해 요청을 보냈는지 나옵니다.

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

제 클라이언트가 뭔지 맞춰보세요 ㅎㅎ. 저는 맥북 크롬으로 접속했습니다. 물론 유저 에이전트를 믿어서는 안됩니다. 헤더는 변경할 수 있으니까요. 하지만 대부분의 사람들이 유저 에이전트를 조작하지 않고 그대로 보내기 때문에, 유저 에이전트 헤더를 활용해서 접속자 통계 등을 내곤 합니다. 또한 이를 활용해서 IE로 접속한 사람들을 찾아낸 후, IE는 지원하지 않으니 크롬으로 접속해주세요와 같은 메시지를 표시하기도 하고요.

Accept

Accept 시리즈를 알아봅시다. Accept 헤더는 요청을 보낼 때 서버에 이런 타입(MIME)의 데이터를 보내줬으면 좋겠다고 명시할 때 사용합니다. 예를 들어 요청의 헤더로

Accept: text/html

를 보내면 HTML 형식인 응답을 처리하겠다는 뜻입니다.

Accept: image/png, image/gif
Accept: text/*

콤마로 여러 타입을 동시에 적어줄 수도 있고, *(와일드카드)로 "텍스트이기만 하면 돼"라고 적어줄 수도 있습니다.

Accept 시리즈라고 한 이유는 Accept-Encoding, Accept-Charset, Accept-Language 등도 있기 때문인데요. 공통 헤더의 Content 시리즈와 대응됩니다. Accept로 원하는 형식을 보내면, 서버가 그에 맞춰 보내주면서 응답 헤더의 Content를 알맞게 설정하겠죠.

Accept-Charset: utf-8
Accept-Language: ko, en-US
Accept-Encoding: br, gzip, deflate

Charset은 문자 인코딩(UTF-8 등)을 명시하는 부분이고, Language는 원하는 언어, Encoding은 원하는 컨텐츠 압축 방식입니다.

뭘 적어야할지 모르겠다면 *(와일드카드)를 적거나, 그냥 브라우저가 알아서 설정해서 보내는 Accept를 사용하면 됩니다.

Authorization

Authorization 헤더는 인증 토큰(JWT든, Bearer 토큰이든)을 서버로 보낼 때 사용하는 헤더입니다. API 요청같은 것을 할 때 토큰이 없으면 거절당하기 때문에 이 때, Authorization을 사용하면 됩니다.

Authorization: Bearer XXXXXXXXXXXXX

보통 Basic이나 Bearer같은 토큰의 종류를 먼저 알리고 그 다음에 실제 토큰 문자를 적어 보냅니다.

Origin

POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다.

Referer

Referer: https://www.zerocho.com/category/JavaScript

이 페이지 이전의 페이지 주소가 담겨 있습니다. 이 헤더를 사용하면 어떤 페이지에서 지금 페이지로 들어왔는지 알 수 있기 때문에 애널리틱스같은 데 많이 사용됩니다. 재밌는 사실을 알려드리자면... Referer은 오타입니다. Referrer가 표준어인데 실수로 Referer로 만들었다고 하네요.

혹시나 추가적으로 알고 싶은 헤더가 있다면 댓글로 남겨주세요~. 다음 시간에는 응답 헤더로 돌아오겠습니다. (캐시 헤더와 X-로 시작하는 헤더도 다룰 예정입니다)

참고한 블로그

https://www.zerocho.com/category/HTTP/post/5b3ba2d0b3dabd001b53b9db

지난 시간 요청 메시지의 시작줄에 있었던 GET이라는 단어가 들어가 있는것을 보셨죠

GET/POST 둘다 서버에 요청을 하는 메서드 입니다.

GET https://aomee0880.tistory.com HTTP/1.1

GET이라는 단어가 가져오다라는 뜻이기 때문에 느낌상 https://aomee0880.tistory.com

을 가져오라는 뜻같지 않나요? 실제로 인터넷 주소창에 주소를 치는 행위는 해당 주소에 대해 GET 요청을 하는 것입니다. 크롬 주소창에 www.naver.com이라고 치면 GET www.naver.com HTTP/1.1 요청을 보내는 셈이다.

이렇게 요청을 할 때 주소와 함께 HTTP 메서드를 같이 보낼 수 있습니다. 자주 쓰는 HTTP 메서드는 GET,POST,PUT,PATCH,DELETE 정도가 있습니다. (OPTIONS, HEAD, CONNECT, TRACE)도 있습니다.

GET, POST, PUT, PATCH, DELETE 단어의 뜻을 잘 생각해 보세요..

GET  - 가져오다

POST - 게시하다(등록)

PUT - 집어 넣다.(수정)

PATCH - 고치다.

DELETE - 지우다.

따라서 해당 주소에 대한 어떤 동작을 하려고 할때 알맞은 HTTP메서드를 사용하면 됩니다.

DELETE www.aomee0880.tistory.com하면 제 블로그 지우는 요청인 것입니다.  ( 실제로 지우시면 안되요 ㅠㅠ)

실제로 요청만 보낸다고 이루어지는 것은 아니고, 서버가 요청을 검증한 후, 유효하면 실행 됩니다.

HTML을 배우신 분들은 이미 이러한 메서드들을 사용하고 계셨습니다. HTML 폼에서는 method 속성으로 GET과 POST방식을 사용할 수 있다. action에는 주소가 들어가고요, 보통 새로운 글을 등록할 때 POST로 설정하고 폼을 사용하지 않으셨나요?

즉, 지금까지 POST action주소 HTTP/1.1로 요청을 보내온 것입니다.(요청 메시지 시작줄)

인풋 태그 데이터들은 요청의 본문에 들어가고요.

HTML 폼을 쓰셨던 분들은 GET과 POST만 쓰셨겠지만, 실제로는 요청을 보낼때, PUT, PATCH, DELETE 등 더 자세한 동작을 정의할 수 있습니다. 보통 PUT은 전체 수정(대체), PATCH는 부분 수정, DELETE는 제거 요청 시 사용합니다.

주소를 자원이라고 보고, 메서드를 동사라고 보는 개발 방식이 바로 REST입니다.(Representational State Transfer 웹의 장점을 최대한 활용할 수 있는 아키텍처)

예를 들어 GET/user라고 하면, 사용자들의 정보를 가져온다는 의미가 되고, DELETE /users/5 라고 요청을 보내면 아이디가 5인 사용자를 제거하라는 뜻이 되는 셈이죠.

GET을 제외한 POST,PUT,PATCH,DELETE는 요청을 보낼 때 본문을 같이 보낼 수 있습니다.

GET도 본문을 넣어 보내는 것이 가능하지만

GET의 본문은 어떻게 처리해야한다는 정의가 없기 때문에, GET 요청 시에는 본문을 같이 보내지 않습니다.

Request Payload 부분이 본문 부분입니다. 저건 크롬이 보기 좋게 표시한 것이고 실제로는 다음과 같이 요청이 전달될 것입니다.

POST myfit.xyz/male/upper HTTP/1.1
Accept-encoding: gzip
Accept-language: ko-KR
...

{data:{type: "UPPER_ANALYZE_REQUEST", brand: "MYFIT" ... }

이번 요청에는 헤더 다음에 본문이 들어가는 것이다. 서버는 저 본문을 받아 파싱(해석)한 후 사용하게 됩니다.

만약 GET에 데이터를 담아 보내고 싶다면 어떻게 할까요? 위 이미지에서 Query String Parameters 보이시나요?

저 부분은  myfit.xyz/male/upper?test=false에서 ? 뒷 부분(test = false)입니다. 이렇게 주소 뒤에 ? 를 붙인 후 키=값&키=값 식으로 데이터를 보냅니다. GET 요청은 본문 대신 주소에 쿼리스트링으로 데이터를 동봉하는 것입니다.

예를 들어 사용자를 이름 순으로 가져오고 싶다면 

GET /users?sort=name HTTP/1.1
요청을 보내면 되겠죠? 
GET /users?sort=name&filter=developer&limit=100 HTTP/1.1
처럼 쿼리스트링 간에 &로 구별도 가능합니다. 

개발자 도구 F12로 보면서 REQUEST 랑 RESPONSE 확인하기

https://mommoo.tistory.com/60

GET 방식과 POST방식

버전은 HTTP/1.1버전

**HTTP 통신 Body / header -> 네트워크

header는 요청에 대한 정보를 담고 있고

body는 요청할 때 함께 보낼 데이터를 담는 부분

(요청문서 .html) !=body/header

(서버 .java) Get/post  말고도 여러 방식이 있다.

header/body 개념

HTTP 상태 코드

200 - OK . 요청성공

400 - Bad Request. 요청오류

404 - Not Found. 리소스가 없는 상태

500 - Internal Server Error. 서버가 요청 처리를 못함

- HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜(규칙)

- HTML은 텍스트 정보에 대한 접근인 순차적 접근을 뛰어 넘는다.

*HyperText

(책을 펼치고 목차를 확인하고 해당 페이지로 책장을 넘겨 이동하는 일반적인 Text방식과는 확실히 다르고 클릭 한 방이면 된다.)

-> hypertext의 일반적인 텍스트 순차적 접근법

(다른 페이지로 이동이 아닌 같은 페이지 내의 다른 정보로도 순간이동 됩니다.)

—> 이런게 바로 hypertext 일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법을 표현하고 있는 것이다. 

다른 페이지로 이동하는 것과, 같은 페이지 내의 다른 데이터로 이동하는 것, 이것이 하이퍼텍스트의 개념

( 여기부터는 HTML 설명

*Markup Language

)

( 여기부터는 HTTP 설명

* 데이터를 주고 받을 때 흔히 발생하는 CORS, CORB 같은 에러들은 HTTP만 잘 알아도 쉽게 해결 가능

* 서버의 역할이 요청에 대한 응답을 보내준다는 것 (요청과 응답 둘다 시작줄,헤더,본문으로 이루어져 있습니다.)

)

요청이란?

-요청을 보낼대는 요청에 대한 정보를 담아 서버로 보냅니다.(식당에서 주문서를 작성)

-서버가 주문서를 받아 클라이언트가 어떤 것을 원하는지 파악할 수 있게 한다.(식당 주인이 주문서(요청)을 읽고 어떤게 원하는건지 파악 가능)

-서버도 응답할 때 응답에 대한 정보를 담아 클라이언트로 보냅니다. 이런 정보가 담긴 메시지를 HTTP 메시지라고 합니다.

-HTTP 메시지는 시작줄,헤더,본문으로 구성됩니다. 실제 요청 HTTP 메시지를 보면

GET https://www.zerocho.com HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ...
Upgrade-Insecure-Requests: 1

(본문 없음)

• GET https://www.zerocho.com HTTP/1.1
• (GET 메서드) (URL주소) (HTTP버전) -> 즉, 요청 메시지의 시작줄은 메서드 주소 버전으로 구성 된것.
• User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ... Upgrade-Insecure-Requests: 1 
•  (헤더) -> 요청에 대한 정보를 담고 있습니다. User-Agent,Upgrade-Insecure-Requests 등등이 헤더에 해당됩니다. 헤더 종류가 매우 많기 때문에 유명한 헤더들만 우선 보기 
•  (본문 없음) 
•  (본문) -> 본문은 요청할 때 함께 보낼 데이터를 담는 부분입니다. 지금은 단순히 주소로만 요청을 보내고 있기 때문에 따로 데이터를 담아 보내지는 않았습니다.그래서 본문이 비어있어요

응답이란?

HTTP/1.1 200 OK
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 35653
Content-Type: text/html;

<!DOCTYPE html><html lang="ko" data-reactroot=""><head><title...

요청과 마찬가지로 시작줄, 헤더, 본문으로 구성되어 있습니다.

• HTTP/1.1 200 OK
• (버전 상태코드 상태메시지) -> 200은 성공적인 요청이었다는 것입니다.
• Connection: keep-alive  Content-Encoding:gzip Content-Length : 35653 Content-Type : text/html;
• (헤더) -> 응답에 대한 정보를 담고 있습니다. 역시나 헤더 종류가 많기 때문에 나중에 따로 시간을 내어 유명한 헤더만 알아보기
• <!DOCTYPE html><html lang="ko" data-reactroot=""><head><title...
• (본문) -> 응답에는 보통 본문이 있습니다. 보통 데이터를 요청하고, 응답메시지에는 요청한 데이터를 담아서 보내주기 때문에, 응답 메시지에는 HTML이 담겨 있습니다. 이 HTML을 받아 브라우저가 화면에 렌더링 합니다.

대략적인 요청과 응답의 구조가 이해 되시나요? HTTP 메시지만 봐도 많은 정보를 담고 있습니다.

다음시간에 요청과 응답 메시지의 한 파트씩을 알아봅니다. => HTTP 메서드 차례 입니다.

추가 이해 내용

Request(요청) 는 웹서버 만드는건가 주로 .java언어로 GET/POST 메서드를 활용해서 서버로부터 요청에 대한 응답을 보내준다. url값을 받아오면 Response해서 응답페이지를 보여준다.  

Response(응답) 는 웹에서는 .html파일로 만듬 페이지를 띄워서 보여준다.