📍 지금 어디를 만지고 있나요?
브라우저
⇄
서버
→
Controller
→
Service
→
DB
사전 준비
- 크롬(Chrome) 브라우저
- F12 Network 탭 사용법 (전 차시 「HTTP 해부」 완료)
이번 실습의 목표
네이버 검색(GET)과 로그인 폼(POST)을 직접 보내며, 두 메서드가 데이터를 어디에 싣는지 F12 로 눈으로 확인합니다.
- 크롬에서
www.naver.com 접속
F12 → Network 탭- 네이버 검색창에
spring 입력 후 엔터
- 주소창을 자세히 봅니다.
CHECKPOINT
- 주소창의 URL 안에
?query=spring 같은 글자가 들어 있나요?
- 이 URL 을 그대로 복사해서 새 탭에 붙여넣으면 같은 결과가 나오나요?
- F12 Network 탭에서 Method 열을 봅니다.
GET 으로 표시된 항목 중 search 가 들어간 줄을 클릭합니다.- 오른쪽 패널에서 Headers 탭을 봅니다.
스크린샷
Network 탭에서 GET 요청을 클릭한 뒤 Headers 패널. General 영역의 Request URL 에 query=spring 이 그대로 보임
예상 결과
Request URL 항목에 ...?query=spring... 같은 글자가 그대로 박혀 있습니다.
CHECKPOINT
- Payload 또는 Form Data 탭이 보이나요? 보여도 비어 있을 겁니다 — GET 은 바디가 없습니다.
- 네이버 우측 상단의 로그인 버튼을 누릅니다.
- F12 Network 탭이 켜져 있는지 확인합니다.
- 아이디·비밀번호에 아무 값이나 입력 후 로그인 버튼.
- Network 탭에 새로 생긴 줄 중
POST 메서드를 가진 항목을 찾습니다.
진짜 비밀번호는 입력하지 마세요
실습 목적이니 test123 등 아무 값이나 사용. F12 로 직접 보면 비밀번호가 어떻게 전달되는지 보입니다.
CHECKPOINT
- Method 열에
POST 가 보이나요?
- 해당 항목을 클릭하면 Payload 또는 Form Data 탭이 보이나요?
- 그 안에 입력한 값들이 들어 있나요?
두 요청을 나란히 비교합니다.
GET ── Request URL : ...?query=spring ← 데이터가 여기 (보임)
Payload : (없음)
POST ── Request URL : .../login ← 깔끔
Payload : id=test&password=test123 ← 데이터가 여기 (가려짐)
CHECKPOINT — 보안 감각
- 만약 로그인 폼이 GET 이었다면 비밀번호가 어디에 적혔을까요? (정답: 주소창 URL)
- 그 URL 이 브라우저 기록에 남으면 어떤 일이 일어날 수 있을까요?
로그인 응답을 받은 직후 그 페이지에서 F5 새로고침을 눌러봅니다.
예상 결과
"양식을 다시 제출하시겠습니까?" 같은 경고가 뜹니다. 이게 POST 요청의 새로고침 동작입니다.
반면 GET 페이지(검색 결과)에서 새로고침을 누르면 — 그런 경고 없이 그냥 다시 검색합니다.
CHECKPOINT
- POST 새로고침 시 경고가 뜨는 이유는? (정답: 같은 데이터를 또 저장하면 글이 두 번 작성될 수 있음)