안녕하세요, 오늘은 입문주차 강의 자료를 바탕으로 HTTP 에 대해서 다시 정리해보았습니다.
HTTP(HyperText Transfer Protocol)란?
- 데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나가 HTTP입니다.
- 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약입니다.
- 여기서 말하는 통신 규약이란, 컴퓨터끼리 데이터를 주고 받을 때 정해둔 약속을 의미합니다.
- 따라서 현재 이용되는 대부분의 웹 서버가 HTTP를 기반으로 정해준 규칙에 맞게 데이터를 주고 받습니다.
- 또한, 모든 브라우저는 HTTP 프로토콜을 기본으로 지원하기 때문에 여러분은 매일 HTTP를 이용하는 셈이 됩니다.
우리는 어떻게 HTTP로 데이터를 주고 받을까?
- HTTP에서는 언제나 Request, Response라는 개념이 존재합니다.
- 서버와 브라우저의 관계로 가볍게 말해보면 아래와 같이 동작합니다.
- 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)합니다.
- 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 실어 응답(Response)해줍니다. 없다면 없는 페이지에 대한 데이터를 반환합니다.
- 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다.
- 그리고 위와 같은 사례에서 "데이터"는 어떠한 데이터든 주고 받는게 가능합니다.
브라우저에서 HTTP가 동작하는 것을 직접 확인해보기
- 개발자 도구와 네트워크 탭 열어보기
- 원하는 웹 페이지 어디든 들어가봅니다.
- 여러분이 사용하는 브라우저에서 F12를 누르면 아래와 같은 창이 뜹니다.
이것을 DevTool 혹은 개발자 도구라고 부릅니다.
- 네트워크 탭을 누릅니다.
- 이 상태에서 새로고침을 합니다.
- 뭔가 아래에 쭉 나오시나요? 이것이 여러분의 브라우저가 지금 페이지를 보여주기 위해 서버에서 받아온 데이터 목록이라고 이해하면 됩니다.
-
웹 개발을 진행하면서 문제가 생겼을 때 문제에 대한 분석을 위해 개발자 도구와 네트워크 탭을 사용하면 좋습니다.
2) 네트워크(Network) 탭 좌측 Name 목록 아래 요청 클릭하기
-
3) Headers 탭 살펴보기
- General
-
브라우저에서 서버로 보낸 Request 데이터라고 보면 쉽습니다.
-
- General
-
Status Code 200은 ‘요청이 성공했다’라는 뜻을 의미합니다.
-
HTTP 상태 코드(Status Code)를 통해 브라우저와 서버간의 요청, 응답 과정에서 발생할 수 있는 상황들을 표현할 수 있습니다.
- HTTP 상태 코드는 3자리 숫자로 이루어져 있습니다.
- 첫 번째 자리 숫자는 상태 코드의 분류를 나타내는 용도로 사용되며, 나머지 두 자리는 세부적인 정보를 나타냅니다.
- 1xx (Informational)
- 1xx 상태 코드는 요청이 수신 되었으며 처리가 계속되고 있음을 나타냅니다.
- 주로 웹 브라우저와 같은 클라이언트가 서버와의 연결 상태를 확인하기 위해 사용됩니다.
- 2xx (Successful)
- 2xx 상태 코드는 클라이언트의 요청이 성공적으로 처리 되었음을 나타냅니다.
- 가장 많이 사용되는 상태 코드는 200입니다.
- 이는 요청이 성공적으로 처리 되었으며 클라이언트가 요청한 데이터가 서버에서 제공됨을 의미합니다.
- 3xx (Redirection)
- 3xx 상태 코드는 클라이언트가 추가적인 조치를 취해야 함을 나타냅니다.
- 이 상태 코드는 주로 페이지 이동, 리다이렉션 등에 사용됩니다.
- 4xx (Client Error)
- 4xx 상태 코드는 클라이언트에 오류가 있음을 나타냅니다.
- 이 상태 코드는 주로 클라이언트의 잘못된 요청, 인증 오류 등에 사용됩니다.
- 가장 많이 사용되는 상태 코드는 404입니다. 이는 클라이언트가 요청한 페이지나 리소스를 서버에서 찾을 수 없음을 의미합니다.
- 5xx (Server Error)
- 5xx 상태 코드는 서버에 오류가 발생했음을 나타냅니다.
- 이 상태 코드는 주로 서버의 오류, 서버 과부하 등에 사용됩니다.
- 가장 많이 사용되는 상태 코드는 500입니다. 이는 서버 내부 오류가 발생함을 의미합니다.
-
Request Headers
- 이것도 브라우저에서 서버로 보낸 Request 데이터라고 보면 쉽습니다!
- 이것도 브라우저에서 서버로 보낸 Request 데이터라고 보면 쉽습니다!
- Response Headers
- 서버가 웹 페이지 데이터와 함께 보낸 추가 데이터입니다.
- 서버가 웹 페이지 데이터와 함께 보낸 추가 데이터입니다.
- 4) Response 탭 살펴보기
-
이제 Headers 탭에서 Response 탭으로 바꿔봅니다.
-
아래와 똑같지 않더라도 괜찮습니다. 어떤 알 수 없는 글자들이 막 써있는것이 보이면 됩니다!
-
이것은 서버에서 여러분의 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터입니다.
-
- 추가 데이터? 데이터? 뭐가 다른걸까?
-
위에서 개발자 도구로 직접 보면서 나온 애매한 단어들이 있었죠?
-
Headers 탭에서는 추가 데이터라고 많이 말했었고, Response 탭에서는 그냥 데이터라고 말했습니다. 이것에 대해서 조금 더 자세히 알아보도록 하겠습니다!
-
HTTP에는 크게 다음과 같은 구성 요소가 존재합니다.
- Method (호출/요청 방식)
GET: 이름 그대로 어떤 리소스를 얻을 때 사용됩니다. 브라우저의 주소창에 URL을 입력하면 GET 메서드를 사용해서 서버에 요청을 보냅니다.POST: 웹 서버에 데이터를 게시할 때 사용하는게 일반적입니다. (ex. 회원가입, 게시글 작성, 댓글 작성)- 그외
DELETE등의 여러 요청 방식이 존재합니다. - 가장 대표적인 요청 방식이
GET과POST입니다.
-
Header (추가 데이터. 메타 데이터)
- 브라우저가 어떤 페이지를 원하는지
- 요청 받은 페이지를 찾았는지
- 요청 받은 데이터를 성공적으로 찾았는지
- 어떤 형식으로 데이터를 보낼지
- 이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받습니다. 위에서 설명 된 메서드도 사실은 헤더에 포함되어 서버로 보내집니다.
-
Payload (데이터. 실제 데이터)
- 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있습니다.
- 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있습니다.
그리고 "GETmethod를 제외하곤 모두 Payload를 보낼 수 있다" 는게 HTTP에서의 약속입니다. - HTML
<!DOCTYPE html> <html> <head><title>By @ResponseBody</title></head> <body>Hello, Spring 정적 웹 페이지!!</body> </html> - JSON
{ "name":"Robbie", "age": 20 } - HTTP의 Payload를 통해 위와 같은 데이터들을 요청하고 응답 받을 수 있습니다.
-
새로운 시작~!