▣ LAB · WEB

F12 로 HTTP 메시지 뜯어보기

HTTP 해부 — 실습 / 소요 시간: 약 20분

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

사전 준비

이번 실습의 목표

크롬 개발자 도구 안에서 요청 라인 / 헤더 / 바디 / 상태 코드를 직접 손가락으로 짚을 수 있게 됩니다. 이게 이 과정 동안 가장 자주 쓸 디버깅 도구입니다.

1
네이버 접속 + Network 탭 켜기
  1. 크롬에서 www.naver.com 에 접속합니다.
  2. F12 를 눌러 개발자 도구를 엽니다.
  3. 위쪽 탭에서 Network 를 클릭합니다.
  4. 이 상태에서 F5 로 새로고침합니다 — 표가 좌르르 채워집니다.
CHECKPOINT
  • 표 가장 위쪽 줄(보통 www.naver.com)에서 Status 열에 무엇이 보이나요?
  • 대부분 200 일 겁니다 — 이게 「잘 됐다」 신호입니다.
2
첫 줄 클릭해서 Headers 패널 열기

표의 가장 위쪽 줄(www.naver.com)을 클릭하면 오른쪽(또는 아래)에 새 패널이 펼쳐집니다.

그 패널 안에서 Headers 탭을 선택하면 다음 세 영역이 위에서부터 차례로 보입니다:

패널의 3단 구성
  • General — 상태 코드와 요청 URL
  • Response Headers — 서버가 보낸 응답 헤더
  • Request Headers — 내가 보낸 요청 헤더
스크린샷
F12 Network 패널에서 한 항목을 클릭한 뒤 Headers 탭. General · Response Headers · Request Headers 가 위에서부터 펼쳐진 화면
예상 결과

위 세 영역에 십수 개의 「이름: 값」 형식 줄이 보입니다.

CHECKPOINT — 직접 찾아보기
  • General 안에 Status Code 가 보이나요? 무슨 숫자가 적혀 있나요?
  • Request Headers 에서 User-Agent 줄을 찾아보세요. 내 브라우저 정보가 적혀 있을 겁니다.
  • Response Headers 에서 Content-Type 줄을 찾아보세요. 응답이 무슨 형식인지 알려줍니다 (보통 text/html).
3
응답 바디(실제 HTML) 보기

같은 항목의 오른쪽 패널에서 Headers 옆의 Response 탭을 클릭합니다.

여기에 보이는 글자 무더기가 바로 응답 메시지의 「바디」입니다. 즉, 서버가 우리에게 돌려준 HTML 그 자체입니다.

스크린샷
Response 탭에 HTML 소스 코드가 그대로 펼쳐진 화면. <!DOCTYPE html> 으로 시작하는 긴 텍스트
CHECKPOINT
  • 맨 처음 글자가 <!DOCTYPE html> 으로 시작하나요?
  • 이 글자들이 브라우저가 해석해서 그림으로 그려준 것 입니다. 즉 우리가 본 네이버 화면의 「설계도」.
4
404 응답 만들어보기 (일부러)

존재하지 않는 주소를 일부러 입력해서 4xx 응답이 어떻게 생겼는지 봅니다.

  1. Network 탭이 켜진 상태에서 주소창에 다음을 입력하고 엔터:
https://www.naver.com/this-page-does-not-exist-12345
  1. Network 탭의 가장 위쪽 줄을 클릭합니다.
  2. General 의 Status Code 가 무엇인지 봅니다.
예상 결과

404 Not Found 가 빨간색으로 표시됩니다.

CHECKPOINT
  • 404 가 보이면 "URL 이 잘못됐다" 는 신호입니다. 디버깅 시 가장 먼저 의심할 곳: 주소 오타.
  • 실제 화면에도 「존재하지 않는 페이지입니다」 같은 안내가 떴나요?
5
상태 코드 4개 카드 정리

이번 과정에서 가장 자주 만날 4개를 입으로 말할 수 있게 외워둡시다.

한 줄 외움법
  • 200 — 잘 됐다
  • 302 — 다른 데로 가라 (리다이렉트)
  • 404 — 그런 주소 없다
  • 500 — 서버 코드가 터졌다
CHECKPOINT — 마지막 점검
  • 친구한테 30초 안에 「상태 코드 4개와 의미」 를 설명할 수 있나요?
  • "500 이 뜨면 어디를 의심해야 한다"고 답할 수 있나요? (정답: 내 서버 코드)
  • "404 가 뜨면 어디를 의심해야 한다"고 답할 수 있나요? (정답: 요청한 URL)

실습 완료 체크리스트

Network 탭에서 한 요청을 클릭하고 Headers 패널을 열어봤다
General · Response Headers · Request Headers 세 영역을 손가락으로 짚을 수 있다
Response 탭에서 응답 바디(HTML 원문)를 봤다
일부러 잘못된 URL 로 404 응답을 만들어봤다
200 / 302 / 404 / 500 의 의미를 입으로 말할 수 있다
← 이전: 클라이언트와 서버 메인으로 다음: GET vs POST →