- 자동추천검색어가 가능한 이유?
ajax를 통해서 웹서버와 통신을해서 추천검색어를 받아옴
- 페이지 리로드 할 필요 X
- gmail도 페이지의 리로드 없이 새로운 메일이 보여짐
- 필요한 정보만을 부분적으로 정교하게 낚아채는 낚시꾼 => Ajax
- 웹페이지 일부 정보가 달라졌음에도 전체 페이지를 리로드 하는 것은 비효율적.
=> Ajax는 리로드 없이 웹서버에 정보를 요청해서 부분적으로 정보를 갱신해주는 기술
- 페이지 리로드를 줄여서 사용자 경험을 향상시킬 수 있음
- 리로드 할 때마다 모든 정보를 다운로드 하는 비효율이 불만인 경우 해결 가능
- 단 하나의 index.html 이라는 페이지를 재사용하고 바뀔 수 있는 부분과 고정될 수 있는 부분을 구분해서,
바뀔 수 있는 부분만 Ajax로 동적으로 해주면 폭발적인 효율성 상승
=> 각각의 페이지마다 모두가 html을 가질 필요가 없다.
=> Single-Page application이라고도 함
<!DOCTYPE html>
<html>
<body>
<input type ="button" value="fetch" onclick="fetch('html').then(function(response){
response.text().then(function(text){
alert(text);
})
})
">
</body>
</html>
- fetch를 누르면 css의 데이터를 다운 받고, 그 파일에 담긴 text내용이 경고창으로 나오는 중
fetch API - 요청과 응답
fetch("javascript")
- 클라이언트가 서버에게 요청
웹 브라우저야 자바스크립트라는 파일을 서버에게 응답해줘
- 서버가 응답할 때까지 다른 기능하고 있기
then
response 객체 status
- 404 파일이 없다
- 200 성공
이후 공부할 것
XML
JSON => 요즘 추세
Single Page Application => Pjax
Progressive Web Apps => 오프라인도 가능
'[React] Front-End' 카테고리의 다른 글
| 2020 Javascript Trend | 자바스크립트 트렌드 (by.노마드코더) (0) | 2020.01.26 |
|---|---|
| [WEB] HTTP / HTTP Cache / CloudFront (0) | 2019.09.01 |
| [WEB] UI vs API (0) | 2019.08.17 |
| [WEB] JavaScript : 객체 / js파일쪼개기 / 라이브러리와 프레임워크 (0) | 2019.08.03 |
| [WEB] CSS기초 / JavaScript 리팩토링, 배열, 반복문, 함수,객체 (0) | 2019.07.31 |