Fetch/XHR 과 DOC의 이해

개발자 도구 > network > fetch/XHR

• 해당 섹션은 웹페이지가 백엔드와 통신하는 모든 비동기 요청(ajax요청 등)을 표시
  • ajax는 웹페이지가 서버와 데이터를 주고받을 때 사용하는 기술
  • 주로 자바스크립트에서 실행되며, 페이지를 새로고침하지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보내는데 사용
• 해당 섹션에서 보이는 각 요청은 백엔드의 특정 엔드포인트와의 통신을 나타냄
  • 각 요청의 URL
  • HTTP 메서드(GET, POST등)
  • 응답 상태 코드
  • 응답 시간
  • 응답으로 받은 데이터의 정보를 볼 수 있음

개발자 도구 > network > Doc

• 주로 html문서를 로드하는 요청을 표시
  • 이런 요청들은 웹 서버에 있는 html파일을 요청하는 http요청
• 이 html파일은 웹 서버가 웹 브라우저에 보내는 웹 페이지의 기본 구조를 나타냄
• doc에서 보이는 각 요청은 웹 서버의 특정 엔드포인트와의 통신을 나타내며, 그 결과로 html문서가 반환
• 이 html문서 요청 역시 벡엔드와 통신하는 엔드포인트로 볼 수 있음
  • 요청 url
  • http메서드
  • 응답 상태코드
  • 응답 시간

두 개 차이

• 웹페이지 로딩 방식과 웹페이지에서 사용자와의 상호작용을 처리하는 방식에 대한 차이
• fetch/xhr
  • 웹페이지가 사용자와 상호작용하는 동안 백엔드와 비동기적으로 데이터를 주고받는 경우 사용됨
  • 사용자가 버튼을 클릭하면 웹페이지는 백엔드로 요청을 보내고, 이요청에 대한 응답을 기다리는 동안에도 사용자는 웹페이지의 다른 부분을 계속 사용할 수 있음
  • 이런 요청들을 비동기 요청이라고 함
  • 사용자와 상호작용을 처리하거나, 웹페이지의 일부분만 업데이트할 때 사용되는 비동기 요청
  • 이런 요청은 웹페이지가 백엔드와 데이터를 주고 받는 동안에도 사용자는 웹페이지의 다른 부분을 계속 사용할 수 있음
  • 웹페이지에서 백엔드로 비동기 요청을 나타냄
• Doc
  • 웹페이지가 처음 로드될때, 혹은 사용자가 새로운 페이지로 이동할 때 발생하는 요청
  • 웹페이지의 전체 html문서를 로드하는데 사용
  • 이 과정은 일반적으로 동기적으로 수행
  • 웹브라우저는 html문서를 완전히 로드하고 나서야 사용자에게 페이지를 보여주고, 사용자와의 상호작용을 시작
  • 웹페이지의 전체 html문서를 로드하는 동기 요청
  • 웹페이지가 처음 로드 될 때, 혹은 사용자가 새로운 페이지로 이동할 때 발생하는 요청
  • 이런 요청은 웹페이지 전체 html문서를 로드하며, 웹 브라우저는 이 html문서를 완전히 로드하고 나서야 사용자에게 페이지를 보여주고 사용자와의 상호작용을 시작 => 이러한 특성 때문에 이런 요청은 동기요청이라 할 수 있음

두 개 동시에 작동하는 경우가 있음

• 사용자가 웹페이지를 방문할 때 doc 요청을 통해 Html문서를 로드하면서 동시에 fetch/xhr요청을 통해 추가적인 데이터를 로드하는 경우가 있을 수 있음
  • 주로 웹 페이지가 초기 로드 단계에서 필요한 기본적인 정보를 제공하는 Html문서를 로드하면서, 동시에 사용자에게 보여줄 추가적인 데이터를 백엔드에서 비동기적으로 가져오는 경우에 발생..
• 웹페이지에서 사용자와의 상호작용을 처리하는 동안에도 fetch/xhr요청과 doc요청이 동시에 발생할 수 있음
  • 사용자가 새로운 페이지로 이동하는 doc요청을 보내는 동시에, 백엔드에서 추가적인 데이터를 가져오기 위한 fetch/xhr요청을 보낼 수 있음