네트워크 탭에서 내가 보낸 요청 확인 방법

https://romanticstudy.tistory.com/manage/newpost

 

Network 탭에는 브라우저가 로드하면서 발생하는 모든 HTTP 요청이 쫙 보이거든요. (HTML, CSS, JS / 이미지, 폰트 / 광고, API 등)

---

1️⃣ 내가 원하는 요청 찾는 방법

1. 타이밍으로 찾기
   • 요청을 보내는 순간 Network 탭을 열고 페이지 새로고침(F5) 또는 폼 제출
   • 맨 위나 가장 최근에 생긴 요청이 내가 보낸 요청일 가능성 높음
2. 필터 사용
   • Network 탭 상단의 필터: XHR / Fetch / JS / Doc / Img 등
   • API 요청이나 폼 제출은 보통 XHR 또는 Fetch로 표시됨 → 그걸 선택하면 목록 좁혀짐
3. URL 확인
   • 요청 클릭 → Headers → Request URL
   • 내가 보내고 싶은 서버 주소와 경로(/submitForm 등) 확인
4. Method 확인
   • GET, POST, PUT 등 요청 방식(Method) 확인
   • 폼 제출은 대부분 POST → POST 요청을 찾으면 됨

---

2️⃣ 상태 코드 확인

• 요청 클릭 → Network 탭 → Status 컬럼
  • 또는 클릭 후 Headers → Response Headers에서 상태 코드 확인 가능
• 예: 200 OK, 500 Internal Server Error, 503 Service Unavailable

---

3️⃣ 팁

• Ctrl+R (Windows) / Cmd+R (Mac) 전에 Network 탭 열기 → 이전 요청도 볼 수 있음
• Search 기능(돋보기 아이콘) → URL 일부, 키워드로 요청 필터 가능
• Timeline 확인 → 요청 시작/응답 시간으로 내가 클릭한 요청 식별

---

즉, URL + Method + Timing + Filter(XHR/Fetch) 조합으로 내가 원하는 요청을 찾으면 됨.

---

1️⃣ 오류 발생 시 응답 본문

• HTTP 요청이 실패하면, 서버는 상태 코드 + 오류 관련 정보를 담아서 응답합니다.

일반적으로 원래 요청한 리소스 내용은 오지 않고, 오류 정보만 전달됩니다.

• 예시 (폼 제출 시 서버 과부하):

 

HTTP/1.1 503 Service Unavailable
Content-Type: application/json

{
  "error": "Queue full",
  "retry_after": 30
}

• 여기서 본문(body)에는 오류 메시지만 있음

• 하지만 일부 서버는 부분적 데이터 + 오류 정보를 같이 보내기도 합니다.
  • 예: 일부 API는 성공한 항목 데이터 + 오류 항목을 JSON으로 같이 내려줌

---

2️⃣ payload vs body

• HTTP Body(본문) = 요청(Request)이나 응답(Response)에서 실제 데이터가 들어가는 영역
  • GET 요청은 일반적으로 body 없음
  • POST, PUT, PATCH 요청에서는 body에 데이터(JSON, 폼 데이터 등) 포함
• Payload = body에 담긴 전송되는 실제 데이터를 의미
  • 따라서 대부분 경우 payload = body 내용
  • 하지만 payload라는 용어는 데이터 자체를 강조할 때 쓰임, body는 HTTP 메시지 구조상 위치를 의미

요약

용어	의미
Body	HTTP 메시지 구조 상 데이터가 담기는 위치
Payload	body 안에 담긴 실제 데이터(전송/수신)

---

3️⃣ 정리

1. 오류 발생 시 서버는 상태 코드 + 오류 메시지/데이터만 본문에 보내는 경우가 많음
2. 원래 요청한 리소스 내용은 대부분 포함되지 않음
3. Payload와 Body는 거의 같은 의미지만, body는 메시지 구조, payload는 그 안에 담긴 데이터 자체를 강조하는 용어

728x90

---

 

브라우저 개발자 도구(Network 탭)에서 body를 보는 방법과 Preview/Response 차이도 자세히 설명드릴게요.

---

1️⃣ 요청(Request) vs 응답(Response)

• Request Body → 클라이언트가 서버로 보내는 데이터
  • POST, PUT, PATCH 요청에서 주로 있음
• Response Body → 서버가 클라이언트로 보내는 데이터
  • HTML, JSON, 이미지, 오류 메시지 등

---

2️⃣ 개발자 도구에서 보는 위치

1. Request Body (요청 데이터)
   • Network 탭 → 요청 클릭 → Headers 탭
   • 아래쪽으로 스크롤하면 Request Payload 또는 Form Data 확인 가능
   • 예: POST 요청에서 JSON, 폼 데이터, 파일 업로드 등
2. Response Body (응답 데이터)
   • Network 탭 → 요청 클릭 → Response 탭
   • 서버가 보낸 실제 데이터가 그대로 표시됨
   • Preview 탭 → 브라우저가 Response Body를 렌더링해서 보기 좋게 보여줌
     • JSON이면 계층 구조로, HTML이면 DOM 구조처럼
   • 그래서 Preview와 Response 내용은 같은 데이터지만, Preview는 시각적/구조적 표시일 뿐

---

3️⃣ 요약

탭	내용
Headers → Request Payload/Form Data	클라이언트가 보낸 요청 데이터(body)
Response	서버가 보낸 실제 응답 데이터(body)
Preview	Response body를 브라우저가 보기 좋게 렌더링한 뷰
Response vs Preview	데이터 내용은 같음. Preview는 “보기 편하게” 보여주는 렌더링 결과

---

 

요즘 브라우저 자바스크립트에서 fetch API를 많이 쓰지만,

Network 탭에서 **XHR(XMLHttpRequest)**로 보이는 경우가 있습니다. 이유를 하나씩 정리해볼게요. 😄

---

1️⃣ XHR vs Fetch

• XHR (XMLHttpRequest)
  • 예전부터 쓰던 브라우저 API
  • AJAX 요청을 만들 때 사용
• Fetch API
  • 최신 자바스크립트 표준
  • Promise 기반, 비동기 요청 작성이 더 편리
  • 내부적으로 브라우저 네트워크 스택에서 XHR과 별개로 처리됨

---

2️⃣ Network 탭에서 XHR로 표시되는 이유

1. Chrome/Edge 개발자 도구 구현상
   • DevTools Network 탭에서 모든 AJAX/Fetch 요청을 XHR 필터에 묶어서 보여줌
   • 즉, XHR = ‘AJAX 요청’ 카테고리
   • Fetch든 XHR이든 Network 탭의 XHR 필터에 나타남
2. ‘Fetch’라는 별도 카테고리도 존재
   • Chrome 최신 버전에서는 Network 탭 상단 필터에 Fetch/XHR로 통합되어 있음
   • 일부 오래된 브라우저나 DevTools 설정에서는 Fetch 요청도 XHR로 분류
3. 실제 요청 처리 방식
   • Fetch API도 브라우저 내부적으로는 HTTP 요청을 생성
   • DevTools는 편의상 XHR 카테고리에 표시

---

3️⃣ 확인 방법

• Network 탭 → All 필터로 보면 Fetch/XHR 구분 없이 모든 요청 표시
• 요청 클릭 → Headers → Request URL, Method, Status Code 확인
• Chrome 최신 버전: Fetch API 요청에도 Initiator가 fetch라고 표시됨

---

✅ 정리

• 브라우저에서 fetch()를 써도 Network 탭에서는 XHR로 보일 수 있음
• XHR 필터 = AJAX/비동기 요청 통합 카테고리
• 실제 HTTP 요청은 fetch든 XHR이든 동일하게 서버로 전송됨

---

1️⃣ AJAX란?

• AJAX = Asynchronous JavaScript And XML
• 의미: 자바스크립트를 이용해 서버와 비동기 HTTP 요청을 보내고, 응답을 받아 화면 일부를 갱신하는 기술
• 특징:
  1. 페이지 전체 새로고침 없이 데이터 전송 가능
  2. 비동기(Asynchronous) 방식 → 요청 보내고 응답 올 때까지 기다리지 않음
  3. 주로 JSON 데이터를 받아 화면 갱신에 사용

---

2️⃣ AJAX 요청과 HTTP 요청의 관계

• AJAX 요청 = HTTP 요청의 한 종류
  • 서버에 HTTP 요청(GET, POST, PUT, DELETE 등)을 보내는 방식
  • 브라우저에서 fetch()나 XMLHttpRequest(XHR)를 이용해 구현
  • 서버 입장에서는 일반 HTTP 요청과 동일하게 처리됨

예시:

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

• /api/data로 HTTP GET 요청을 보내는 AJAX 요청
• 서버 응답(JSON) → 화면 일부 업데이트 가능

---

3️⃣ AJAX 요청과 일반 HTTP 요청의 차이

구분	일반 HTTP 요청	AJAX 요청
방식	브라우저 주소창/링크 클릭 → 전체 페이지 요청	자바스크립트에서 HTTP 요청 → 일부 화면만 갱신
페이지 새로고침	필요	필요 없음
구현	HTML 폼 제출, 링크 클릭	fetch(), XHR
서버 입장	HTTP 요청 동일	HTTP 요청 동일

---

4️⃣ 요약

• AJAX = 브라우저에서 자바스크립트로 보내는 비동기 HTTP 요청 기술
• 서버 입장에서는 그냥 HTTP 요청과 동일하게 처리됨
• 차이점은 브라우저 화면 갱신 방식과 요청 생성 방법

---

 

HTTP 요청은 AJAX 말고도 여러 방식으로 발생할 수 있어요.

브라우저 기준으로 구분하면 이렇게 정리할 수 있습니다.

---

1️⃣ 1. 일반 페이지 요청

• 주소창 URL 입력 / 링크 클릭 / 폼 제출
• 브라우저가 페이지 전체를 요청하고 새로고침
• 예시:

GET /index.html HTTP/1.1

• 특징:
  • 페이지 전체 로드
  • 브라우저가 자동으로 HTML, CSS, JS, 이미지 등을 순차 요청

---

2️⃣ 2. AJAX 요청

• 이미 설명했듯이 자바스크립트를 이용한 비동기 요청
• 페이지 전체 새로고침 없이 데이터만 요청
• 구현: fetch(), XMLHttpRequest(XHR)
• 주로 JSON 데이터 받아 화면 일부 업데이트

---

3️⃣ 3. Fetch API 요청

• 최신 자바스크립트 표준
• AJAX와 기능적으로 동일하지만 Promise 기반, 사용이 간편

예시:

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

• Network 탭에서는 AJAX 요청(XHR) 카테고리에 표시되기도 함

AJAX와 Fetch API, XMLHttpRequest(XHR)의 관계랑 Promise 기반 여부를 하나씩 정리해볼게요.

---

1️⃣ AJAX 요청 = HTTP 요청을 비동기로 보내는 기술

• AJAX = Asynchronous JavaScript And XML
• 핵심: 자바스크립트에서 비동기 HTTP 요청
• AJAX 구현 방법:
  1. XMLHttpRequest (XHR)
  2. Fetch API (fetch())

즉, **AJAX는 “개념/기술”**이고, XHR과 Fetch는 구현 수단입니다.

---

2️⃣ XMLHttpRequest(XHR)

• 예전부터 AJAX 구현할 때 사용
• 콜백 기반

 

var xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

• 장점: 모든 브라우저 지원
• 단점: 콜백 지옥(callback hell), 코드가 길고 복잡함

---

3️⃣ Fetch API

• 최신 자바스크립트 표준
• Promise 기반 → 비동기 코드를 더 간단하게 작성 가능

fetch('/data')
  .then(response => response.json())
  .then(data => console.log(data));

• 장점: 간결, Promise/async-await 사용 가능, JSON 처리 쉬움
• 단점: Internet Explorer 미지원 (Polyfill 필요)

---

4️⃣ AJAX 요청 + Promise 개념

• AJAX = “비동기 HTTP 요청 기술” → Promise랑 직접 연관은 없음
• XHR은 콜백 기반 AJAX 구현
• fetch()는 Promise 기반 AJAX 구현
• 즉: AJAX = 기술 / fetch() = Promise 기반 AJAX 구현 수단

---

5️⃣ 요약

구분	AJAX 구현 수단	비동기 처리 방식
XHR	XMLHttpRequest	콜백(callback)
Fetch API	fetch()	Promise / async-await

• AJAX ≠ Promise 기반
• fetch()로 AJAX 요청하면 Promise 기반이 됨
• XHR로 AJAX 요청하면 콜백 기반

---

 

1️⃣ AJAX = 비동기 HTTP 요청 기술

• AJAX = Asynchronous JavaScript And XML
• 정의: 자바스크립트를 이용해 브라우저에서 서버로 HTTP 요청을 비동기(Asynchronous)로 보내고, 응답을 받아 화면 일부만 갱신하는 기술
• 핵심:
  1. HTTP 요청을 비동기적으로 보냄 → 페이지 전체 새로고침 없이 처리
  2. 주로 JSON, XML, HTML, 텍스트 데이터 처리

---

2️⃣ 비동기 요청 ≠ 모두 AJAX

• 비동기 HTTP 요청 = 서버에 요청을 보내고 응답을 기다리는 동안 브라우저가 멈추지 않는 방식
• AJAX는 자바스크립트를 사용한 브라우저 기반 비동기 요청만 의미
• 서버 사이드나 네트워크 레벨에서 비동기 요청하는 것은 AJAX라고 부르지 않음

예시 비교:

요청 방식	AJAX 여부	특징
브라우저 fetch()	✅	자바스크립트 기반, 페이지 새로고침 없이 요청/응답 처리
XHR	✅	기존 AJAX 구현 방식
서버 간 비동기 요청 (Node.js, Python requests 비동기)	❌	서버 사이드, AJAX 아님
브라우저 <img> 비동기 로딩	❌	비동기 요청이긴 하지만, AJAX라고 부르지 않음

---

3️⃣ 정리

• AJAX = 브라우저 + 자바스크립트 기반 비동기 HTTP 요청
• “비동기 HTTP 요청”이라는 개념이 더 넓음
• AJAX는 그 중 브라우저에서 화면 갱신용으로 사용하는 요청을 지칭

---

4️⃣ 4. 이미지/스크립트/스타일 리소스 요청

• 브라우저가 HTML 문서 읽으면서 자동으로 요청
• <img>, <script>, <link> 태그 등
• GET 요청이 대부분이며, 서버에서 이미지, JS, CSS 반환

---

5️⃣ 5. WebSocket / SSE 요청

• WebSocket: 최초 연결은 HTTP(Upgrade) → 이후 TCP 기반 통신
• SSE(Server-Sent Events): 서버에서 클라이언트로 지속적으로 데이터 푸시
• AJAX와 달리 실시간 통신용

---

6️⃣ 6. 폼 제출

• <form> 태그 submit → 브라우저가 HTTP 요청 생성
• GET 또는 POST 방식 가능
• 페이지 전체 새로고침 발생

---

7️⃣ 요약

방식	특징	HTTP 요청 여부
주소창/링크	페이지 전체 로드	O
AJAX/XHR	비동기, 일부 화면만 업데이트	O
Fetch API	최신 Promise 기반 AJAX	O
이미지/스크립트 요청	브라우저 자동 요청	O
WebSocket / SSE	실시간 통신, 업그레이드 필요	초기 HTTP 필요
폼 제출	GET/POST, 전체 새로고침	O

---

즉, HTTP 요청 = AJAX만 있는 게 아니라 브라우저가 서버와 통신하는 모든 요청이 될 수 있음.
AJAX/Fetch는 자바스크립트를 이용한 클라이언트 코드 생성 요청일 뿐이에요.