[HTTP 완벽 가이드] 01 HTTP 개관_(예비)FE가 보는 HTTP

Chaejung·2022년 7월 20일
CS독서스터디
5

엘리스AI트랙4기_독서스터디

목록 보기
6/10
post-thumbnail

HTTP 완벽 가이드

HTTP는 지난 25년간 사용되어 왔으며 앞으로도 계속해서 사용될 것이다. 업계의 유행에 따라 선호하는 언어가 바뀌고 대세인 프레임워크가 바뀌더라도 웹 애플리케이션이 HTTP를 사용한다는 사실은 변하지 않는다. 웹 서비스를 위한 인트라 역시 끊임없이 진보해왔지만 서버, 캐시, 프락시 등 모든 웹의 구성요소들이 HTTP를 사용해서 대화한다는 사실은 변하지 않는다.

따라서 서버사이드 웹 프로그래머, 프론트엔드 웹 프로그래머, 시스템 엔지니어 등 웹과 관련된 일을 하는 이라면 누구라도 HTTP를 공부하는데 시간과 노력을 들이는 게 효과적이고도 안전한 투자가 될 것이다.

(xviii, 옮긴이의 글)

앞으로 집중적으로 보고 싶은 부분

  • 2장 URL과 리소스: 통합 자원 지시자(Uniform Resource Locator, URL)의 포맷과 인터넷상에서 URL이 가리키는 리소스의 다양한 형식에 대해 상세히 다룬다. 그리고 URL에서 더 진화한 지시자인 URN에 대한 내용도 다룬다.

    	이유: 기술 면접 질문으로 나온다는 얘기도 들었고, 브라우저 작동 방식에 중요한 기능을 한다고 생각하기 때문

  • 5장 웹 서버: 웹 서버 아키텍처에 대한 개요를 제공한다.

    	이유: 웹 개발자 지망생이니깐, 당연히 알아야하는 부분이 아닐까.

  • 7장 캐싱: 자주 사용하는 문서를 로컬에 복제하여 성능을 높이고 부하는 낮추는 장비인 웹 캐시가 동작하는 방식을 알아본다.

    	이유: 혹시나 이게 웹 페이지 로딩 속도를 줄일 수 있지 않을까 하는 의문, 그리고 항상 웹 성능 향상을 위해 캐시 정리를 했지 정확히 어떻게 돌아가는지 모르고 있었기 때문

  • 11장 클라이언트 식별과 쿠키: 특정 사용자만 볼 수 있는 콘텐츠를 제공하는 데 쓰이는 사용자 식별 기술을 다룬다.

    	이유: 엘리스 중에서도 쿠키와 세션을 배웠었는데, 복습 겸 다시금 개념을 잡고 싶다.

  • 19징 배포 시스템: 웹 콘텐츠를 생성하고 웹 서버에 그 콘텐츠를 배포하는 기술에 대해 논의한다.

    	이유: 프론트 혼자서라도 배포할 수 있어야한다고 생각하고, 그 원리를 이해하면 다양한 배포 서비스를 이해할 수 있을 거라 생각했기 때문

중요하다고 생각한 점

URL의 표준 포맷

  • URL: 리소스가 정확히 어디에 있고 어떻게 접근할 수 있는지 분명히 알려준다.
  • 스킴(scheme): 리소스에 접근하기 위해 사용되는 프로토콜
  • 서버의 인터넷 주소
  • 웹 서버의 리소스
ex.
http://www.joes-hardware.com/specials/saw-blade.gif
스킴: http://
서버의 인터넷 주소: www.joes-hardware.com
웹 서버의 리소스: /specials/saw-blade.gif

브라우저 작동 방식⭐️

  1. 웹브라우저는 서버의 URL에서 호스트 명을 추출한다.
    (호스트 명: IP 주소에 대한 이해하기 쉬운 형태의 별명, DNS(Domain Name Service)로 쉽게 IP로 변환될 수 있다)
  2. 웹브라우저는 서버의 호스트 명을 IP로 변환한다.
  3. 웹브라우저는 URL에서 포트번호(있다면)를 추출한다.
  4. 웹브라우저는 웹 서버와 TCP 커넥션을 맺는다.
  5. 웹브라우저는 서버에 HTTP 요청을 보낸다.
  6. 서버는 웹브라우저에 HTTP 응답을 돌려준다.
  7. 커넥션이 닫히면, 웹브라우저는 문서를 보여준다.

HTTP에 대한 평가

어떤 프로그래머들은, 특히 속도가 빠른 소프트웨어를 설계할 때, HTTP 분석은 까다롭고 오류가 발생하기 쉽다고 불평하곤 한다. 이진 형식이나 더 엄격한 텍스트 구조였다면 처리가 더 간단했겠지만, HTTP는 확장과 디버그가 용이하기에 대다수의 HTTP 프로그래머로부터 좋은 평가를 받고 있다. (11쪽)

캐시

웹캐시와 캐시 프락시는 자신을 거쳐 가는 문서들 중 자주 찾는 것의 사본을 저장해 두는, 특별한 종류의 HTTP 프락시 서버다. 다음번에 클라이언트가 같은 문서를 요청하면 그 캐시가 갖고 있는 사본을 받을 수 있다. (20쪽)

웹 사이트 자체에서 캐시 관리/제한을 할 수 있다면 로딩 속도를 제어할 수 있지 않을까하는 의문이 들었다. 약간 localStorage에 임시 저장하는 느낌이 들었기 때문에... 정확한 것은 추후 캐시를 다루는 7장에서 공부할 예정!

에이전트

예를 들어 사람의 통제 없이 스스로 웹을 돌아다니며 HTTP 트랜잭션을 일으키고 콘텐츠를 받아오는 자동화된 사용자 에이전트가 있다. 이들 자동화된 에이전트는 보통 '스파이더'나 '웹로봇'과 같이 다채로운 이름을 갖고 있다. 스파이더는 웹을 돌아다니며, 검색엔진의 데이터베이스나 가격비교 로봇을 위한 제품 카탈로그와 같은 유용한 웹 콘텐츠 보관소를 만든다. 자세한 것은 9장을 보라. (22장)

이건 그냥 흥미로워서 같이 첨부, 웹 개발과는 크게 연관이 있을 것 같진 않지만 언젠간 구현해보고 싶다.
Web Spider 구현하기

의문이 든 점

텔넷?

텔넷은 원격 터미널 세션을 위해 흔히 사용되지만 HTTP 서버를 포함한 일반적인 TCP 서버에 연결하기 위해 사용될 수도 있다. 더불어 웹 서버와 직접 대화하기 위해서도 사용할 수 있다.
개인적으로 잘 쓰이지는 않지만 규모가 있는 곳에서는 한 스위치에 연결된 PC들의 IP, mac 주소를 원격으로 관리하기 위해 쓰인다고 한다.1

텔넷은 HTTP 클라이언트는 잘 흉내 내지만 서버로서는 변변치 않음을 주의하라. 그리고 자동화된 텔넷 스크립팅은 전혀 재미있지 않다. 보다 유연한 도구로, nc(netcat)를 검토해 볼 수 있다. nc는 HTTP를 포함한 UDP 혹은 TCP 기반의 트래픽을 조작하고 스크립트할 수 있게 해준다. 자세한 것은 http://netcat.sourceforge.net 를 보라 (18쪽)

아래는 책에서 나온대로 실습을 하려 했지만 해당 웹사이트는 DNS가 더 이상 지원되지 않는 것 같아, 다른 예제 사이트를 들고 와서 실행해보았다.

$ brew install telnet

$ telnet www.joes-hardware.com 80   
www.joes-hardware.com: nodename nor servname provided, or not known

$ telnet www.example.com 80
Trying 93.184.216.34...
Connected to www.example.com.
Escape character is '^]'.
$ GET http://www.example.com HTTP/1.0
      
HTTP/1.0 200 OK
Accept-Ranges: bytes
Age: 552396
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Wed, 20 Jul 2022 13:28:08 GMT
Etag: "3147526947+ident"
Expires: Wed, 27 Jul 2022 13:28:08 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (sab/57A8)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 1256
Connection: close

<!doctype html>
<html>
<head>
    <title>Example Domain</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>    
</head>

<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
Connection closed by foreign host.

커넥션 수립 후 요청을 보낸 다음 html 파일을 응답으로 받는다.

느낀 점

HTTP 는 통신 프로토콜로 오랜 기간 큰 버전 변화없이 유지되어 왔고, 유지될 예정이라고 한다.
웹 서버도 기존 PC 서버에서 클라우드 서비스로의 경향 변화가 일어났는데, 통신 프로토콜은 과연 큰 변화가 없을지 의문이다.

또한 깊게 파면 당연히 더 공부를 할 수 있겠지만 우선은 기술 면접을 대비할 수 있을 정도만 다뤄야 겠다는 생각이 든다.

더불어 인터넷에서 돌아다니는 여러 CS 정보를 짜깁기하여 이해하는 것보다 한 책을 두고 공부하는 게 훨씬 안심이 되고, 기준이 되기에 정리하기도 편하다.

특히나 URL과 URI의 차이에 대해서 다시 재정립하고 갔는데, 이 부분은 아마 다음 글에서 정확히 다루지 않을까 싶다. 2장에서 바로 나오기 때문!

당장은 FE 개발과 크게 상관은 없겠지만 본 프로토콜을 심도있게 이해하고 있다면 통신 및 로딩과 관련하여 해결책을 스스로 찾을 수 있을 것이라 생각한다. 또한 추후 다룰 것 같은 캐싱, 클라이언트 식별과 쿠키도 FE에서 꽤나 중요한 부분이라고 생각한다.

한 줄 요약

HTTP, 프론트와 크게 상관없을 것 같지만 전혀 아니다!

출처

1: 텔넷 이란?

profile
Chaejung
프론트엔드 기술 학습 및 공유를 활발하게 하기 위해 노력합니다.
이전 포스트

[학.알.17.실.개.기] 16장 HTTPS & 17장 OAuth

다음 포스트

[HTTP 완벽 가이드] 02 URL과 리소스_velog url 인코딩해보기

0개의 댓글