HyperText
문서와 문서가 링크로 연결되어 있음
Transfer
전송하다. "HTML로 만든 웹 페이지 문서(파일)를 보낸다"
Protocol
컴퓨터 간 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속
즉, HTTP는 'hyper text문서를 어떻게 주고 받을지 정해둔 약속'
특징
1. 요청 / 응답 (Request / Response )
- PC 간의 소통은 메세지 형식으로 이루어진다.
- 서로 다른 PC가 서버에 Request하면, 서버는 Response하며 PC간의 정보와 상태를 공유해 줌.
2. Stateless
- state상태 + less 없음
- HTTP 개별 통신은 모두 독립적임
- 과거의 HTTP 통신 결과(state)를 보존하지 않음
- 매 통신 마다 사전에 필요한 모든 정보를 담아서 요청을 보내야함
- 그렇지 않으면, 로그인을 성공해도 매 페이지를 접속할 때마다 로그인을 다시 해야함.
고로 이미 로그인 한 상태에서, 다른 Request시 '나 이미 로그인했다'는 token을 붙여서 보내줘야함.
- 그렇지 않으면, 로그인을 성공해도 매 페이지를 접속할 때마다 로그인을 다시 해야함.
- 보통 Request는 front에서 보냄
front : 여기는 이름을 출력할 거고, 저기는 이메일을 출력할 거야. 서버야 데이터 좀 줘.
back : 서버에서 이렇게 이렇게 찾아서 전달 할 게
✅ Request 메세지 구조
Start Line | Headers | Body |
요청의 첫 번째 줄 | 요청의 메타데이터를 담고 있는 부분 | 요청의 실제 내용 |
HTTP method 요청이 의도한 액션을 정의 Request target 요청이 전송되는 목표 url HTTP version HTTP 버전 |
{key : value} 의 형태 Headers : { Host : kangdanne.tistory.com User - Agent : chrome Content-Type : application/json Content-Length : 50 } |
Body : { "username" : "Dand" "password" : "123456789" } |
예) GET /login HTTP/1.1 : 나는 /login 페이지로 가고 싶어. 버전은 http/1.1 이야 |
요청 메서드에 따라 존재하지 않을 수 있음 GET의 경우에는 있을 수도 없을 수 도 있음. POST 경우에는 있어야함. |
Request 메세지 예시
// Start Line
GET /users/login HTTP/1.1
//Headers
Content-Type : application/json
Content-Length : 50
Host : localhost:
User-Agent : chrome
..
//Body
{
"username" : "Dand"
"password" : "123456789"
}
✅ Response 메세지 구조
Status Line | Headers | Body |
응답의 첫 번째 줄 - 상태 표시 | 응답의 메타데이터를 담고 있는 부분 | 응답해줄 데이터 |
HTTP version HTTP 버전 Status Code 응답 상태 코드(number) Status Text 응답 상태를 간략이 설명하는 텍스트 |
{key : value} 의 형태 Headers : { Host : kangdanne.tistory.com User - Agent : chrome Content-Type : application/json Content-Length : 50 } |
Body : { "message" : "success" "token" : "sagjqhp123htwasfa" } |
예) HTTP/1.1 404 Not found HTTP/1.1 200 OK |
요청 메서드에 따라 존재하지 않을 수 있음 |
Response 메세지 예시
// Status Line
HTTP/1.1 200 OK
//Headers
Connestion: keep-alive
Content-Length : 160
Content-Type : application/json; charset=utf-8
Date: Mon, 28 Oct 2021 10:12:34 GMT
Keep-alive : chrome
Content-Type : timeout=5
//Body
{
"message" : "login success!"
"token" : "sagjqhp123htwasfa"
}
- id와 pw정보의 보안성을 높이기 위해 token을 사용하게 되는데, 실무에서는 token의 탈취 가능성이 있으므로 유지시간을 제한한다.
✅ Request 메서드
GET | 데이터를 받아오기만 할 때 웹페이지에 접속해필요한 데이터를 불러올 때 |
|
POST | 데이터를 생성(CREATE)/수정 할 때 Body에 담는 내용이 중요 |
|
DELET | 서버에 저장된 특정 데이터 삭제할 때 대부분 서버에서 DELET를 비활성 - 안전성 문제 실무에서는 데이서 삭제시 GET 또는 POST를 사용 예) POST /delete/shop/bag HTTP/1.1 |
✅ 응답 코드 Staus code 예시
Success | 200: OK | 요청이 성공적으로 수행됨 |
201: Creates | 원격지 서버에 파일 생성됨 | |
202: Accepted | 웹 서버가 명령 수신함 |
Error | 400: Bad Request | 유저의 요청이 잘못됨 |
401: Unauthorized | 인증해야 접근 가능함 | |
403: Forbidden | 접근 금지 | |
404: Not found | 요청한 페이지를 못찾음 |
Server Error | 500: Internal server error | 요청이 성공적으로 수행됨 (서버가 터졌다고말 할 때) |
✍️
유저로서의 WEB이란?
주소창에 주소를 친다 > 웹 페이지를 본다
주소창에 주소를 친다 > 에러 페이지가 뜬다 > 나온다
이게 전부.
그러나 생각보다 웹은 "자신이 어떤 상태인지"다양하게 알려주고 있었다.
어떤 경로로 들어왔으며, 어떤 정보와 문제를 지니고 있는지.
반응형
'D.evelop > Web' 카테고리의 다른 글
[WEB] 웹 저장소 - 쿠키/로컬스토리지/세션스토리지 (0) | 2021.12.20 |
---|---|
[WEB] 웹 렌더링 SSG, SSR, CRS 이란? (0) | 2021.12.13 |
[Chrome 개발자 도구] 콘솔 패널 DevTools - console panel (0) | 2021.09.05 |
[WEB]시멘틱 웹/요소 (Semantic Web/element) (0) | 2021.09.01 |
[etc.]웹퍼블리셔의 QA 과정 (부제:폴더블 너 하고 싶은거 다 해🙉) (0) | 2021.08.23 |
댓글