[JS]HTTP

JH Cho·2022년 8월 26일

http https

CS

목록 보기

1/12

학습목표

HTTP의 특징인 Stateless를 설명할 수 있다.
Request, Response 구조에 대해 설명할 수 있다.
HTTP request method의 종류를 알고 서로의 차이점을 설명할 수 있다.
대표적인 Status code의 종류를 설명할 수 있다.

stateless request response의 종류

HTTP

Hyper Text : 문서와 문서가 링크로 연결되어 있고

Transfer : 전송을 하는데

Protocol : 전송할 때 컴퓨터 간 어떻게 html 파일 주고받을지에 대한 소통 약속

HTTPS?

HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다.

네트워크 상에서 중간에 제 3자가 정보를 볼 수 ㅇ벗도록 공개키 암호화를 지원함
HTTP 형식으로 입력 정보를 보내면 입력 형태 그대로 전송되지만
HTTPS를 사용하면 통신 요청에 대해 응답하는 서버만 알아볼 수 있도록 정보를 암호화해서 보낸다.
또한 HTTPS는 기관으로부터 검증된 사이트만 주소에 HTTPS 사용이 허가되어 접속 사이트의 보안 안정성을 검증하는 지표이기도 하다.

두가지 특징

stateless & stateful

stateless (상태 없음)

http 개별 통신은 모두 독립. 과거의 http 통신 결과(상태)를 보존하지 않는다.

해결방법 : 매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 함.
stateful 예시)

Request / Response

소통의 핵심은 요청과 응답.
메시지의 형식으로 요청하고 응답한다.

프로젝트를 진행할 때 프론트엔드는 데이터 요청을, 백엔드는 요청을 처리해서 응답을 준다. 이 요청과 응답에 대한 구조와 메시지를 잘 파악하면 대부분의 에러를 잡아낼 수 있다.

request 메시지 구조

HTTP 요청은 클라이언트에서 백엔드에 데이터처리를 시작하기 위해 보내는 메시지이고 크게 세 부분으로 구성되어 있다.

Start Line : 요청의 첫번째 줄에 해당(세 부분으로 구성)

HTTP Method : 해당 요청이 의도한 액션을 정의
(GET, POST, DELETE)
Request target : 해당 request가 전송되는 목표 url
HTTP Version: 사용되는 HTTP버전(주로 1.1ver)

GET /login HTTP/1.1

headers: 해당 요청에 대한 추가 정보(메타 데이터)를 담고 있는 부분

key: value 값으로 되어있다.(JS의 객체)
Host : 요청을 보내는 타겟의 주소,
User-Agent : 요청을 보내는 클라이언트의 정보(ex; chrome, safari)
-Content-Type: 해당 요청이 보내는 메세지 body의 타입 (ex. application/json)
Content-Length: body 내용의 길이

Authorization: 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authroization 에 담는다

Headers: {
   Host:  
   User-Agent: 
   Content-Type: 
   Content-Length: 
   Authorization: 
}

Body: 해당 요청의 실제 내용(메소드 POST)


Body: {
"user_email":"wecode@gmail.com" "user_password": "wecode"
}

Request 메세지 구조

응답이나 요청이나 메시지!

응답의 구조도 크게 세 부분.

Status Line : 응답 상태 줄

응답은 요청에 대한 처리 상태를 클라이언트에 알려주면서 시작.
HTTP Version:요청의 버전과 동일
Status Code: 응답 메시지의 상태 코드
Status Text: 응답 메세지의 상태를 간략하게 설명해주는 텍스트

예) HTTP/1.1 404 Not Found
//해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청(ex. 로그인 시도)에 대해서 유저의 정보를 찾을 수 없기 때문에(Not Found) 404 상태 메세지를 보낸다.

HTTP/1.1 200 SUCCESS
//해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청에 대해서 성공했기 때문에 200 상태 메세지를 보낸다.

Headers: 요청의 헤더와 동일. 응답의 추가 정보(메타데이터)를 담고 있음

다만, 응답에서만 사용되는 헤더의 정보들이 있습니다. (ex. 요청하는 브라우저의 정보가 담긴 User-Agent 대신, Server 헤더가 사용됩니다.)

Body: 요청의 Body와 일반적으로 동일

요청의 메소드에 따라 Body가 항상 존재하지 않듯이 응답도 응답의 형태에 따라 데이터를 전송할 필요가 없는 경우엔 Body가 없을 수도 있음
가장 많이 사용되는 Body 데이터 타입(JSON)

로그인 요청에 대해 성공했을 때 응답 내용

Body: {
   "message": "SUCCESS"
   "token": "kldiduajsadm@9df0asmzm" (암호화된 유저의 정보)
}

HTTP 메서드

HTTP Request Methods

GET(장바구니에 담은 제품을 조회한다)
어떤 데이터를 서버로 부터 GET하기 위해(오직 데이터를 받아올 때)
가장 간단하고 많이 사용되는 메서드.

//요청!
GET /shop/bag HTTP/1.1
(메서드 RequestTarget HTTP버전)
Headers: {
"HOST": "https://www.apple.com/kr",
"Authorization": "kldiduajsadm@9adlkaf"(인증토큰)
}

//응답!
HTTP/1.1 200 ok
Body: {
"message": "SUCCESS",
"carts": [
  {
    "productId": 10
    "name": "Pro Display XDR - Nano-texture 글래스  "
    "price": "₩7,899,000"
    "quantity": 1
  },
  {
        "productId": 20
        "name": "Mac Pro"
        "price": "₩73,376,000"
        "quantity": 2
  }
  ]
}

POST(장바구니에 맘에 드는 상품을 담는다)
데이터를 생성/수정하기 위한 메서드로 대부분의 경우 body가 포함되서 보내진다.

// (축약된 요청 메세지)
POST /shop/bag HTTP/1.1
Headers: {
 "HOST": 
 "https://www.apple.com/kr"
 "Authroization": 
 "kldiduajsadm@9df0asmzm" (유저가 본인임을 증명할 수 있는 인증/인가 토큰)
}
Body: {
 product: {
   "productId": 30
   "name": "12.9형 iPad Pro Wi-Fi + Cellular 128GB"
   "color": "스페이스 그레이"
   "price": "₩1,499,000"
   "quantity": 1
 }
}

// (축약된 응답 메시지)
HTTP/1.1 201 Created
Body: {
"message": "SUCCESSFULLY CARTS UPDATED"
}

```

DELETE(장바구니 제품 삭제)
특정 데이터를 서버에서 삭제 요청

// (축약된 요청 메세지)
DELETE /shop/bag HTTP/1.1
Headers: {
  "HOST": "https://www.apple.com/kr"
  "Authroization": "kldiduajsadm@9df0asmzm" (유저가 본인임을 증명할 수 있는 인증/인가 토큰)
}
Body: {
  productId: 30
}

// (축약된 응답 메시지)
HTTP/1.1 204 No Content

Response Status Code

Success
- 200: OK
  문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드
- 201: Created
  POST 메소드 요청에 따라 생성이 성공했을 대 오는 코드
- 204: No Content
  요청이 성공했고 제공할 응답메시지가 없을 경우
  DELETE 메서드가 잘 먹었을 때
Client Error
- 400: Bad Request
  해당 요청이 잘못되었을 때 보내는 status code로 요청의 Body 내용이 잘못되었을 때
  (예시; 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 Body에 담긴 경우)
- 401: Unauthorized(회원가입 하세요~)
  유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미를 나타내는 status code
- 403: Forbidden(회원이지만 운영진만 볼 수 있는 정보)
  유저가 해당 요청에 대한 권한이 없다는 의미로 접근 불가한 정보에 접근했을 경우를 의미
- 404: Not Found
  요청된 URI가 존재하지 않음