▣ LAB · WEB

요청·응답을 직접 눈으로 보기

클라이언트와 서버 — 실습 / 소요 시간: 약 15분

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

사전 준비

이번 실습의 목표

코드는 한 줄도 쓰지 않습니다. 대신 매일 보는 웹사이트에서 진짜로 요청과 응답이 오가는 장면을 직접 보고, 흐름을 손가락으로 짚을 수 있게 됩니다.

1
크롬을 열고 네이버에 접속하기

가장 익숙한 일부터 시작합니다.

  1. 크롬을 엽니다.
  2. 주소창에 www.naver.com 을 입력하고 엔터를 누릅니다.
  3. 화면이 뜰 때까지 기다립니다 (보통 1초 이내).
예상 결과

네이버 메인 화면이 보입니다.

CHECKPOINT — 잠시 멈춰서 생각해보기
  • 주소창에 글자를 친 순간부터 화면이 뜨기까지 — 누가 누구에게 무엇을 부탁했나요?
  • "네이버 줘"라는 요청을 받은 쪽은 어디에 있을까요? (힌트: 우리 컴퓨터가 아닙니다)
2
개발자 도구 열기 — F12

네이버 화면이 떠 있는 상태에서 키보드의 F12 키를 누릅니다.

F12 가 안 눌린다면

맥북 노트북: fn + F12 를 눌러보세요.
또는 화면 어디든 우클릭 → "검사" 메뉴를 클릭해도 됩니다.

화면 한쪽에 처음 보는 검은 패널이 나타납니다. 두려워하지 마세요 — 이게 바로 개발자 도구(DevTools) 입니다.

스크린샷
F12 를 눌러 개발자 도구 패널이 처음 열린 화면. 우측 또는 하단에 새 패널이 등장
예상 결과

화면 한쪽에 검은(또는 흰) 패널이 새로 보이고, 위쪽에 「Elements / Console / Sources / Network」 같은 탭이 나란히 있습니다.

CHECKPOINT
  • 개발자 도구의 위쪽 탭들 중 「Network」 가 보이나요?
  • 안 보이면 탭 영역에서 ≫ 표시를 눌러 더 많은 탭을 펼쳐보세요.
3
Network 탭 켜고 새로고침
  1. 개발자 도구의 위쪽에서 「Network」 탭을 클릭합니다.
  2. 탭이 비어 있어도 괜찮습니다.
  3. 이 상태에서 키보드의 F5 또는 주소창 옆 새로고침 아이콘을 누릅니다.
  4. 탭 안에 줄이 좌르르 채워지는 것 을 봅니다.
스크린샷
Network 탭에 수십 개의 요청·응답이 줄로 나열된 화면. 파일명·상태코드·시간이 표 형태로 보임
예상 결과

수십 줄의 항목이 표 형태로 나타납니다. 각 줄이 하나의 요청·응답 입니다.

CHECKPOINT — 직접 세어보기
  • 네이버 메인 한 페이지를 띄우는 데 요청이 몇 개 일어났나요? (대략 30~100개)
  • 한 번 클릭으로 한 개만 가는 줄 알았는데, 왜 이렇게 많을까요? (HTML, 이미지, JS, CSS, 폰트 등 각자 별도 요청)
4
요청 하나를 클릭해서 안을 보기

줄 중에서 가장 위쪽의 www.naver.com 같은 항목 하나를 클릭합니다.

오른쪽(또는 아래)에 새 패널이 열리고, 그 안에 Headers / Payload / Response 같은 작은 탭들이 보입니다.

지금은 자세히 안 봐도 됩니다

이 안의 글자들이 무엇인지 다 외울 필요 없습니다. 다음 차시(HTTP 해부) 에서 한 줄씩 뜯어봅니다. 오늘은 그저 「안에 뭔가 글자가 있구나」 정도만 보고 가도 충분합니다.

스크린샷
Network 탭의 한 항목을 클릭하면 우측에 Headers·Payload·Response 등의 상세 패널이 열린 화면
CHECKPOINT
  • 클릭한 줄의 Status 항목에 무엇이 적혀 있나요? (대부분 200 일 겁니다)
  • 200 이라는 숫자가 어떤 뜻일지 — 다음 차시에서 다룹니다. 일단 「잘 됐다」 의 뜻이라고 알아두세요.
5
클라이언트와 서버의 대화를 그림으로 그려보기

오늘 본 것을 머릿속에 박아두기 위해 — 종이나 메모장에 직접 그림을 그려보세요.

┌─────────────┐ ┌──────────────┐ │ │ ① "이거 주세요" │ │ │ (내가 그릴 │ ─────────────────→ │ (내가 그릴 │ │ 손님) │ │ 가게) │ │ │ ←───────────────── │ │ │ │ ② "여기 있습니다" │ │ └─────────────┘ └──────────────┘
  1. 왼쪽에 클라이언트(내 브라우저)를 그립니다.
  2. 오른쪽에 서버(네이버 컴퓨터)를 그립니다.
  3. 두 사이에 화살표 두 개를 그립니다 — 하나는 요청, 하나는 응답.
  4. 각 화살표 위에 무엇이 오갔는지 적습니다.
CHECKPOINT — 마지막 점검
  • 그림을 보면서 누군가에게 30초 안에 설명할 수 있나요?
  • "브라우저가 네이버에게 ___을 요청하고, 네이버가 ___을 돌려줘서 화면이 뜬다" 의 빈칸을 채울 수 있나요?

실습 완료 체크리스트

크롬에서 네이버에 접속했다
F12 로 개발자 도구를 처음 열어봤다
Network 탭에서 새로고침 시 수십 개 요청이 발생함을 확인했다
한 요청을 클릭해 상세 패널을 열어봤다
손님 ↔ 가게 그림을 직접 그려봤다
「웹은 요청과 응답의 반복」이라는 한 줄을 입으로 말할 수 있다
← 이전 메인으로 다음: HTTP 해부 →