학습 목표
- HTTP 요청·응답 메시지의 3단 구조(라인 + 헤더 + 바디)를 손가락으로 짚을 수 있다
- 상태 코드 200 / 302 / 404 / 500 의 의미를 한 문장으로 말할 수 있다
- F12 Network 탭에서 헤더와 바디를 직접 찾을 수 있다
핵심 용어 정리
| 용어 | 설명 |
|---|
| HTTP | 클라이언트와 서버가 대화할 때 쓰는 약속된 글자 형식. 둘만 통하는 「대화 규칙」. |
| 요청 메시지 | 요청 라인 + 헤더들 + (바디). GET 은 보통 바디 없음, POST 는 바디에 폼 데이터. |
| 응답 메시지 | 상태 라인 + 헤더들 + 바디. 바디에 HTML/JSON/이미지 등이 담겨 옴. |
| 메서드 | 요청의 「동사」. GET(보여줘), POST(저장해줘) 가 본 과정의 핵심. |
| 상태 코드 | 응답 첫 줄의 세 자리 숫자. 결과를 한눈에 알리는 신호등. |
| 헤더 | 「이름: 값」 형식의 부가 정보 (Content-Type, Cookie, User-Agent 등). |
| 바디 | 메시지의 실제 내용물. |
1. 메시지의 3단 구조
요청 메시지
GET /search?q=spring HTTP/1.1 ← ① 요청 라인 (메서드 + 경로 + 버전)
Host: www.naver.com ← ② 헤더 (한 줄에 하나씩)
User-Agent: Chrome/...
Accept: text/html
← ③ 바디 (GET 은 보통 비어있음)
응답 메시지
HTTP/1.1 200 OK ← ① 상태 라인
Content-Type: text/html ← ② 헤더
Content-Length: 12345
<!DOCTYPE html>... ← ③ 바디 (실제 HTML/JSON/이미지)
2. 외울 상태 코드 4개
| 코드 | 의미 | 디버깅 방향 |
|---|
200 OK | 잘 됐다 | (평소엔 이거) |
302 Found | 다른 곳으로 가라 | 로그인 후 리다이렉트 등 |
404 Not Found | 그런 주소 없다 | 요청 URL 의심 |
500 Server Error | 서버 코드가 터졌다 | 내 서버 코드 의심 |
디버깅 첫 단계: 화면이 안 뜨면 F12 Network 탭에서 먼저 상태 코드부터 확인. 4xx 는 클라이언트 잘못, 5xx 는 서버 잘못 신호.
3. 메서드 — GET / POST
GET /board/list "보여줘" 조회 (URL 에 데이터 노출)
POST /board/write "저장해줘" 작성/제출 (바디에 데이터 숨김)
나머지(PUT/DELETE)는 Part 6 REST API 에서 만남.
4. F12 Network 사용법
- 크롬에서
F12 → Network 탭
- 새로고침 → 표 첫 줄 클릭
- 오른쪽 패널 Headers 탭에서 General / Response Headers / Request Headers 확인
- Response 탭에서 응답 바디(실제 HTML) 확인
5. Before / After
전 차시 끝
웹 = 클라이언트 ↔ 서버의 요청·응답이라는 추상적 그림.
이번 차시 끝
실제 메시지 글자 모양을 알고, 상태 코드로 1초 만에 결과를 판단한다.
학습 확인 체크리스트
- 요청·응답 메시지의 3단 구조를 그림으로 그릴 수 있다
- 상태 코드 200 · 302 · 404 · 500 의 의미와 디버깅 방향을 말할 수 있다
- F12 Network 탭에서 Headers / Response 패널을 찾을 수 있다
- 일부러 잘못된 URL 로 404 응답을 만들어볼 수 있다