웹 개발자라면 반드시 알아야 하는 HTTP가 있다
이녀석은 무엇이고 어떤 기능을 하는 녀석인지 이해해보자
HTTP : HyperText Transfer Protocol
http를 풀어 써보면 위와 같다 각각의 단어는 아래와 같은 뜻을 의미한다
HyperText : 하이퍼 텍스트는 HTML과 동일하다 태그로 구성되어 있으며 문서와 문서가
링크로 연결되도록 하는 언어란 뜻이다.
Transfer : 말 그대로 전송이다
우리의 컴퓨터에서 아주 잘 만든 웹문서라도 내 로컬 환경에서만 띄운다면 의미가 없다
상대방에게 보내져야 의미를 가지게 되며 전송이란것은 보내는 객체와 받는 객체가 있다는게 특징이다
Protocol : 프로토콜은 통신, 규약이라는 의미를 가진다
서로가 멀리 떨어져 있는 상태에서 어떠한 방법과 규칙으로 HTML파일을 주고 받을 것인지에 대한
약속이라고 보면 된다.
HTTP의 두가지 특징
1. Request / Response
HTTP 통신의 핵심은 요청과 응답이다. 위에 설명한 것과 같이 전송이라는 것은
보내는 객체와 받는 객체가 있다는게 특징이다 그렇기에 Request(요청) / Respose(응답)이라는 것이 있다.
2. Stateless
State(상태) + less(없음)
Request / Response와 같이 확실히 알아야 되는 것이 Stateless 이다
각각의 HTTP 통신(요청/응답)은 독립적 이기 때문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못 한다. 이전의 상태를 전혀 알지 못 한다는 것은 무엇을 의미할까?
매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 한다. 비유를 하자면, 마치 이미 자기소개를 한 사람에게 계속해서 똑같은 내용으로 자기소개를 해야하는 것과 같다.
1. Request 메세지 구조
메세지의 구조는 크게 세 부분으로 구성되어있다.
1. Start Line
HTTP Method: 해당 요청이 의도한 액션을 정의하는 부분. 주로 GET, POST, DELETE가 많이 쓰임
Request target: 해당 request가 전송되는 목표 url
HTTP Version: 말 그대로 사용되는 HTTP 버전을 뜻한다. 주로 1.1 버전이 널리 쓰임
예)
GET /login HTTP/1.1
해석: GET 메소드로 login 이라는 요청 타겟에 HTTP 1.1 버전으로 요청을 보내겠다!
- Header
요청에 대한 추가 정보를 담고있는 부분이 Header이며 자바스크립트의 Key: Value 값으로 되어있다.
예)
Headers: {
Host: 요청을 보내는 목표(타겟)의 주소. 즉, 요청을 보내는 웹사이트의 기본 주소가 된다
(ex. www.apple.co.kr)
User-Agent: 요청을 보내는 클라이언트의 대한 정보 (ex. chrome, firefox, safari, explorer)
Content-Type: 해당 요청이 보내는 메세지 body의 타입 (ex. application/json)
Content-Length: body 내용의 길이
Authorization: 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authroization 에 담는다
}
- Body
해당 요청의 실제 내용이며 주로 Body를 사용하는 메소드는 POST이다.
예)
로그인 시에 서버에 보낼 요청의 내용
Body: {
"user_email": "jun.choi@gmail.com"
"user_password": "wecode"
}
2. Response 메시지 구조
응답 또한 요청과 마찬가지로 메세지이다
구조는 동일하게 세 부분으로 구성되어 있다.
-
Status Line : 응답에 대한 상태 줄이다 응답은 요청에 대한 처리 상태를 클라이언트에게
알려주면서 내용을 시작한다 마치, 편지의 응답에 "응 잘지냈어" 라고 안부 인사를 건네는 것과 같다
Status Line도 3부분으로 구성되며 아래와 같다 -
HTTP Version: 요청의 HTTP버전과 동일
-
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: 요청의 헤더와 동일하며 응답의 추가 정보(메타 데이터)를 담고있는 부분
하지만 응답에서만 사용되는 헤더의 정보들이 있다.
예)
(요청하는 브라우저의 정보가 담긴 User-Agent 대신, Server 헤더가 사용된다.)
- Body: 요청의 Body와 일반적으로 동일하다.
요청의 메소드에 따라 Body가 항상 존재하지 않듯이. 응답도 응답의 형태에 따라 데이터를 전송할 필요가 없는 경우엔 Body가 없을 수도 있다. 가장 많이 사용되는 Body 의 데이터 타입은 JSON(JavaScript Object Notation) 이다.
예)
ex) 로그인 요청에 대해 성공했을 때 응답의 내용
Body: {
"message": "SUCCESS"
"token": "kldiduajsadm@9df0asmzm" (암호화된 유저의 정보)
}
많이 사용하는 HTTP 통신 메소드 3가지
1.GET
데이터를 받아오기만 할 때 사용하며 가장 간단하고 많이 사용되는 HTTP메소드이다
예) 장바구니에 담은 제품을 조회한다.
(축약된 요청 메세지)
GET /shop/bag HTTP/1.1
Headers: {
"HOST": "https://www.apple.com/kr"
"Authroization": "kldiduajsadm@9df0asmzm" (유저가 본인임을 증명할 수 있는 인증/인가 토큰)
}(축약된 응답 메시지)
HTTP/1.1 200 SUCCESS
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
}
]
}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 SUCCESS
Body: {
"message": "SUCCESSFULLY CARTS UPDATED"
}3.DELETE
특정 데이터를 서버에서 삭제 요청을 보낼때 쓰는 메소드
예) 장바구니에서 제품을 삭제한다
(축약된 요청 메세지)
DELETE /shop/bag HTTP/1.1
Headers: {
"HOST": "https://www.apple.com/kr"
"Authroization": "kldiduajsadm@9df0asmzm" (유저가 본인임을 증명할 수 있는 인증/인가 토큰)
}
Body: {
productId: 30
}(축약된 응답 메시지)
HTTP/1.1 201 SUCCESS
Body: {
"message": "productId 30 DELETED"
}