티스토리 뷰

Web개발

HTTP 프로토콜

Tomining 2017. 1. 2. 11:38
우리는 웹 브라우저를 통해 수많은 웹 페이지들을 접속한다. 웹 브라우저에서 특정 페이지를 접속할 때 URL이라는 것을 입력하는데, 그 앞 부분을 살펴보면 http:// 로 시작하는 것을 확인할 수 있다. 그렇다면 http는 왜 붙는 것이며 무엇을 의미할까?

먼저 URL 주소 각 부분의 의미를 알아보자.

  • URL 스킴: URL에 사용되는 프로토콜
  • 호스트명: 보통 도메인 정보, 호스트 IP가 될 수도 있다.
  • 포트: http는 80, https는 443 포트 사용
  • 경로: 파일이나 애플레케이션 경로
  • 쿼리스트링: 질의 문자열, &로 구분된 키=값 형태
  • 프라그먼트: 문서 내의 앵커 등 조각을 지정

URL의 제일 앞부분의 http는 프로토콜을 의미하는 것이다.
이 프로토콜에는 많은 것들이 있으나 주로 사용하는 것들은 아래 몇 가지 정도일 것이다.
  • http
  • https
  • file: 웹 브라우저에서 로컬 디렉토리에 있는 파일을 접근할 수 있다.
  • ftp: ftp 서버에 저장된 파일을 접근할 때 사용
(이외에도 있겠지만 나는 사용해 본 적이 없다.)

이 중에서 제일 많이 사용되는 http에 대해서 정리해 본다.

HTTP란?

HTTP(HyperText Transfer Protocol)는 웹 상에서 정보를 주고 받을 수 있는 프로토콜이다. HTTP는 이미지, 동영상, 오디오, 텍스트 문서 등 다양한 종류의 데이터를 전송할 수 있다. HTML은 HTTP로 전송할 수 있는 데이터의 한 종류로 웹 브라우저에서 주로 보여지는 웹 문서이다.
HTTP는 1.0, 1.1 2.0 버전이 있다. 일반적으로 HTTP라고 하면 1.1을 의미하며 최근에는 2.0도 많이 도입하는 추세이다.(HTTP/2는 별도로 정리할 예정이다.)

HTTP(HTTP/1.1)의 동작방식은 아래와 같다.

1. 클라이언트와 서버 간의 연결
2 ~ 7. 필요한 데이터를 요청하고 받음
8. 클라이언트와 서버 간의 연결 종료

Connectless & Stateless

HTTP는 Connectless 방식으로 동작한다. HTTP 동작방식 그림에서도 확인할 수 있듯이 서버에 연결하고, 요청 후 응답을 받으면 연결을 끊는다. 기본적으로는 하나의 자원에 대해서 하나의 연결을 만든다. 이런 작동방식은 장,단점을 가진다.
  • 장점: 불특정 다수를 대상으로 하는 서비스에 적합한 방식. 많은 요청이 있더라도 접속유지는 최소한으로 할 수 있어서 더 많은 요청을 처리할 수 있음
  • 단점: 연결이 종료되므로 이전 상태를 알 수 없음(stateless)
    이는 웹 서비스에서 문제가 될 수 있는데, 예를 들어 로그인 성공 후 로그 정보를 유지할 수 없다. HTTP에서는 이를 해결하기 위해 Cookie를 사용하게 된다.
    (Cookie가 나온 배경이 stateless한 HTTP의 특징 때문이다.)
Cookie 관련 내용은 https://en.wikipedia.org/wiki/HTTP_cookie 에서 자세히 확인할 수 있다.

요청 & 응답

요청(Request)

다음은 www.naver.com 에 접속시 요청 헤더이다.
GET http://www.naver.com/ HTTP/1.1 
Host: www.naver.com 
Connection: keep-alive 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate, sdch Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4 
Cookie: NNB=V4WH2ME3MIOFM; npic=ogpTgCngd3azcoNXhyIrbedDfn2LXmqaQ0UEkXxWpk3P9X6oN3if9OHJvzsL533+CA==; NFS=2; MmNiOTMwNWUtZjM2YS00YTVhLWExOTQtNjYyMWIyN2Y1Mzk3_kB0Wamni=true; ASID=0a0c2f5f00000158b42357950000005e; YjMzY2ZhNjItZWMxYS00ODY4LTg5NWItZTQyMGU3YzY3ZjE2_60lgAbZR=true; 7802DF01_0000000E9414=1; 7802DF01_0000000E92EA=1; NM_THEMECAST_NEW=tcc_bty%2Ctcc_fod%2Ctcc_lif; 7802DF01_0000000EA04D=1; nx_ssl=2; 7802DF01_0000000EA06D=1; 7802DF01_0000000EA051=1; BMR=s=1483062824665&r=http%3A%2F%2Ftvcast.naver.com%2F&r2=http%3A%2F%2Fwww.naver.com%2F; _ga=GA1.2.879758913.1445585624; nid_iplevel=1; page_uid=n3P+lsoiqxNss5vtN5NssssssuG-219584; nrefreshx=0
HTTP 요청의 첫 부분은 3가지 필수 값들로 구성된다.
  • 요청 메서드: GET, POST, PUT, DELETE 등 요청 방식
  • 요청 URI: 요청하는 자원 위치
  • HTTP 프로토콜 버전: HTTP/1.1 (요즘은 HTTP/2를 적용한 사이트도 있다.)

응답(Response)

다음은 www.naver.com 요청에 대한 응답 정보이다.
HTTP/1.1 200 OK 
Server: nginx 
Date: Fri, 30 Dec 2016 04:01:00 GMT 
Content-Type: text/html; 
charset=UTF-8 
Connection: close 
Cache-Control: no-cache, no-store, must-revalidate 
Pragma: no-cache 
P3P: CP="CAO DSP CURa ADMa TAIa PSAa OUR LAW STP PHY ONL UNI PUR FIN COM NAV INT DEM STA PRE” 
X-Frame-Options: SAMEORIGIN 
Content-Length: 98364 

<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=960"> <meta name="apple-mobile-web-app-title" content="NAVER" /> <meta property="og:title" content="네이버 메인"> <meta property="og:url" content="http://www.naver.com/"> <meta property="og:image" content="http://static.naver.net/www/mobile/edit/2016/0705/mobile_212852414260.png"> <meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="네이버 메인"> <meta name="twitter:url" content="http://www.naver.com/"> <meta name="twitter:image" content="http://static.naver.net/www/mobile/edit/2016/0705/mobile_212852414260.png"> <meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1" /> <title>NAVER</title>
HTTP 응답의 첫 부분은 요청과 같이 3가지 필수 값으로 구성된다.
  • HTTP/1.1: 응답 프로토콜과 버전
  • 200: 응답코드
  • OK: 응답 메시지, Not Found, Internal Server Error 등이 있다.

그 외에도 여러 가지 정보들을 포함하고 있다.
  • 날짜, 컨텐츠 유형, 케릭터셋, 캐쉬 제어 방식, 컨텐츠 길이
  • 컨텐츠 최종 수정일, Keep Alive 기능 설정 등(위 샘플에는 없음)

Content-Type: Body 내용이 HTML 문서인지, 이미지인지, CSS, Javascript인지 등의 형태를 알려준다. 이는 Body를 어떻게 읽을지 결정하므로 전송 데이터에 맞게 명시해야 한다.
Keep Alive: 지정된 Timeout 만큼 서버와의 연결을 끊지 않고 유지하게 되며, 그 동안은 해당 연결을 통해 요청(Request)를 계속해서 보낼 수 있다.

응답코드

보통 접하게 되는 응답 코드는 몇 가지 되지 않는다. 하지만 실제로는 많은 종류의 응답 코드가 존재한다.
크게 2XX, 3XX, 4XX, 5XX 계열의 4가지 그룹으로 나눌 수 있다.
상세한 내용은 https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C 에서 확인할 수 있다.
  • 2XX: 성공
    보통 200 OK 를 의미
  • 3XX: 리다이렉션
  • 4XX: 요청 오류
    403 Forbidden, 404 Not Found
  • 5XX: 서버 오류
    500 Internal Error

HTTP 응용 소프트웨어

최근 5년간 Google Trend는 아래와 같다. Apache가 여전히 강세이긴 하나 하락세이고, Nginx가 급부상하는 추세인 것 같다.


웹 브라우저

웹 브라우저는 HTTP를 사용할 수 있는 클라이언트 프로그램이다.
다양한 웹 브라우저가 있는데, IE를 제치고 크롬이 1위를 탈환한 것 같다. 최근 Edge 브라우저로 IE의 반격이 시작된 것 같으나 아직은 지켜봐야 하지 않을까 싶다.


최근 네이버에서도 Whale 브라우저를 공개하여 베타 테스트를 하고 있으나 아직은 갈 길이 멀어 보인다.(버그나 사용성 측면에서 아직은 부족하다고 생각한다.)
참고


저작자표시 비영리

'Web개발' 카테고리의 다른 글

HTTP/2란 무엇인가?  (0) 2017.01.09
Cookie & Session  (0) 2017.01.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함