📌HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요.
- HTTP란?
- HyperText Transfer Protocol의 줄임말, 직역하면 하이퍼텍스트 전달 프로토콜
- 하이퍼텍스트는 인터넷 사용자가 필요한 정보의 자유로운 검색을 가능하도록 해주는 텍스트 전개 방식
- HTTP는 이러한 하이퍼텍스트 방식의 정보를 교환하기 위한 하나의 규칙.
- 즉, HTML가 같은 문서를 전송하기 위해 사용되며 OSI 7 계층에서 응용 계층에 있는 프로토콜이다.
- 전통적인 클라이언트-서버 아키텍처 모델에서 클라이언트가 HTTP 메시지 양식에 맞춰 요청을 보내면, 이에 서버는 HTTP 메시지 양식에 맞춰 응답을 한다.
- 특정 상태를 유지하지 않는 무상태성(Stateless)
- HTTP 메세지 구조
- 클라이언트와 서버 사이에서 데이터가 교환되는 방식.
- 텍스트 정보를 구성하며 구성 파일, API, 기타 인터페이스에서 HTTP 메시지를 자동으로 완성한다.
- 요청(Request)과 응답(Response) 두 가지 유형이 있다.
- 요청과 응답은 유사한 구조를 가진다.
- Start line : 요청의 상태, 항상 첫 번째 줄에 위치
- Status line : 응답의 상태, 항상 첫 번째 줄에 위치
- HTTP headers : 요청을 지정하거나 메세지에 포함된 본문을 설명하는 헤더의 집합
- empty line : 헤더와 본문을 구분하는 빈 줄
- body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함. 유형에 따라 선택적 사용.
- Start line과 HTTP headers를 묶어 요청의 헤드(head)
- Status line과 HTTP headers를 묶어 응답의 헤드(head)
- 요청 (Requests)
- 클라이언트가 서버에 보내는 메세지
- Start line
- HTTP method
- 수행할 작업(GET, PUT, POST 등)이나 방식(HEAD, OPTIONS)을 설명
- GET은 존재하는 자원에 대한 요청, POST는 새로운 자원 생성, PUT은 존재하는 자원 변경, DELETE는 존재하는 자원 삭제
- Request Target
- 요청 대상(URL 또는 URI) 또는 프로토콜, 포트, 도메인의 절대 경로 등은 요청 컨텍스트에 작성되며 HTTP method마다 다르게 작성된다.
- HTTP Request가 전송되는 목표 주소
- HTTP version
- 버전에 따라 HTTP method 구조가 달라지므로 Start line에 HTTP version을 함께 입력됨.
- HTTP method
- Headers
- HTTP Requests의 Headers는 기본 구조를 따른다.
- 헤더의 이름, 콜론, 값 형태로 입력되며 값은 헤더에 따라 다르다.
- 일반 헤더 (General headers) : 메세지 전체에 적용되는 헤더로 body를 통해 전송되는 데이터와는 관련 없음
- 요청 헤더 (Request headers) : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보 포함.
User-Agent, Accept-Type, Accept-Lanuage와 같은 헤더는 요청을 보다 구체화한다. Referer처럼 컨텍스트를 제공하거나 If-None과 같이 조건에 따라 제약을 추가할 수 있음 - 표현 헤더 (Representation headers) : body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함.
- Body
- 요청의 본문. HTTP 메세지 구조의 마지막에 위치.
- 모든 요청에 body가 필요한 것은 아니다.
- GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않다.
- 단, POST나 PUT과 같은 일부 요청에 대해서는 데이터를 업데이트하기 위해 Body를 사용한다.
- 단일-리소스 바디 (Single-resource bodies) : 헤더 두 개(content-Type과 content-Length)로 정의된 단일 파일로 구성된 바디
- 다중-리소스 바디 (Multiple-resource bodies) : 여러 파트로 구성된 바디에서 각 파트마다 다른 정보를 지님. 보통 HTML form과 관련 있음.
- 응답 (Responses)
- 클라이언트의 요청을 서버가 응답하는 것.
- Status line
- 현재 프로토콜의 버전 (HTTP version)
- 상태 코드 : 요청의 결과 (202, 302, 404 등)
- 상태 텍스트 : 상태 코드에 대한 설명
- Headers
- 요청 헤더와 동일한 구조를 가짐
- 대소문자 구분 없는 문자열과 콜론, 값을 입력
- 값은 헤더에 따라 다르며 여러 종류의 헤더가 있다.
- 일반 헤더 (General headers) : 메세지 전체에 적용되는 헤더. body를 통해 전송되는 데이터와는 관련 없음
- 응답 헤더 (Response headers) : 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더. Vary, Accept-Ranges와 같은 상태 줄에 넣기에는 공간이 부족한 추가 정보 제공
- 표현 헤더 (Representation headers) : body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함.
- Body
- HTTP 메세지 구조의 마지막에 위치.
- 모든 응답에 body가 필요하지 않음. 201, 204와 같은 상태 코드를 가지는 응답에는 본문을 필요로 하지 않음
- 단일-리소스 바디 (Single-resource bodies) : 길이가 알려진 단일-리소스 바디는 두 개의 헤더(Content-Type, Content-Length)로 정의. 길이를 모르는 단일 파일로 구성된 단일-리소스 바디는 Transrer-Encoding이 chunked로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩 되어 있다.
- 다중-리소스 바디 (Multiple-resource bodies) : 서로 다른 정보를 담고 있는 body
- Stateless
- 상태를 가지지 않는다는 뜻.
- HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서 HTTP가 클라이언트나 서버의 상태를 확인하지 않는다.
- 무상태성 의미
💡참고
📌position 을 어떻게 사용하는지 알려주세요
- position
- 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성.
- top, right, bottom, left 속성이 요소를 배치할 최종 위치 결정.
- position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을지를 결정.
- static
- 요소를 문서 흐름에 맞추어 배치.
- top, right, bottom, left, Z-index 속성이 아무런 영향도 주지 않는 기본값 (float 속성은 가능)
- relative
- 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치 지정.
- static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값.
- top, right, bottom, left 속성으로 상대적 위치를 나타낼 수 있음.
- absolute
- 원하는 위치를 지정해 배치.
- 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소.
- 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.
- top, right, bottom, left 속성값을 이용하여 위치시킴.
- fixed
- absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치 결정.
- 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됨.
- 그래서 브라우저 창을 스크롤 하더라도 계속 고정되어 표시. (기준점 : 브라우저 왼쪽 위 꼭지점)
- sticky
- 위치에 따라서 동작 방식이 달라짐.
- 요소가 임계점(scroll 박스 기준)이전에는 relative와 같이 동작, 그 이후에는 fixed와 같이 동작.
- scroll 박스는 overflow 속성이 존재하는 부모 요소를 뜻함. 여기서 부모 요소가 overflow를 특별히 명시하지 않았다면 부모 요소가 바로 scroll 박스가 된다.
- scroll 박스 사이에 overflow:hidden이 적용되어있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않음.
💡참고
