HTTP 까보기

Chrome Devtools

참고자료

Chrome DevTools를 이용한 리소스 로드 시간 측정

HTTP

  • 웹 브라우저와 웹 서버 간의 통신을 위해 개발된 통신규약
  • 최근에는 REST API의 부상와 함께 다른 용도로도 널리 사용됨
    • 모바일 앱 - 서버 간 통신
    • 서버 - 서버 간 통신
  • 80번 포트를 기본으로 사용
  • 클라이언트의 요청(request)과
    서버의 응답(response)으로 이루어짐

역사

1991
HTTP 초기버전 발표. 텍스트만 전송할 수 있는 극도로 단순한 프로토콜. 1990년대 초 인터넷 붐을 일으킴
1996
여러 인터넷 서비스 업체들이 자체적으로 사용하던 HTTP 구현들을 모아 HTTP 1.0 발표
1999
1.0의 문제를 해결하고 여러가지 기능을 추가한 HTTP 1.1을 발표. 지금까지 사용되고 있는 버전

참고자료

Brief History of HTTP

HTTPS

  • HTTP over SSL
  • HTTP 통신을 암호화해 주고받는 내용을 중간에서 가로챌 수 없도록 함
  • 443번 포트를 기본으로 사용

HTTP/2

참고자료

spdy는 무엇인가?

HTTP 구성요소

Request & Response

  • 웹 브라우저(또는 다른 클라이언트)는 웹 서버에 요청(request)를 보냄
  • 그에 따라 서버는 클라이언트에 응답(response)를 보냄
  • 웹 브라우저의 경우, HTML 문서 형태의 응답이 오면 해당 문서를 분석한 후, 문서에 포함된 모든 자원에 대한 요청을 각각 추가로 보냄 (이미지, 동영상, 오디오, CSS, JS, 폰트, ...)

참고자료

What Happens When

Request Methods

  • HTTP 명세에는 8 종류가 등록되어 있고, 각각의 역할과 충족해야 하는 성질이 명시되어 있음
  • 웹 브라우저는 특정 상황에서 특정 메소드로 요청을 보내도록 만들어져 있음
  • Ajax와 같이 요청을 보내는 코드를 직접 짤 때는 요청 메소드를 선택할 수 있음
  • 자료의 본문을 요청하는 GET 메소드와, 새로운 자료를 등록하는 POST 메소드가 가장 많이 쓰임

참고자료

HTTP Method Definitions

URL

Percent Encoding

  • URL은 ASCII 문자(128개의 영문자+특수문자+제어문자)밖에 사용하지 못하기 때문에, non-ASCII 문자를 위한 표현방법이 필요함 #
  • Percent encoding은 non-ASCII 문자를 위한 웹 표준 인코딩 방법으로, JavaScript에 관련 기능이 포함되어 있음 
    
> encodeURIComponent("한글")
"%ED%95%9C%EA%B8%80"
> decodeURIComponent("%ED%95%9C%EA%B8%80")
"한글"

Response Status

응답의 성공, 실패 여부와 종류를 나타냄

HTTP Status Codes

Status Category

2xx
성공
3xx
추가 작업이 필요함
4xx
실패 - 클라이언트 책임
5xx
실패 - 서버 책임

Status Code - 2xx

200 OK
성공
201 Created
자료가 성공적으로 생성됨

Status Code - 3xx

301 Moved Permanently (Redirection)
자료가 완전히 다른 곳으로 이동했음
302 Found (Redirection)
자료가 일시적으로 다른 곳에 있음
304 Not Modified (Cache)
클라이언트가 이미 가지고 있던 자료가 수정되지 않았음 (그대로 사용하면 됨)

Status Code - 4xx

400 Bad Request
요청의 형태가 잘못되어 응답할 수 없음
403 Forbidden
요청한 자료에 접근할 권한이 없음
404 Not Found
요청한 자료가 없음

Status Code - 5xx

500 Internal Server Error
요청을 처리하던 중에 예상치 못한 오류가 발생함
503 Service Unavailable
서버가 일시적으로 응답을 할 수 없음

Hyper Text Coffee Pot Control Protocol

418 I'm a teapot

Header

  • 요청과 응답에 대한 추가 정보를 표현하는 데 사용됨
  • 인증, 캐싱, 쿠키, 보안, 프록시 등 웹 표준에 정의된 많은 기능을 제어하는 데 사용됨
Authorization
요청의 인증 정보
User-Agent
요청 중인 클라이언트의 정보
Location
301, 302 응답에서 자료의 위치
Accept
요청이 어떤 형태의 자료를 원하는지 나타냄
Content-Type
요청 혹은 응답이 어떤 형태의 자료인지 나타냄