ZeroCho Blog

안녕하세요. 이번 시간에는 유명한 헤더들에 대해서 알아보겠습니다. 헤더 종류가 너무 많기 때문에 공통 헤더와 요청에서 사용되는 헤더를 먼저 알아봅니다.

잠깐 복습을 해볼까요? 서버의 역할이 클라이언트로부터 요청을 받아서 응답을 보내는 것이라고 했죠. 요청과 응답은 메시지 형식으로 오고, 메시지는 시작줄, 헤더, 본문으로 구성되어 있습니다. 이번 시간에는 그 중에서 공통 헤더와 요청의 헤더를 알아보는 것입니다. 개발자도구(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-로 시작하는 헤더도 다룰 예정입니다)