CS
HTTP란?
인터넷에서 데이터를 주고받을 수 있는 프로토콜(== 규칙)
- Hyper Text Transfer Protocol의 두문자어.
- 무상태 프로토콜이다.
- 이는 서버가 두 요청 간에 어떠한 상태나 데이터를 유지하지 않음을 의미한다. (상태를 유지하기 위한 노력으로 쿠키와 세션을 사용한다.)
HTTP 메세지 구조
HTTP 메세지
시작줄, 헤더, 본문으로 구성되고, 요청과 응답으로 나뉜다.
그리고 두 구조는 서로 닮은 모습을 가진다.
-
시작 줄
시작 줄(Start line)에는 실행되어야 할 요청, 또는 요청 수행에 대한 성공과 실패가 기록되어 있다. 항상 한 줄로 끝난다. -
옵션으로 HTTP 헤더 세트가 들어간다. 여기엔 요청에 대한 설명 혹은 메시지 본문에 대한 설명이 들어간다.
-
요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(Blank line)이 삽입된다. (본문)
-
요청과 관련된 내용(HTML Form Contents 등)이 옵션으로 들어가거나, 응답과 관련된 문서가 들어간다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시된다.
시작줄
아래 세 가지 요소로 이루어져있다.
- HTTP 메서드로, 영어 동사(GET, PUT, POST) 혹은 명사(HEAD, OPTIONS)를 사용해 서버가 수행해야 할 동작을 나타낸다.
예시
GET은 리소스를 클라이언트로 가져다 달라는 의미.
POST는 데이터가 서버로 들어가야 함을 의미(리소스 생성 및 수정)
- 두번째로 오는 요청 타겟은 주로 URL, 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며 이것들은 요청 컨텍스트에 의해 특정 지어진다. 요청 타겟 포맷은 HTTP 메소드에 따라 달라진다.
포맷은 다음과 같은 것들이 있음.
origin 형식
끝에?와 쿼리 문자열이 붙는 절대 경로. 이것은 가장 일반적인 형식이다.GET,POST,HEAD,OPTIONS메소드와 함께 사용한다.
예시 :POST / HTTP 1.1 GET /background.png HTTP/1.0 HEAD /test.html✅?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0✅
absolute 형식
완전한 URL 형식이다. 프록시에 연결하는 경우 대부분GET과 함께 사용된다.
예시 :GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
authority 형식
도메인 이름 및 옵션 포트(:가 앞에 붙는다.)로 이루어진 URL의 authority component이다. HTTP 터널을 구축하는 경우에만CONNECT와 함께 사용할 수 있다.
예시 :CONNECT developer.mozilla.org:80 HTTP/1.1
asterisk 형식
OPTIONS와 함께 별표(*) 하나로 간단하게 서버 전체를 나타낸다.
예시 :COPTIONS * HTTP/1.1
- 마지막으로 HTTP 버전이 들어간다. 메시지의 남은 구조를 결정하므로, 응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할을 한다.
요청
클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지
- 식당 주문서 개념으로 보면 된다. 서버가 주문서를 받아 클라이언트가 어떤 것을 원하는지 파악할 수 있게 하는 것
- 프로토콜 버전 :
- 상태 코드 : 요청의 성공 여부를 나타냄. 200, 404, 302가 대표적이다.
- 상태 텍스트 : 짧고 간결하게 상태 코드에 대한 설명을 글로 나타내어 사람들이 HTTP 메시지를 이해할 때 도움이 된다.
응답
요청에 대한 서버의 답변
- 주문서대로 나온 음식 개념.
Position
레이아웃 요소의 위치를 조정하는데 사용하는 CSS 속성이다.
static, relative, absolute, fixed, sticky 등의 속성이 있다.
주로 사용하는 요소 속성들은 relative와 absolute, fixed가 있다.
기본값으로 Static 상태이고,
요소의 기준점 위치를 잡아주는 relative와
그에 따라 절대 위치 경로를 지정하는 absolute가 있다.
위치 설정은 top, left, rigth, bottom으로 설정한다.
각 요소들은 레이어를 겹치는 것 처럼 레이아웃에 구성된다.
React
값에 접근할 때는 무조건 {}괄호 안에.
