LUMI_dev

HTTP - HTTP (Hyper Text Transfer Protocol)란? 본문

스파르타 코딩 클럽 | 자바 심화 과정/Spring Master (입문 주차)

HTTP - HTTP (Hyper Text Transfer Protocol)란?

luminous_dev 2025. 1. 22. 13:05

HTTP

: 컴퓨터끼리 데이터를 주고 받는 양식/약속 (*통신규약 중 하나)

 

예시) 한국어로는 알아듣지만 외국어로는 알아듣기 어렵다.

→ 컴퓨터끼리 데이터를 주고 받을 때 정해진 규칙없이 매번 요청하는 방식이 다르다면 소통 문제

 


어떻게 HTTP로 데이터를 주고 받을까? (feat. Request와 Response)

 

1. 브라우저(클라이언트)는 서버에게 자신이 원하는 페이지 요구 (Request)

 

2. 서버, 브라우저가 원하는 페이지 있는지 확인 

  • 있으면 해당 페이지 데이터를 실어 응답(Response)
  • 없으면 없는 페이지에 대한 데이터 반환

3. 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그림

 


브라우저에서 HTTP가 동작하는 것 직접 확인해보기

(※ 개발자 도구(F12) > 네트워크 탭 > 새로 고침) 

 

 

브라우저가 페이지를 보여주기 위해 서버에서 받아온 데이터 목록

 

 

[1] Headers 탭

 

1. General

: 브라우저에서 서버로 보낸 Request 데이터 

 

- Status Code (HTTP 상태코드) : 브라우저와 서버간의 요청, 응답 과정에서 발생할 수 있는 상황들

  └ 3자리로 이루어져 있음

  └ 첫번째 자리 숫자 : 상태코드 분류 나타내는 용도 | 나머지 두자리 : 세부 정보 

   
1xx (informational) 요청이 수신 되었음 , 처리 계속되고 있음
2xx (successful) - 클라이언트 요청이 성공적으로 처리 되었음
- 200 : 요청이 성공적으로 처리되었음  
3xx (redirection) - 클라이언트가 추가적인 조치 취해야함 
- 페이지 이동, 리다이렉션 등에 사
4xx (Client Error) - 클라이언트에 오류가 있음
- 클라이언트의 잘못된 요청 / 인증 오류
- 404 : 요청한 페이지나 리소스가 서버에 없음
5xx (Server Error) - 서버에 오류, 과부하 발생
- 500 : 서버 내부 오류 

 

 

2. Request Headers

: 브라우저에서 서버로 보낸 Request 데이터

 

3. Response Headers

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

 

[2] Response 탭

 : 서버에서 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터 

 

 

 


[ Response Headers : 추가 데이터 ] vs [ Response : 데이터 ] 

 

 

 

HTTP의 구성 요소

1. Method

GET 어떤 리소스를 얻을 때 사용 / 브라우저 주소창에 URL 입력을 통해
POST 웹 서버에 데이터 게시할 때 사용 (ex.회원가입, 게시글/댓글 작성)
DELETE  

 

2. Header (추가 데이터, 메타 데이터)

- 브라우저가 어떤 페이지 원하는지

- 요청 받은 페이지 / 데이터 찾았는지

- 어떤 형식으로 데이터를 보낼지 등... 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받음

GET naver.com HTTP/1.1

 

3. Payload (데이터, 실제 데이터) 

- 서버가 응답을 보낼 때, 클라이언트(브라우저)가 요청을 할 때 보낼 수 있음

GET 메소드만!!!! Payload 안됨!!! 

 

예시) 

HTML

<!DOCTYPE html>
<html>
  <head><title>By @ResponseBody</title></head>
   <body>Hello, Spring 정적 웹 페이지!!</body>
</html>

 

JSON

{ 
  "name":"Robbie",
  "age": 20
}

 

 

+) json 중에서도 data 부분 = pay load / 그외 데이터들은 부차적인 정보들

{
  "status" : 
	"from": "localhost",
	"to": "http://hello.com/hello/1",
	"method": "GET",
	"data":{ "message" : "hello!" }
}