TIL : HTTP / position

hihyeon_cho·2023년 3월 30일
0

TIL

목록 보기
93/101

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요

HTTP(Hyper Text Transfer Protocol)

  • HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜

  • 클라이언트와 서버 간의 자원 즉 데이터를 교환하기 위한 TCP/IP 기반 통신 프로토콜

    • 프로토콜
      서로 다른 하드웨어 기기 간의 데이터 통신 규약
    • TCP
      서버와 클라이언트 사이의 통신 연결을 제어하는 트랜스포트 계층의 프로토콜.
    • IP(Internet Protocol)
      패킷들을 가장 효율적인 방법으로 최종 목적지로 전송하기 위해 필요한 프로토콜
    • TCP/IP
      TCP를 기반으로 한(신뢰성 통신을 하는) HTTP,FTP,SMTP 등 수 많은 프로토콜들이 IP 위에서 동작하기에 묶어서 TCP/IP라고 한다.
      효율적으로 빠르게(IP) 보내면서 안전하게(TCP) 전달해주려는 목적

특징

  • 클라이언트가 요청을 보내야만 응답할 수 있는 단방향성
  • 클라이언트의 요청으로 서버와 연결된 후, 요청에 대한 응답의 데이터를 전송하면 연결이 종료되는 비연결성 => 실시간 통신 불가능
  • 사람이 읽을 수 있고 디버그 하기 쉬운 텍스트 기반
  • 새로운 방법과 헤더의 정의를 허용하기 때문에 새로운 사용사례와 애플리케이션을 지원하도록 확장 가능

문제점

  • 평문 통신이기 때문에 보안에 취약
  • 통신 상대가 검증된 상대인지 확인하지 않아 위장 가능성
  • 완정성 증명 불가능으로 변조 가능

=> HTTP를 기반으로 하는 암호화된 프로토콜 HTTPS 등장

HTTP 메소드

클라이언트가 웹 서버에게 요청의 목적이나 종류를 알라는 수단

주요 메서드

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

속성

  • 안전
    - 계속 호출해도 리소스를 변경하지 않는 특성
  • 멱등
    - 동일한 요청을 여러 번 보내도 한 번 보내는 것과 똑같은 결과를 갖는 특성
    • GET, PUT, DELETE는 멱등하다고 볼 수 있지만, POST나 PATCH는 멱등하다고 볼 수 없다.
  • 캐시기능
    - 응답 결과를 서버에 캐시 해서 사용해도 되는 메소드
    - GET, HEAD, POST, PATCH 모두 캐시가 가능하지만 실제로는 GET, HEAD만 캐싱이 쓰임

HTTP 메시지

HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청(request)은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(response)은 요청에 대한 서버의 답변입니다.

시작 줄(start-line)에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 기록되어 있습니다. 이 줄은 항상 한 줄로 끝납니다.
옵션으로 HTTP 헤더 세트가 들어갑니다. 여기에는 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어갑니다.
요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(blank line)이 삽입됩니다.
요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서(document)가 들어갑니다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시됩니다.
HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 요청 헤드(head) 라고 부르며, 이와 반대로 HTTP 메시지의 페이로드는 본문(body)이라고 합니다.

HTTP 상태코드

  • 1xx (Informational): 요청이 수신되어 처리중
  • 2xx (Successful): 요청 정상 처리
    • 200 OK : 요청 성공
    • 201 Created : 요청 성공해서 새로운 리소스가 생성됨
    • 202 Accepted : 요청이 접수되었으나 처리가 완료되지 않았음
    • 204 No Content : 서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터가 없음
  • 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 (보통 리다이렉션처리)
    • 301 Moved Permanently : 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
    • 302 Found : 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
    • 303 See Other : 리다이렉트시 요청 메서드가 GET으로 변경
    • 304 Not Modified : 캐시를 목적으로 사용
    • 307 Temporary Redirect : 리다이렉트시 요청 메서드와 본문 유지(요청 메서드를 변경하면 안된다.)
    • 308 Permanent Redirect : 리다이렉트시 요청 메서드와 본문 유지(처음 POST를 보내면 리다이렉트도 POST 유지)
  • 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음
    • 400 Bad Request : 클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음
    • 401 Unauthorized : 클라이언트가 해당 리소스에 대한 인증이 필요함
    • 403 Forbidden : 서버가 요청을 이해했지만 승인을 거부함
    • 404 Not Found : 요청 리소스를 찾을 수 없음
  • 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함
    • 500 Internal Server Error : 서버 문제로 오류 발생, 애매하면 500 오류
    • 502 Bad Gateway: 게이트웨이(서로 다른 프로토콜을 연결해주는 장치)가 잘못된 프로토콜을 연결하거나, 어느쪽 프로토콜에 문제가 있어 통신이 제대로 되지 않은 상황
    • 503 Service Unavailable : 서비스 이용 불가




position 을 어떻게 사용하는지 알려주세요

HTML 문서 상에서 요소가 배치되는 방식을 결정하는 position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용됩니다.

  • static
    : 요소를 일반적인 문서 흐름에 따라 배치합니다. defalut값으로 top, left, bottom, right, z-index 속성이 영향을 끼치지 않습니다.

  • relative
    요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로(상대적으로) top, right, bottom, left의 값에 따라 위치를 적용합니다. 다른 요소에는 영향을 주지 않기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

  • absolute
    요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 가장 가까이에 위치가 지정된 부모요소에 상대적으로 배치하게 되며, 부모요소 중 위치 지정요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다.
    최종 위치는 top, right, bottom, left 값이 지정합니다.

  • fixed
    브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 구현할 때 사용합니다.
    요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치하며 최종 위치는 위와 같이 top, right, bottom, left 값이 지정합니다.
    ( 부모 요소 중 하나가 transform, perspective, filter를 하나라도 가지고 있다면 그 부모요소를 뷰포트 대신 컨테이닝 블록으로 삼아 배치합니다. )

  • sticky
    CSS에서 비교적 최근에 추가된 속성 값으로 화면을 스크롤링할 때 효과가 나타납니다.
    요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 부모와, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 top, right, bottom, left의 값에 따라 배치합니다.
    ( 이 오프셋은 다른 요소에는 영향을 주지 않습니다. )

profile
코딩은 짜릿해 늘 새로워 ✨

0개의 댓글