[ Web-Security ] XHR → Fetch API

 

1. 서버 통신의 변화

비동기 통신 이전의 서버 통신은 FORM 태그를 사용

Form 태그

브라우저에서 폼을 채우고, 이를 웹 서버로 제출하면 웹 서버는 요청된 내용에 따라서 데이터를 가공하여
새로운 웹 페이지를 작성하고, 응답으로 되돌려 준다.

 

But, 단점

전체 메세지를 reload하기 때문에 서버의 부하가 커지고, 시간이 오래 걸린다.

동기 방식으로 페이지가 reload되는 동안에는 다른 데이터를 처리할 수 있다.

 

그래서 나온 비동기 통신

요청을 보낸 후 응답과는 상관없이 다음 작업을 동작하는 방식, 서버 통신의 단점을 극복

---

2. Ajax

페이지 전체를 reload하지 않고, 수해오디는 비동기성

SON, XML, HTML 그리고 일반 텍스트 형식등을 포함한 다양한 포맷을 주고 받을 수 있다.

이름	설명	비유
Cookie	사용자의 인증 정보나 상태를 저장하는 작은 데이터 조각	"회원증" 같은 거
Header	서버에 요청 보낼 때 "추가 정보"를 붙이는 곳	"편지 겉봉투"에 적는 내용
Body	서버에 보내는 "진짜 내용" (데이터)	"편지 안쪽에 쓴 글"

---

3. XMLHttpRequest ( XHR )

• 웹에서 데이터를 서버로 보내거나 가져오고 싶을 때 쓰던 방법
• 페이지 전체를 새로고침하지 않고, 서버에 요청해서 데이터만 받아올 수 있게 만들어 준 기술

콜백 기반

• 상태 변화(readyState)를 일일이 체크

---

4. Fetch API

• XMLHttpRequest의 최신 버전
• 더 간결하고, 읽기 쉬운 코드로 서버 요청을 보낼 수 있음

Promise를 기반으로 만들어져서 더 깔끔한 비동기 처리(성공, 실패 핸들링)

• then이나 async/await를 사용해서 쉽게 다룸