비동기 HTTP 통신

자바스크립트 학습시 배웠던 fetch API를 퍼블리싱 공부에 집중하면서 아예 까먹었는데 최근 리액트를 공부하면서 관련된 내용을 공부하게 되어 AJAX 다시 복습 😂

AJAX를 사용하지 않던 시간

• HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작
• 화면 전환 시 새로운 HTML 다운, 전체를 리렌더링

단점

1. 변경할 필요가 없는 부분까지 서버로부터 매번 전송 받음.
   → 불필요한 데이터 통신이 발생
2. 변경할 필요 없는 부분도 함께 새로 렌더링 함.
   → 순간적인 깜빡임 현상 / 사용자 경험 ↓
3. 클라이언트와 서버와의 통신이 동기방식으로 동작
   → 서버로부터 응답이 있을 때 까지 다음 처리는 블로킹

AJAX란

• Asynchronous JavaScript And XML
• 자바스크립트를 이용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그램 방식
• AJAX는 Web API인 ✔XMLHTTPRequest 객체를 기반으로 동작함.
  👉 XMLHTTPRequest : HTTP 비동기 통신을 위한 메서드 & 프로퍼티 제공

장점

1. 변경할 부분만 갱신
   → 불필요한 데이터 통신 발생X
2. 전체 리렌더링 필요없음
   → 깜빡임 현상 발생X
3. 클라이언트와 서버와의 통신이 비동기 방식으로 동작
   → 서버 요청 후 블로킹 발생X

XMLHTTPRequest

https://code.tutsplus.com/articles/create-a-javascript-ajax-post-request-with-and-without-jquery--cms-39195

https://kim-oriental.tistory.com/12

Axios

• Promise based HTTP client for the browser and node.js
• node.js와 브라우저를 위한 HTTP 통신 라이브러리

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

웹사이트 : https://axios-http.com/kr/docs/intro

장점

• response timeout 처리 방법이 있음 (fetch에는 없음)
• 크로스브라우징 최적화
• 구형 브라우저 지원

단점

• 라이브러리 설치 필요

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

fetch

• ES6부터 생긴 fetch API
• HTTP error 상태를 reject하지 않음. 단, ok상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.
  👉 status code 404 , 500반환해도 reject되지 않음.

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

관련 자료 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

fetch API polyfill :

  <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js"></script>

https://github.com/github/fetch#caveats

장점

• 자바스크립트의 내장 라이브러리로 별도의 import 필요없음.
• 업데이트에 따른 에러 방지 가능.

단점

• 지원하지 않는 브라우저 (IE11), 별도의 polyfill필요
• 네트워크 에러 발생 시 response timeout없이 기다려야 함.
• JSON 변환 과정 필요.

JQuery.ajax()

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

$.ajax({
  url: '...',
  success: function(){
    alert('AJAX successful');
  }
});

• success, error ,complete
• jqXHR.done(function( data, textStatus, jqXHR ) {}),
  jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});,
  jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

https://api.jquery.com/jquery.ajax/
https://api.jquery.com/Ajax_Events/
https://devmg.tistory.com/61
https://developyo.tistory.com/88
http://daplus.net/jquery-ajax%EC%9D%98-%EC%84%B1%EA%B3%B5%EA%B3%BC-done-%EB%A9%94%EC%84%9C%EB%93%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C/

데이터 전송방식

1. POST = Create
   서버에 정보를 올려달라는 요청
2. GET = Read
   서버에 정보를 불러오는 요청
3. PUT,PATCH = Update
   정보를 바꾸는 요청 PUT은 전체 데이터, PATCH는 데이터의 일부만 수정
   브라우저 특성상 지원하지 않는 문제로 GET, POST 많이 사용
4. DELETE = Delete
   정보 삭제 요청

그외 도움된 웹사이트 모음

https://lily-im.tistory.com/15

• 전반적으로 예시가 자세히 있음!
  https://ghost4551.tistory.com/139