231107 HTTP란 (YIL)

HR J·2023년 11월 9일

스프링 훈련

목록 보기

2/8

HTTP

HTTP(HyperText Transfer Protocol)란?

데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나.
매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약.
통신 규약 : 컴퓨터끼리 데이터를 주고 받을 때 정해둔 약속.

위와 같이 모국어 대신 중국어 등 외국어로 말한다면 알아들을 수 없게 된다.
마찬가지로 컴퓨터끼리 데이터를 주고 받을 때 정해진 규칙없이 매번 요청하는 방식이 다르다면 소통에 큰 문제가 발생한다.
현재 이용되는 대부분의 웹 서버가 HTTP를 기반으로 정해준 규칙에 맞게 데이터를 주고 받는다.
모든 브라우저는 HTTP 프로토콜을 기본으로 지원하므로 우리는 HTTP를 매일 이용하는 셈이다.

HTTP로 어떻게 데이터를 주고 받는가

HTTP엔 Request, Response라는 개념이 존재.

예시로 서버와 브라우저는 아래와 같이 동작한다.

브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request).
서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 실어 응답(Response).
없다면 없는 페이지에 대한 데이터를 반환.
브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줌.
※ "데이터"는 어떠한 데이터든 가능.

브라우저에서의 HTTP 동작 확인

1. 개발자 도구와 네트워크 탭 열어보기

1) 원하는 웹 페이지 방문하기.
2) 브라우저에서 F12를 누르면 아래와 같은 창이 뜸. 이를 DevTool 혹은 개발자 도구라고 부름.

3) 네트워크탭을 누름.

4) 새로고침.
5) 아래 나오는 항목들이 브라우저가 지금 페이지를 보여주기 위해 서버에서 받아온 데이터 목록.

웹 개발을 진행하면서 문제가 생겼을 때 문제에 대한 분석을 위해 개발자 도구와 네트워크 탭을 사용하면 좋다.

2. 네트워크(Network) 탭 좌측 Name 목록 아래 요청 클릭하기

3. Headers 탭 살펴보기

General

브라우저에서 서버로 보낸 일종의 Request 데이터.

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 데이터라고 보면 쉽다!

Response Headers

-- 서버가 웹페이지 데이터와 함께 보낸 추가 데이터.

4. Response 탭 살펴보기

Headers 탭에서 Response 탭으로 바꾸자.
서버에서 내 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터이다.

데이터? 추가 데이터? 뭐가 다른가?

Headers 탭에서는 추가 데이터라고 많이 말했었고, Response 탭에서는 그냥 데이터라고 말했다. 차이점을 알아보자.
HTTP 구성 요소는 크게 다음과 같다.

Method (호출/요청 방식)

GET : 서버에 요청을 보냅니다.
POST : 웹 서버에 데이터를 게시할 때 사용하는게 일반적. (ex. 회원가입, 게시글 작성, 댓글 작성)
그 외 DELETE 등의 여러 요청 방식이 존재.
가장 대표적인 요청 방식이 GET 과 POST.

브라우저가 어떤 페이지를 원하는지
요청 받은 페이지를 찾았는지
요청 받은 데이터를 성공적으로 찾았는지
어떤 형식으로 데이터를 보낼지
이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받음. 위에서 설명 된
메서드도 사실은 헤더에 포함되어 서버로 보내짐.