AJAX

🤔 Ajax가 왜 등장했을까 ?

• 불필요한 데이터 통신
  : 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 HTML을 매번 전송 받음
• 화면이 순간적으로 깜빡이는 현상
  : 화면 전환시 마다 웹페이지 다시 전체 렌더링
• 클라이언트 블로킹
  : 클라이언트와 서버의 통신이 "동기"방식으로 동작했음

---

✓ AJAX란?

: Asynchonous Javascript(비동기 자바스크립트)와 XML의 약자

• 서버와 통신하기 위해 XMLHttpRequest객체를 사용하는 것
• 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
• 웹페이지 전체를 다시 로딩하지 않고도(새로고침X), 웹페이지의 일부분만을 갱신할 수 있도록 함 !
• 서버와 통신하여, 그 결과를 웹페이지 일부분에만 표지 OK
• 2가지 핵심기술 : Javascript 와 DOM, 그리고 Fetch
  • fetch()를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터만 받아올 수 있다.
  • 현재 페이지를 작업하는 동안에도 서버와 통신 OK ➡️ 비 동 기
    ➡️ JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있다

✓ AJAX의 장점 ?

• 웹 페이지를 다시 로딩하지 않고, 웹페이지의 일부분만 갱신할 수 있다.
• 웹 페이지가 로드된 후 서버로 데이터 요청을 보낼 수 있다.
  ➡️ 웹 페이지가 로드된 후 서버로부터 데이터 또한 받을 수 있다.
• 이전에는 브라우저마다 다른 방식으로 AJAX 사용 ➡️ XHR 표준화 이후 브라우저에 상관없이 AJAX 사용
• 더 작은 대역폭
  • 대역폭 : 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기
  • 전에는 완성된 HTML파일을 받아와야 했지만, AJAX에서는 필요한 데이터를 텍스트 형태 (JSON, XML)로 보내면 되기 때문에 비교적 파일 크기가 작아짐

✓ AJAX의 한계?

• 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링방식 사용 ➡️ 서버푸시 방식의 실시간 서비스는 만들 수 없다.
  • 풀링방식 vs 푸시방식
    • 클라이언트 풀링방식 ( client pooling )
      : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
    • 서버 푸시방식 ( server push )
      : 사용자가 요청하지 않아도 서버가 자동으로 특정정보를 제공하는 방식
      ( ex. 스마트폰에서 각종 앱이 보내는 푸시알림 )
• SEO(Search Engine Optimization)에 불리
  • 처음받는 HTML에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많음
  • AJAX 방식의 웹 애플리케이션의 HTML 파일은 데이터가 적기 때문에 사이트의 정보를 긁어가기 어려움
• 이전상태를 기억하지 않음 ➡️ 뒤로가기 등의 기능을 구현하기 위해서 별도로 History API 사용해야함
• Ajax는 스크립트가 포함된 서버가 아닌 다른서버로 AJAX요청을 보낼 수 없다.
• 클라이언트의 PC로 Ajax의 요청을 보낼 수 없다.

---

✓ fetch API

: HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API

• HTTP 파이프라인을 구성하는 요청과 응답등의 요소를 Javascript에서 접근, 조작할 수 있는 인터페이스 제공
• fetch가 등장하기 전 XHR(XMLHttpRequest)사용 ➡️ XHR의 단점을 보완한 새로운 API
• 웹개발을 할때, AJAX라는 비동기적인 통신방법을 통해 클라이언트 쪽에서 서버에 추가정보를 요청하여 가져올 수 있게 하는 것
• XML과는 달리 Promise까지 지원
• 별도의 라이브러리를 추가하지 않고, 내장되어있기 때문에 Javascript에서 호출하는 것으로 손쉽게 사용

📌 fetch 사용법

①. fetch는 2개의 인자를 받는다

fetch(url,[options])

• url(필수): 접근하고자 하는 url
• [options] : 선택 매개변수
• 첫번째인자인 url은 반드시 작성해야 한다
  ➡️ 자료를 요청할 서버의 주소와 요청 주소값을 정확히 작성해야함
• [options]는 사용할 HTTP메서드, headers,body등을 정의
  ➡️ 생략할 경우에는 default로 설정되어 있는 GET 방식으로 통신하게 되어있다.

✓ example

fetch('http://example.com/movies/json')
  .then((response) => response.json())
  .then((data) => console.log(data));

• json파일을 가져와서 콘솔창에 출력하는 단순한 예제
• fetch() 는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받음
• 응답 ➡️ response 객체로 표현
  ➡️ JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 함
  ➡️ 또 다른 프로미스를 반환

②. GET

fetch('http://example.com/movies/json')
  .then((res) => res.json()) // 응답결과를 json으로 파싱
  .then((data) => {
  console.log(data); // 응답 결과로 실행할 동작을 정의
  })
  .catch((err) => { // 오류 발생시 오류를 담아서 보여줌
  	console.log('Fetch Error', err);
  });

③. POST

let formData = new FormData(); // POST 매서드로 전송할 데이터
formData.append('key', value); // key-value(키-값) 의 형태로 데이터 추가함
fetch('http://example.com/movies/json', 
      { method: 'post',
    	body: formData  //전송할 데이터 body에 추가
	})
    .then(res => res.json()) //응답 결과를 json으로 파싱
    .then(data => {            
            console.log(data); //응답 결과를 console 창에 출력       
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

---

📌 StatesAirline Server REST API 사용

export function getFlight(filterBy = {} ) {
let query = '';
if(filterBy.departure) {
  query += `departure = ${filterBy.departure}&`
}
if(filterBy.destination) {
query += `destination = ${filterBy.destination}`
}
let endpoint = `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${query}`
return fetch(endpoint)
	.then((res) => res.json);
}

• Q. &는 왜 사용하는것임 ?
  ➡️ 구분해주는 연산자 !