◇ PART · WEB

HTTP 해부

웹의 동작 원리 — 요청·응답 메시지의 진짜 모습

학습 목표

  • HTTP 요청 메시지가 어떻게 생겼는지 한 줄씩 짚을 수 있다
  • HTTP 응답 메시지의 상태 코드(200·404·500)가 무엇을 뜻하는지 안다
  • F12 네트워크 탭에서 헤더와 바디를 직접 찾아볼 수 있다

⚠️ 어디가 답답한가

전 차시까지 우리가 본 것

"손님이 가게에 부탁하면, 가게가 결과를 돌려준다."

그런데 — 그 부탁은 뭐라고 적혀 있나요? "이거 주세요"가 글자로는 어떻게 생겼을까요?

이걸 모르면 나중에 컨트롤러에서 데이터가 안 들어올 때 「내가 뭘 보냈는데?」를 확인할 수가 없습니다.

🛠️ HTTP 메시지의 정체

HTTP (HyperText Transfer Protocol)

웹에서 클라이언트와 서버가 대화할 때 쓰는 약속된 글자 형식입니다. 한국어도 영어도 아닌, 둘만 통하는 「대화 규칙」.

메시지는 항상 두 종류:

  • 요청(Request) 메시지 — 클라이언트가 보내는 것
  • 응답(Response) 메시지 — 서버가 돌려주는 것

요청 메시지의 구조

GET /search?q=spring HTTP/1.1 ← ① 요청 라인 (메서드 + 경로 + 버전) Host: www.naver.com ← ② 헤더들 (한 줄에 하나씩) User-Agent: Chrome/... ← Accept: text/html Cookie: session=abc123 (여기는 비어있음) ← ③ 바디 (GET 은 보통 없음)
  • 요청 라인 — "어떤 방법으로 어디를 부르는가"
  • 헤더 — "이 부탁에 대한 부가 정보"
  • 바디 — "보낼 내용물" (POST 일 때만 채워짐)

응답 메시지의 구조

HTTP/1.1 200 OK ← ① 상태 라인 (버전 + 상태 코드 + 메시지) Content-Type: text/html ← ② 헤더들 Content-Length: 12345 Set-Cookie: session=abc123 <!DOCTYPE html> ← ③ 바디 (HTML, JSON, 이미지 등 실제 내용) <html>...

요청과 거의 같은 모양인데, 첫 줄이 다릅니다.

상태 코드 — 한 자리 숫자로 결과 보고

2xx — 성공
  • 200 OK — 정상
  • 201 Created — 새로 만들었음
3xx — 다른 곳으로
  • 302 Found — 옮겨감 (로그인 후 리다이렉트)
4xx — 클라이언트 잘못
  • 404 Not Found — 그런 주소 없음
  • 403 Forbidden — 권한 없음
5xx — 서버 잘못
  • 500 Internal Server Error — 서버 코드가 터짐

요청 메서드 — 동사

오늘은 두 개만: GETPOST. 나머지(PUT/DELETE)는 Part 6 REST API 에서.

GET /board/list ← "보여줘" (조회) POST /board/write ← "저장해줘" (작성/제출) PUT /board/3 ← "수정해줘" (Part 6 에서) DELETE /board/3 ← "지워줘" (Part 6 에서)

GET 과 POST 의 차이는 다음 차시에서 직접 보냅니다.

💻 F12 로 직접 확인

  1. 크롬에서 www.naver.com 접속
  2. F12Network
  3. 새로고침 → 첫 줄(www.naver.com) 클릭
  4. 오른쪽 패널에서 Headers 탭 확인
스크린샷
F12 → Network → 첫 항목 클릭 → Headers 탭. General(상태 코드) / Response Headers / Request Headers 가 위에서부터 나란히 보임

앞 슬라이드의 다이어그램이 글자 그대로 거기 있습니다.

🔄 Before / After

전 차시 끝

웹 = 클라이언트 ↔ 서버의 요청·응답.

(요청·응답이 무슨 글자인지는 모름)

이번 차시 끝

요청 메시지 = 라인 + 헤더 + 바디.
응답 메시지 = 상태 라인 + 헤더 + 바디.

상태 코드 4개로 결과를 1초 만에 판단.

📊 한 그림 정리

이번 차시의 데이터 흐름

브라우저
HTTP 요청
라인+헤더+바디
서버
HTTP 응답
상태+헤더+바디
브라우저
화살표가 「HTTP 메시지」라는 글자 봉투로 채워졌습니다

정리

오늘 들고 가는 것

  • HTTP 메시지 = 요청 라인(또는 상태 라인) + 헤더 + 바디
  • 외울 상태 코드: 200 / 302 / 404 / 500
  • F12 → Network → Headers 면 모든 게 보인다

다음 차시: GET vs POST — 같은 폼을 두 방법으로 보내며 어디가 다른지 직접 확인합니다.