프론트엔드Explorer

앞 내용을 잠시 복습해보자면, 서버의 역할은 클라이언트로부터 요청을 받아 응답을 보내는 것이다. 요청과 응답은 메세지 형식으로 오고, 이게 바로 HTTP 메시지! HTTP 메시지는 시작줄, 헤더, 본문으로 구성되어 있다. 

HTTP에 대해 알고싶다면, 아래 포스팅을 클릭해보자. 

https://dolphinsarah.tistory.com/38

HTTP 메소드에 대해 알고 싶다면, 아래 포스팅을 클릭해보자. 

https://dolphinsarah.tistory.com/39

이번 시간에는 헤더에 대해 알아볼텐데, 헤더 종류가 매우 많기 때문에, 알아두면 유용한 HTTP 공통 헤더와 요청 헤더에 대해 먼저 알아보도록 하자. 

헤더는 개발자도구(F12)의 네트워크 탭에서 확인할 수 있다! 

공통 헤더 

요청과 응답 모두 사용되는 헤더이다. 

Date

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

Connection

HTTP/2를 사용하지 않는다면 보통 HTTP/1.1을 사용한다. 

Connection은 기본적으로 keep-alive로 되어 있는데 사실상 아무런 의미도 없다. 

HTTP/2에서는 아예 사라져버렸다. 

Cache-Control

매우 중요하고, 꼭 알아둬야 하는 헤더이기 때문에 아래 포스팅에 따로 정리했다. 

2021.05.28 - [CS/네트워크] - [네트워크] 알아두면 좋은 HTTP 쿠키, 캐시 헤더

*Content 시리즈는 엔티티 헤더라고 불린다. 

Content-Length

요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해준다.

메시지 크기에 따라 자동으로 만들어진다.

Content-Length: 52

Content-Type

컨텐츠의 타입(MIME)과 문자열 인코딩(UTF-8 등)을 명시할 수 있다. 

조금 뒤에 나오는 Accept 헤더, Accept-Charset 헤더와 대응된다. 

 위의 예시 헤더는 현재 메시지 내용이 text/html 타입이고, 문자열은 utf-8 문자열임을 알려준다. 

Content-Language

사용자의 언어를 뜻한다. 요청이나 응답이 무슨 언어인지와는 관련 없다. 

예를 들어, 한국인에게 일본어를 가르치는 사이트일 경우, 페이지 언어는 일본어일지라도

Content-Language는 ko-KR일 수 있다. 

Content-Encoding

Content-Encoding은 컨텐츠의 압축된 방식이다. 

응답 컨텐츠를 br, gzip, deflate 등의 알고리즘으로 압축해서 보내면, 브라우저가 알아서 해제해 사용한다. 

이외에도 다양한 압축 알고리즘이 존재한다. 컨텐츠의 용량이 줄어들기 때문에 압축을 권장한다. 

요청이나 응답 전송 속도도 빨라지고, 데이터 소모량도 줄어들기 때문에 가능하면 압축해두는 게 좋다. 

요청 헤더

Host

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

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

User-Agent

Host보다 더 유명한 헤더는 User-Agent다. 

현재 사용자가 어떤 클라이언트(운영체제와 브라우저 같은 것)를 이용해 요청을 보냈는지 나온다. 

아래의 이미지를 보면 내 클라이언트가 무엇인지 알 수 있다. (나는 LG gram 크롬으로 접속했다)

물론, User-Agent를 믿어서는 안된다. 헤더를 변경할 수도 있으니까. 

하지만 대부분의 사람들이 User-Agent를 조작하지 않고 그대로 보내기 때문에,

User-Agent 헤더를 활용해서 접속자 통계 등을 내곤 한다. 

또, 이를 활용해 IE로 접속한 사람들을 찾아내고, IE는 지원하지 않으니 크롬으로 접속해달라는 메시지를 표시하기도 한다. 

Accept

이제, Accept 시리즈를 알아보자. 

Accept 헤더는 요청을 보낼 때 서버에, 이런 타입(MIME)의 데이터를 보내줬으면 좋겠다고 명시할 때 사용한다. 아래처럼 콤마로 여러 타입을 동시에 적어줄 수도 있다. 

위와 같이 요청 헤더를 보낸다면, html 형식, xhtml+xml 형식 등등의 응답을 처리하겠다는 뜻이다. 

Accept 시리즈라고 한 것은, Accept-Encoding, Accept-Charset, Accept-Language 등도 있기 때문이다. 

공통 헤더의 Content 시리즈와 대응된다. 

Accept로 원하는 형식을 보내면, 서버가 그에 맞춰 보내주면서 응답 헤더의 Content를 알맞게 설정할 것이다. 

Accep-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은 오타다. Referrer가 표준어인데 실수로 Referer로 만들었다고 한다. 

다음 포스팅에서는 응답 헤더에 대해서 알아보자. 

2021.05.28 - [CS/네트워크] - [네트워크] 알아두면 좋은 HTTP 응답 헤더

이 포스팅은 아래 링크를 참고하였습니다. 

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

HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다. 

(*HTTP에 대해 알고 싶다면 아래 포스팅을 읽어보세요)

https://dolphinsarah.tistory.com/38

이번 포스팅에서는 HTTP 메소드에 대해 알아보고자 한다. 

HTTP 메소드는 HTTP 요청을 할 때 사용하는 메소드이다. 

데이터를 가져오고 싶으면 GET 메소드를, 데이터를 새로 만들고 싶으면 POST 메소드를, 데이터를 삭제하고 싶으면 DELETE 메소드를, 데이터를 수정하고 싶으면 PATCH 메소드를, 이외에도 PUT, HEAD, OPTIONS, CONNECT, TRACE 등이 있다. (자주 사용되는 것은 GET, POST, DELETE, PATCH, PUT 정도이다.)

이 메소드들을 필요에 맞게 요청 시 사용하면 된다. 

요청만 보낸다고 그대로 되는 것은 아니고, 서버가 요청을 검증한 후 유효하면 실행된다. 

HTML을 배웠다면 다들 form을 한 번씩 만들어보았을텐데, 아래와 같은 HTML form에 데이터를 입력하고 새로운 form을 만들고자 할 때는 method를 POST로 설정하고, action을 명시해주어야 한다. action은 form 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL이다. 

<form action="/examples/media/action_target.php" method="post">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

HTML form만 사용해보았다면, 메소드로 GET과 POST만 사용해보았겠지만, 실제로 요청을 보낼 때는 PUT, DELETE, PATCH 등 더 자세한 동작을 정의할 수 있다. 

보통 PUT은 전체 수정(대체), PATCH는 부분 수정, DELETE는 제거 요청 시 사용한다. 

이처럼 주소를 자원이라 보고, 메서드를 동사라고 보는 개발 방식이 바로 REST이다.

예를 들어, GET /user라고 요청을 보내면, 사용자들의 정보를 가져오겠다는 의미이고, DELETE /user/5라고 요청을 보내면, id가 5인 사용자를 제거하겠다는 의미가 된다. 

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

GET과 DELETE도 본문을 넣어 보내는 것이 불가능한 것은 아니지만, GET과 DELETE의 본문은 어떻게 처리해야 한다는 정의가 없기 때문에(서버가 본문을 무시하는 것이 권장된다고 한다), GET이나 DELETE 요청 시에는 본문을 같이 보내지 않는다. 

아래는 내가 만든 웹사이트의 회원가입 요청 시의 POST 메소드를 사용한 예다. 

Request Payload 부분이 본문 부분(헤더 다음에 들어가는 부분)이다.

서버는 저 본문을 받아 파싱(해석)한 후 사용하게 된다. 

나머지 HEAD, OPTIONS, TRACE, CONNECT에 대해서도 알아보자. 이 메소드들은 쓰는 사람들을 제외하고는 자주 보기 힘든 메서드들이다. 

HEAD는 요청에서 헤더만 가져올 때 사용한다. 단, 헤더가 GET 요청의 헤더이다. 

HEAD https://www.dolphinSarah.com HTTP/1.1 요청을 보낸다면, GET https://www.dolphinSarah.com HTTP/1.1 요청을 보내고 헤더만 가져오는 것과 동일하다는 뜻이다. 

OPTIONS는 CORS 문제에서 본 적이 있을 것이다. OPTIONS는 서버가 어떤 메서드를 지원하는지 알아볼 때 사용한다. 

아래와 같이, OPTIONS를 통해 서버가 OPTIONS, GET, HEAD, POST 메서드를 지원한다는 사실을 알 수 있다. 

또한, CORS 상황에서는 다른 도메인 서버에 먼저 OPTIONS 요청을 날린 뒤, 그 서버가 요청을 허용하면 실제 요청(GET, POST 등)을 날린다. 

즉, OPTIONS 요청은 서버에게 실제 요청을 보내기 전에 서버를 테스트하는 용도라고 보면 된다.

TRACE와 CONNECT는 진짜 쓰이는 곳에서만 쓰인다고 한다. 나는 아직까지 한 번도 써본 적은 없지만, TRACE는 핑퐁 테스트 같은 곳에 쓰이고, CONNECT는 양방향 연결을 할 때(SSL(HTTPS)을 사용하는 웹사이트에 접속할 때) 쓰인다고 한다. 

지금까지 HTTP 요청 메소드들에 대해 알아보았는데, GET, POST, DELETE, PUT, PATCH, OPTIONS 정도만 알아두면 된다. 

시작줄을 알았으니, 이제 헤더에 대해 알아보자. 

2021.05.27 - [CS/네트워크] - [네트워크] 알아두면 좋은 HTTP 공통 헤더와 요청 헤더

아래의 포스팅을 참고하여 작성하였습니다. 

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

HTTP는 Hyper Text Transfer Protocol로, 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다. 

(데이터를 주고 받으면서 발생하는 에러(ex) CORS, CORB)들은 HTTP만 잘 알아도 쉽게 해결할 수 있다.)

아래 이미지는 내가 만든 웹사이트의 어떤 포스트의 데이터를 가져오는 요청과 그에 대한 응답 정보를 담고 있는 헤더이다. 저 각각의 줄들이 다 정보를 담고 있다. 

서버의 역할은 요청에 대한 응답을 보내준다는 것임을 기억하며 '요청'부터 알아보자. 

요청

위 이미지에서 내 웹사이트 서버에게 localhost:3060/post/45에 대한 정보를 달라고 요청했다. 요청을 보낼 때는 요청에 대한 정보를 담아서 서버로 보낸다. 

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

HTTP 메세지는 시작줄, 헤더, 본문으로 구성됩니다. 

첫 줄은 시작줄이다. POST (웹사이트 주소) HTTP/1.1이라고 적혀있다. POST는 HTTP 메서드이다. HTTP/1.1는 HTTP 버전이다. 즉, 요청 메세지의 시작줄은 메서드(POST)-주소(웹사이트 주소)-버전(HTTP/1.1)으로 구성된 것이다. 

두 번째 줄부터는 헤더이다. 요청에 대한 정보를 담고 있다. User-Agent, Upgrade-Insecure-Requests 등이 헤더에 해당된다. 헤더 종류는 이 뿐만 아니라 매우 다양하다. 

헤더에서 한 줄 띄우고 본문이 시작된다. 본문은 요청을 할 때, 함께 보낼 데이터를 담는 부분이다. 예를 들어 사용자가 회원가입 요청을 보냈을 때, 아이디, 비밀번호 등 다양한 데이터가 요청에 포함되는데, 이런 데이터가 본문에 담겨있다. 

응답

아래는 HTTP 메시지(응답)이다. 

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

첫 줄은 버전(HTTP/1.1)-상태코드(403)-상태메세지(Forbidden)로 구성되어있다. 

두 번째 줄부터는 헤더이다. 응답에 대한 정보를 담고 있다. 역시 헤더 종류는 매우 다양하다. 

요청을 할 때는 따로 전송할 데이터가 없다면 본문이 없는 경우도 있지만, 응답에는 보통 본문이 있다. 보통 서버에 데이터를 요청하고, 응답 메시지에는 요청한 데이터를 담아서 보내주기 때문이다. 

이처럼 HTTP 메시지만 보아도 정말 많은 정보를 알 수가 있다. 

다음으로는 HTTP 요청 메소드에 대해 알아보겠다. (아래 포스팅을 클릭해주세요)

https://dolphinsarah.tistory.com/39

다음 글을 참고하여 작성했습니다.

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