[웹 기초] 9. 개발자 도구(Network)로 request/response를 눈으로 확인하는 방법

 

앞에서 웹은 request/response로 동작하고,
그 통신은 HTTP 메시지(header/body)로 오고 간다고 했다.

이걸 “개념”으로만 이해하면 금방 흐려진다.
웹은 반드시 눈으로 확인하는 습관을 붙여야 한다.

가장 좋은 방법이 브라우저 개발자 도구의 Network 탭이다.

 

Network 탭은 “브라우저가 실제로 주고받은 통신 기록”이다

Network 탭을 열면 브라우저가 서버와 통신한 내역이 시간순으로 찍힌다.

여기서 중요한 포인트는 단 하나다.

Network에 찍히는 항목 하나 = request 1개 + response 1개

 

즉, 화면에서 어떤 변화가 있었다면
그 변화는 반드시 Network 항목 중 하나(혹은 여러 개)로 나타난다.

 

 

어떻게 여는가

브라우저마다 단축키는 조금 다르지만 보통 아래 중 하나로 열린다.

• 개발자 도구 열기 → Network 탭 클릭
• 마우스 우클릭 → 검사(Inspect) → Network 탭 클릭

Network 탭을 열고 페이지를 새로고침하면
수많은 요청이 한 번에 쏟아지는 걸 볼 수 있다.

이 자체가 중요한 사실을 보여준다.

웹 페이지 하나를 보여주기 위해 request는 보통 1번이 아니라 여러 번 발생한다

 

HTML을 받는 요청이 있고,
그 HTML이 필요로 하는 CSS/JS/이미지 요청이 따로 또 발생하기 때문이다.

 

 

항목 하나를 클릭하면 “요청/응답 한 세트”가 보인다

Network에서 아무 항목이나 하나를 클릭하면 보통 이런 정보가 보인다.

• Headers
  • Request Headers
  • Response Headers
• (필요하면) Payload / Request Body
• Response (응답 본문)

여기서 가장 먼저 보는 습관을 들이면 좋은 건 Headers이다.

 

 

Request Headers에서 확인할 것

Request Headers는 “브라우저가 서버로 보낸 요청 정보”이다.
여기서 핵심은 아래 3가지이다.

1. Request URL
   • 어떤 주소로 요청했는지
2. Request Method
   • GET인지 POST인지
3. Query String Parameters / Form Data
   • 서버로 보낸 데이터가 있는지

즉, request는 “어디로, 어떤 방식으로, 어떤 데이터를” 보냈는지를 보는 것이다.

 

 

Response Headers에서 확인할 것

Response Headers는 “서버가 브라우저로 돌려준 응답 정보”이다.
여기서 핵심은 아래 3가지이다.

1. Status Code
   • 200(성공), 404(없음), 500(서버 에러) 같은 결과
2. Content-Type
   • HTML인지, JSON인지, 이미지인지
3. Set-Cookie (있다면)
   • 서버가 브라우저에게 쿠키를 발급했는지

즉, response는 “성공했는지, 무엇을 돌려줬는지, 추가로 쿠키 같은 걸 심었는지”를 보는 것이다.

 

 

“Headers를 보면 웹이 보인다”는 말의 의미

초보 때는 화면만 보고 판단하려고 한다.
하지만 웹에서 문제를 정확히 파악하려면
반드시 request/response를 기준으로 봐야 한다.

예를 들어 이런 질문들이 전부 Network로 해결된다.

• 왜 새로고침했더니 다시 요청이 가는가
• 왜 POST 재전송 경고가 뜨는가
• 왜 API가 401로 떨어지는가
• 왜 쿠키가 안 붙는가
• 왜 JSON이 아니라 HTML이 오는가

즉 Network는 “웹의 진짜 로그”이다.

 

 

정리

• Network 탭은 브라우저와 서버의 실제 통신 기록이다
• 항목 하나는 request/response 한 쌍이다
• request에서는 URL, Method, 파라미터를 본다
• response에서는 Status Code, Content-Type, Set-Cookie를 본다