HTTP/네트워크 #4

날림·2021년 10월 18일
0

HTTP

목록 보기
4/5

AJAX

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다 - Wiki_ko

다음과 같은 기술을 이용한다
- JavaScript, DOM, Fetch, XMLHttpReqest, HTML, ...

이 기술을 사용한다면

웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다

구글 검색창에 한 글자를 입력할 때마다
해당 글자로 시작하는 단어를 서버에서 받아와
추천검색어로 보여준다


Fetch

전통 웹 앱: <form> 태그로 서버에 데이터를 전송
전통 서버: 응답으로 새로운 웹 페이지를 제공

= 매번 새로운 페이지로 이동해야 했음

fetch를 사용한다면?
페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다

fetch로 필요한 데이터를 가져와 DOM에 적용시킨다면
새 페이지로 가지 않아도 필요한 부분이 바뀐다


장단점

장점

서버에서 받는 데이터가 적기 때문에...

  1. 빠르고 더 많은 상호작용이 가능함
  2. 더 작은 대역폭으로도 가능

초기에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화 되면서부터 브라우저에 상관 없이 사용 가능

단점

  1. HTML 파일 자체는 뼈대뿐이라 앱의 정보를 긁기 어렵다
    = Search Engine Optimization(SEO)에 불리
  2. 뒤로 가기 버튼이 사용자가 생각한 대로 동작하지 않음
    = 별도의 API를 사용

이런 점 덕분에
CSR(Client Side Rendering)이 필요한 경우
사용되는 기술이다

profile
항상배우기

0개의 댓글