[TIL] - HTTP, HTTPS

Sean yang~~·2022년 8월 26일
0
post-thumbnail

🅿️ HyperText

HTTP에서 HyperText는 HTML(HyperText Markup Langauge)의 HyperText와 그 의미가 동일하다. HTML은 문서와 문서가 링크로 연결되도록 하는 캐그로 구성된 언어란 뜻입니다. HTML은 웹페이지를 만들기 위해서 웹브라우저 위에서 동작하는 언어를 뜻합니다.

🅿️ Transfer

사전적 의미로 "전송하다" 라는 의미를 가집니다. 전송에 큰 의미가 있습니다. 전송을 쉬운말로 "물건이나 편지 따위를 보낸다." 라는 의미입니다. 우리는 우리가 만든 웹사이트를 널리 알리고 다른 사람들과 공유하기 위해서 다른 컴퓨터에게 전송해야 합니다. 그리고 전송은 보내는 주체와 받는 주체가 있다는 것이 큰 특징이다.

🅿️ Protocol

프로토콜은 협약, 통신 규약이라는 의미를 가집니다. 물리적으로 떨어진 컴퓨터끼리 어떻게 HTML파일을 주도 받을지에 대한 약속입니다.

필요에 의해서 만들어진 소통하는 방식 또는 약속이 HTTP입니다. 우리가 사용하는 인터넷 상에서 일어나는 소통은 대부분 HTTP 규약을 따릅니다.

🅿️ HTTP의 두가지 특징

Request/Response (요청/응답)

HTTP 통신의 핵심은 요청과 응답입니다. 전송은 보내는 주체와 받는 주체가 있습니다. 보내는 주체는 받는 주체에게 요청을 보내고, 받는 주체는 요청을 보낸 주체에게 응답을 보냅니다.

컴퓨터끼리의 소통도 마찬가지입니다. 결국 사람이 필요에 의해서 만든 소통 방식이기 댸문에 우리의 소통방식과 큰 차이점이 없습니다.

Stateless

State(상태) + less(없음)

HTTP에 대한 설명 중 절대 잊어서는 안될 HTTP의 특징이 바로 Stateless 입니다.

각각의 HTTP통신(요청/응답)은 독립적이기 떄문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못 합니다.

매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 합니다. 비유를 하자면, 마치 이미 자기소개를 한 사람에게 계속해서 똑같은 내용으로 자기소개를 해야하는 것과 같습니다. 따라서, 만일 여러번의 통신의 진행과정에서 연속된 데이터 처리가 필요한 경우(ex. 온라인 쇼핑몰에서 로그인 후 장바구니 기능)를 위해 로그인 토큰 또는 브라우저의 쿠키, 세션, 로컬스토리지 같은 기술이 필요에 의해 만들어졌습니다.

🅿️ Request/Response

Request 메세지 구조

HTTP 요청은 사실 프론트엔드(클라이언트)에서 백엔드(서버)에 일(데이터처리)을 시작하게 하기 위해 보내는 메세지 입니다. 이 메세지의 구조는 크게 세 부분으로 구성되어 있습니다.

  1. Start Line: 요청의 첫번째 줄에 해당합니다. 이 시작 줄도 세부분으로 구성되어 있습니다.
    • HTTP Method: 해당 요청이 의도한 액션을 정의하는 부분, 주로 GET, POST, DELETE가 많이 쓰임
    • Request target: 해당 request가 전송되는 목표 url
    • HTTP Version: 말 그대로 사용되는 HTTP 버전을 뜻한다. 주로 1.1버전이 널리 쓰임
GET /login HTTP/1.1
  1. Headers: 해당 요청에 대한 추가 정보(메타 데이터)를 담고있는 부분이다.
  • Key: Value 값으로 되어있다 (Javascript의 객체, Python의 딕셔너리 형태라고 보면 된다)
  • Host: 요청을 보내는 목표(타겟)의 주소. 즉, 요청을 보내는 웹사이트의 기본 주소가 된다.
  • User-Agent: 요청을 보내는 클라이언트의 대한 정보(ex. chorme, firefox, safari, explorer)
  • Content-type: 해당요청이 보내는 메세지 body의 타입
  • Content-length: body 내용의 길이
  • Authorization: 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authorization에 담는다.
Headers: {
  Host:
  User-Agent:
  Content-Type:
  Content-Length:
  Authorizatioin:
}
  1. Body: 해당 요청의 실제 내용입니다. 주로 Body를 사용하는 메소드는 POST 입니다.

Response 메시지 구조

  1. Status Line: 응답의 상태 줄입니다.
    • 응답은 요청에 대한 처리상태를 클라이언트에게 알려주면서 내용을 시작합니다. 마치, 편지의 응답에 "응 잘 지냈어" 라고 안부인사를 건네는 것과 같다.
    • HTTP Version: 요청의 HTTP버전과 동일
    • Status Code: 응답 메세지의 상태코드
    • Status Text: 응답 메세지의 상태를 간략하게 설명해주는 텍스트
  2. Headers: 요청의 헤더와 동일합니다. 응답의 추가 정보(메타 데이터)를 담고있는 부분입니다.
    • 다만, 응답에서만 사용되는 헤더의 정보들이 있습니다. (ex. 요청하는 브라우저의 정보가 담신 User-Agent 대신, Server 헤더가 사용됩니다.)
  3. Body: 요청의 body와 일반적으로 동일합니다.
    • 요청의 메소드에 따라 Body가 항상 존재하지 않듯이 응답도 응답의 형태에 따라 데이터를 전송항 필요가 없는 경우엔 Body가 없을 수도 있습니다.
    • 가장많이 사용되는 Body의 데이터 타입은 JSON(JavaScript Object Notation) 입니다.
Body: {
    "message": "SUCCESS"
    "token": "kldiduajsadm@9df0asmzm" (암호화된 유저의 정보)
}
profile
나는 프론트엔드 개발자다!

0개의 댓글