동기(Synchronous)

• 요청, 응답 동일한 자리에서 동시에 가능
  • 요청의 대한 응답 주어지기 전에 아무것도 못함
  • ex) 계좌이체
• 설계 매우 간단하다

비동기(Asynchronous)

• 요청, 응답 동일한 자리 아니여도 가능
  • 결과 주어지는데 시간 걸려도 계속해서 다른 작업 가능
    • ex) 현재 요청한 페이지가 새로 고침도 아니고 전환도 아닌 상태에서 해당하는 js에서 함수가 결과값 받아오는 것
  • 자원을 효율적으로 관리할 수 있다
  • 블록 : 다른일 을 하지 않는 상태
  • 논블록 : 다른 일 하고 있는 상태
  • ex)
    • 하나의 객체가 서로 다른 작업을 하는 경우
    • 사용자의 event에 따라 페이지 전체가 아닌 일부만 데이터 변화시킴
• 동기에 비해 설계 어려움
• 참고 : https://private.tistory.com/24

Ajax

• (JS + XML) 이용한 비동기적 정보교환 기법
  • XML : XMLHttpRequest 객체를 사용하는 것
• 서버와 통신 위해 사용 : 간단하게 JS 이용해 서버에 데이터 요청하는 것
  참고 : https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

포맷(데이터 전송 형식) 종류

• XML(eXtensible Markup Language) : 다목적 마크업 언어
• JSON(JavaScript Object Notation)
  • 일반적으로 서버->클라이언트로 데이터 보낼 때 사용
  • client가 사용하는 언어에 관계 없이 통일된 데이터 주고 받을 수 있게끔 한다
  • JS 객체를 만드는 표현식, 경량의 Data 교환 등
• HTML(Hyper Text Markup Language) : 웹사이트 모습을 기술하기 위한 마크업 언어
• TEXT
• CSV

Lib

• Ajax 구현하는 lib 3가지
  • Axios, fetch, JQuery

Axios

• 단순하게 백엔드랑 프론트엔드 통신을 쉽게하기 위한 라이브러리라 생각하면 될 듯, HTTP 비동기 통신 라이브러리, Ajax와 더불어 사용
• js 문법 사용
• js는 fetch api가 있지만 프레임워크에서 ajax를 구현할 땐 axios를 쓰는 편(Axios, fetch 둘 다 Ajax 구현하는 api라 생각하면 될 듯)
  • 뷰에서 권고하는 HTTP 통신 라이브러리
  • 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양
• 참고 1 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9
• 참고 2 : https://joshua-dev-story.blogspot.com/2020/01/react-spring.html

fetch

• 웹 통신 기능 제공 내장 lib 중에 하나
• js 문법 사용
• HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공
• 참고 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

JQuery

• JS 간편하게 사용 위해 단순화시킨 오픈 소스 기반에 JS lib
• Ajax 개발 쉽게 하기 위해 디자인
• HTML의 클라이언트 사이드 조작 단순화 시킴
  • 클라이언트 사이드 : 서버<->클라이언트에서 클라이언트 쪽

Axios, fetch VS JQuery

• Axios, fetch의 경우는 JQuery와 다르게 타입스크립트 사용, 요청 취소 가능
  • 타입 스크립트 : 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어
• 통신 기능만 담당해 가볍다
• 하지만 낮은 브라우저에서 돌아가지 않을 가능성 존재