[ 2022.12.07 TIL-AJAX와 AXIOS ]

동기와 비동기

✏️ 동기란?

• 데이터의 요청과 결과가 한자리에서 동시에 일어남
• 사용자가 데이터를 서버에게 요청하면 그 서버가 데이터 요청에 따른 응답을 사용자에게 다시 돌려주기 전까지 사용자는 다른 활동을 할 수 없고 기다려야함

✏️ 동기 방식의 장단점

• 장점
  • 설계가 매우 간단, 직관적
• 단점
  • 요청에 따른 결과가 반환되기 전까지 아무것도 못하고 대기

✏️ 비동기란?

• 데이터의 요청과 결과가 동시에 일어나지 않음
• 서버에게 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도되고 다른 활동을 수행해도됨

✏️ 비동기 방식의 장단점

• 장점
  • 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있음
• 단점
  • 동기식보다 설계가 복잡

✏️ 동기와 비동기 차이

AJAX

✏️ AJAX란?

• JavaScript의 라이브러리 중 하나
• Asynchronous Javascript And Xml(비동기식 자바스크립트와 XML)의 약자
• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
• 클라이언트와 서버간에 XML 데이터를 주고받는 기술

✏️ AJAX를 사용하는 이유

• Web화면에서 데이터를 조회하거나 할때 페이지 전체를 새로고침하지 않기 위해 사용
• 기본적으로 HTTP 프로토콜은 비연결성 프로토콜로 요청을 보내고 응답받으면 연결을 끊음
• 화면 내용을 갱신하기 위해서 다시 요청을 보내고 응답을 받아야되서 자원낭비와 시간낭비를 초래
• AJAX는 HTML 페이지 전체가 아닌 일부부만 갱신하도록 XMLHttpRequest객체를 통해 서버에 Request
• JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼 자원을 아낄수 있음

✏️ AJAX 구조

$.ajax ({
// URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
url	: "url", // 요청이 전송될 URL 주소
type	: "GET", // http 요청 방식 (default: ‘GET’)
async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
cache : true,  // 캐시 여부
timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
data  : {key : value}, // 요청 시 포함되어질 데이터
processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
contentType : "application/json", // 요청 컨텐트 타입 
dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
beforeSend  : function () {
  XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
},
success : function(data, status, xhr) {
  정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
  이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
},
error	: function(xhr, status, error) {
  응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
  error 콜백이 호출될 수 있습니다.
  예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
  서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
},
complete : function(xhr, status) {
  	 success와 error 콜백이 호출된 후에 반드시 호출됩니다.
  	 try - catch - finally의 finally 구문과 동일합니다.
 	}
});

✏️ AJAX 장점

• 웹페이지의 속도 향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듬
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다

✏️ AJAX 단점

• 히스토리 관리가 되지않음
• 페이지 이동없는 통신으로 인한 보안상의 문제가 발생
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지않음
• AJAX를 쓸수 없는 브라우저에 대한 문제 이슈 존재
• HTTP 클라이언트의 기능이 한정
• 지원하는 Charset이 한정
• Script로 작성되므로 디버깅이 용이하지 않음
• 동일-출처 정책으로 인하여 다른 도메인과 통신이 불가능 (Cross-Domain문제)

✏️ AJAX 진행과정

1. XMLHttpRequest Object를 만든다.
   • request를 보낼 준비를 브라우저에게 시키는 과정
   • 이것을 위해서 필요한 method를 갖춘 object가 필요함
2. callback 함수를 만든다.
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
3. Open a request
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
4. send the request

AXIOS

✏️ AXIOS란?

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

✏️ AXIOS 구조

axios({
 	method: 'post',
 	url: 'https://localhost:3000/user',
 	data: {
   	userName: 'Cocoon',
   	userId: 'co1234'
	}
}).then((response) => console.log(response));

✏️ AXIOS 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 HTTP API 사용
• Promise API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON형태로 자동 변경

✏️ AXIOS 장점

• Response Timeout 처리 방법이 존재
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 브라우저 호환성이 뛰어남

✏️ AXIOS 단점

• 사용을 위해 모듈 설치 필요

참고

• 동기와 비동기 - 1
• 동기와 비동기 - 2
• AJAX - 1
• AJAX - 2
• AJAX - 3
• AJAX - 4
• AXIOS - 1
• AXIOS - 2
• AXIOS - 3