Skip to content

Latest commit

 

History

History
108 lines (92 loc) · 5.62 KB

HTML과_HTTP.md

File metadata and controls

108 lines (92 loc) · 5.62 KB
Raw

💡 주소창에 www.google.com을 입력하면?

  1. 유저가 웹 브라우저에 URL을 입력한다.
  2. URL로 지정한 웹 서버에게 HTTP 요청을 송신한다.
  3. 웹 서버가 요청을 해석한다.
  4. 웹 서버가 요청받은 파일을 웹 브라우저에게 돌려보낸다.
  5. 웹 브라우저가 수신한 데이터를 해석해서 표시한다.

💡 URL

  • 웹 사이트의 주소 = URL(Uniform Resource Locator)
  • 인터넷상의 데이터 위치를 가리키는 표준적인 표기법
    • 정식 명칭 : URI(Uniform Resource Identifier)

💡 정적 VS 동적 웹페이지

정적 웹페이지

  • 웹 서버에 저장해 둔 사이트
  • 수많은 개인 사이트 및 기업 공식 사이트 등

동적 웹페이지

  • 웹 서버가 자동으로 생성한 웹 페이지
  • 검색엔진의 검색 결과 페이지, 온라인 쇼핑몰 장바구니 등

💡 HTML

  • HTML = 웹 페이지의 내용

  • HTML(HyperText Markup Language)은 '하이퍼텍스트'를 기술하기 위한 규칙

  • HTML5

    • WHATWG와 W3C가 발표하는 HTML의 최신 버전
    • 문법면에서는 이전에 비해 상당히 간결하고 명확해짐
    • API면에서, 비디오 및 오디오와 같은 미디어 엘리먼트에 대한 API를 포함해 오프라인 웹 앱 구현, 문서 편집 등과 같은 다양한 기능에 대한 API 추가

💡 HTTP

  • HTTP(HyperText Tranfer Protocol)
  • 하이퍼텍스트(HTML)을 전송하기 위한 프로토콜
  • 하이퍼텍스트뿐만 아니라 다양한 파일을 전송하는데도 이용함

💡 HTTP 요청

웹 브라우저가 웹 서버로 보내는 요청으로 1) 요청 행(Requst Line), 2) 메시지 헤더(Message Header), 3) 엔티티 바디(Entity Body) 3부분으로 나눌 수 있음

  • 요청 행 : HTTP 요청의 첫 번째 라인에 위치하며, 웹 서버에게 처리 요구 전달

    • 메소드, URI 버전(웹 브라우저가 지원하는 HTTP의 버전으로, 주로 1.0, 1.1, 2.0)으로 구성

      Method 의미
      POST URI로 지정한 서버의 커맨드에 대해 데이터를 송신한다
      GET URI로 지정한 데이터를 가져온다
      PUT URI로 지정한 데이터를 전송한 데이터로 덮어쓴다
      HEAD URI로 지정한 데이터의 응답 헤더만을 가져온다

  • 메시지 헤더 : 웹 브라우저의 종류나 버전, 데이터 형식등의 정보가 쓰여있음

  • 엔티티 바디 : 파일을보낼 때 사용하지만, 보낼 데이터가 없는 경우에는 사용하지 않음

    • 메시지 헤더 다음에 나오며 구분을 위해 빈 행이 들어감

💡 HTTP 응답

웹 브라우저가 HTTP 요청을 보내면, 웹 서버는 이에 대해 HTTP 응답을 반환하며, 1) 상태행(Status Line), 2) 메시지 헤더(Message Header), 3) 엔티티 바디(Entity Body)의 3부분으로 나뉨

  • 상태행 : 버전, 상태코드, 설명문으로 나뉨

    • 버전 : HTTP 요청과 같이 HTTP의 버전을 가리키며 주로 사용되는 버전은 1.0, 1.1, 2.0

    • 상태 코드 : 요청에 대한 웹 서버의 처리 결과를 나타내는 세 자리 숫자

      상태 코드 의미
      1xx 정보, 추가 정보가 있다는 것을 알린다
      2xx 성공, 서버가 요청을 성공적으로 처리했다는 것을 알린다
      3xx 리다이렉트, 다른 URI로 다시 처리했다는 것을 알린다
      4xx 클라이언트 에러, 요청에 문제에 있어 처리하지 못했다는 것을 알림
      5xx 서버 에러, 서버쪽에 문제가 있어 처리하지 못했다는 것을 알린다

    • 설명문 : 이 상태의 코드의 의미를 간단히 나타낸 텍스트

  • 메시지 헤더 : 웹 서버가 웹 브라우저에게 더욱 상세한 정보를 전달하기 위해 이용
    • 데이터의 형식, 업데이트된 날짜 등 포함
  • 앤티티 바디 : 웹 브라우저에 반활할 데이터
    • 메시지 헤더 뒤에 구분을 위해 빈행이 들어감

👉 크롬 - 검사 - Network - Header 에서 확인가능

💡 HTTP 쿠키

HTTP 쿠키란 웹서버가 웹 브라우저에 특정한 정보를 저장해두기 위한 시스템

  • 웹 서버는 쿠키를 이용함으로써 유저의 로그인 정보나 사이트 내 웹 페이지의 열람 이력 등을 관리할 수 있음
    • 쇼핑몰 사이트에서 열어보았던 상품표시
  • 스테이트풀(Stateful) 지원
    • HTTP는 스테이리스한(상태가 없는) 파일 전송을 수행하지만 쿠키를 이용하면 스테이트풀(Stateful)한 처리를 할 수 있음

💡 HTTP/1.x VS HTTP/2.0

  • HTTP/1.1 : 1999년에 발표되었으며 텍스트 위주의 전송 프로토콜

  • HTTP/2.0 : 2015년 IETF에 의해 공식적으로 발표된 HTTP/1.1의 차기 버전

  • 개선점

    • Head of line blocking(HOL)
      • HTTP/1.1까지는 한번에 한 파일밖에 못 보냈음
      • HTTP/2.0 에서는 여러 파일을 한꺼번에 병렬 전송을 하는 식으로 로딩 시간을 줄이는 방법을 사용
    • 중복 헤더의 제거
      • 같은 내용의 헤더를 보낼 경우, 생략하여 처리함으로써 처리속도를 높임
    • Header compression
      • 헤더를 압축하여 용량 대비 처리 효율성을 높임
      • 헤더 크기 자체도 크게 줄어듬
    • Server Push
      • 특정 파일을 서버에 지정해서 HTTP 전송 시 같이 push하는 방식
      • JavaScript나 CSS, 글꼴, 이미지 파일 등을 지정
    • Prioritization
      • 웹 페이지를 구성하는 파일의 우선순위 지정 가능
      • 로딩의 우선순위를 구분하여 중요도를 차등 배분할 수 있음