◇ PART · WEB

HTTP 해부

웹의 동작 원리 — 읽기 자료

📍 지금 어디를 만지고 있나요?
브라우저
서버
Controller
Service
DB

이 차시의 핵심 용어

HTTP HyperText Transfer Protocol. 클라이언트와 서버가 대화할 때 쓰는 약속된 글자 형식. 한국어도 영어도 아닌 둘만 통하는 대화 규칙.
요청 메시지 (Request) 클라이언트가 서버에 보내는 글자 묶음. 요청 라인 + 헤더들 + (바디) 의 3단 구조.
응답 메시지 (Response) 서버가 클라이언트에 돌려주는 글자 묶음. 상태 라인 + 헤더들 + 바디 의 3단 구조.
메서드 (Method) 요청의 「동사」. 무엇을 하려고 보낸 부탁인지 알린다. GET(보여줘), POST(저장해줘) 등.
상태 코드 (Status Code) 응답의 첫 줄에 적히는 세 자리 숫자. 결과를 한눈에 알리는 신호등. 200 정상 / 404 없음 / 500 서버 오류.
헤더 (Header) 메시지의 부가 정보. 「내용 형식이 뭐다」, 「쿠키가 뭐다」 같은 메타 데이터를 한 줄에 하나씩.
바디 (Body) 메시지의 실제 내용물. 응답에서는 HTML / JSON / 이미지 등이 들어 있고, 요청에서는 POST 일 때만 채워짐.

1. 왜 또 들여다봐야 하나

전 차시에서는 「클라이언트가 서버에 부탁하고, 서버가 결과를 돌려준다」는 큰 그림을 봤습니다. 그런데 그 부탁과 결과가 실제로는 어떤 글자로 생겼을까요?

이걸 모르면 일어나는 일

나중에 컨트롤러에서 데이터가 안 들어올 때 "내가 도대체 뭘 보냈는지" 확인할 방법이 없습니다. 디버깅의 첫 단계는 「내 요청이 진짜 그 모양으로 나갔는지」 검증하는 일입니다.

좋은 소식: HTTP 메시지의 구조는 단순합니다 — 3단 으로 끝납니다.

2. 요청 메시지의 3단 구조

GET /search?q=spring HTTP/1.1 ← ① 요청 라인 Host: www.naver.com ← ② 헤더들 (한 줄에 하나씩) User-Agent: Mozilla/5.0 ... Accept: text/html Cookie: NID_SES=abc123 (여기는 비어있음) ← ③ 바디 (GET 은 보통 없음)

① 요청 라인 — 가장 중요한 한 줄

이 한 줄이 「어떤 방법(메서드)으로, 어디(경로)를, 어떤 버전(HTTP/1.1)으로 부르는지」를 모두 담습니다.

② 헤더 — 부가 정보

한 줄에 하나씩 적힌 「이름: 값」 형식의 메타 데이터입니다. 자주 보는 헤더:

③ 바디 — 보낼 내용물

요청 메서드에 따라 다릅니다:

3. 응답 메시지의 3단 구조

HTTP/1.1 200 OK ← ① 상태 라인 Content-Type: text/html ← ② 헤더들 Content-Length: 12345 Set-Cookie: session=abc123 <!DOCTYPE html> ← ③ 바디 (실제 HTML 내용) <html> <head>...

요청과 거의 같은 모양인데, 첫 줄이 「상태 라인」으로 바뀝니다. 가장 중요한 건 가운데의 세 자리 숫자입니다.

4. 상태 코드 — 한눈에 결과 판단

2xx — 잘 됐다

200 OK 가 99% 입니다. 평소엔 이거만 봅니다.

3xx — 다른 곳으로 가라

302 Found — 「여기로 가야 함」. 로그인 성공 후 메인으로 보낼 때 자주 등장.

4xx — 클라이언트 잘못
5xx — 서버 잘못

500 Internal Server Error — 서버 코드가 어딘가에서 터진 것. 내 컨트롤러나 서비스 코드를 의심해야 할 신호.

디버깅 첫 단계

오류가 나면 가장 먼저 상태 코드를 확인하세요. 4xx 면 "내 URL/요청이 잘못됐나?", 5xx 면 "내 서버 코드가 잘못됐나?" 의 방향이 갈립니다.

5. 메서드 — 요청의 「동사」

이번 과정에서는 두 개만 깊게 봅니다:

GET /board/list "보여줘" ← 조회 (이미 있는 것 가져오기) POST /board/write "저장해줘" ← 작성/제출 (새로운 것 만들기)

나머지 PUT(수정), DELETE(삭제)는 Part 6 REST API에서 만납니다. GET 과 POST 의 결정적 차이는 다음 차시에서 직접 폼을 보내며 확인합니다.

6. 직접 보기 — F12 의 Headers 탭

크롬에서 F12 를 누르고 Network 탭을 켠 뒤 새로고침 → 첫 줄을 클릭하면 오른쪽 패널이 열립니다.

스크린샷
F12 → Network → 첫 항목 클릭 → Headers 탭. General(상태 코드) / Response Headers / Request Headers 순서로 보임

그 안에 적힌 글자들이 정확히 위에서 본 「라인 + 헤더 + 바디」 구조입니다. 한 번 눈으로 매칭해두면 다시는 헷갈리지 않습니다.

7. Before / After

전 차시 끝

웹 = 클라이언트 ↔ 서버의 요청·응답이라는 추상적인 그림.

이번 차시 끝

요청·응답의 실제 글자 모양을 알고, 상태 코드 4개로 결과를 1초 만에 판단할 수 있다.