JS는 어떤언어일까?
싱글 스레드 기반의 비동기, 논블로킹 언어
싱글 스레드방식은 한번에 하나의 작업만 수행할 수 있다.
따라서 처리하는데 시간이 걸리는 작업의 경우 블로킹이 발생한다.
하지만 JS는 비동기 처리를 통해 논블로킹 되게 한다.
즉, 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행가능하게 한다.
✅ 동기
요청을 보낸 후 결과물을 받을때까지 기다린 후 다음 동작이 이루어짐
✅ 비동기
요청을 본내 후 결과를 받지 않아도 다음 동작이 이루어짐
✅ 블로킹
실행 중인 작업이 완료될 때까지 다음 작업을 기다리는 방식
✅ 논블로킹
실행 중인 작업의 완료를 기다리지 않고 다음 작업을 실행하는 방식
동기, 비동기는 현재 작업과 다음 작업이 순서대로 실행 되는가의 차이라면,
블로킹, 논블로킹은 현재 작업이 다른 작업의 실행을 차단 하는가의 차이다.
반드시 동기라고 해서 블로킹, 비동기라고 해서 논블로킹은 아니지만,
JS는 콜백함수, Promise, async/await, 이벤트루프를 통해
(비동기 + 논블로킹)을 기본적으로 채택한다.
fetch, ajax
fetch,ajax모두 비동기 통신(API 요청)을 위한 JS 내장 기능이다
AJAX
-
JS 내장 기능
-
웹 페이지의 전체 리로드 없이, 서버와 비동기적으로 데이터를 교환할 수 있는 기술
-
XMLHttpRequest객체 사용 -
Promise기반이 아니기 때문에 복잡한 비동기 작업을 관리하기 어려울 수 있음 -
보통
Jquery함께 사용
fetch
-
JS 내장 기능
-
Promise기반 -
구형 브라우저에서는 지원 안될수도 있다.
-
Promise를 사용하여 비동기 요청을 더 간결하게 작성할 수 있음
➕ Axios
React에서 주로 사용하는HTTP요청을 위한 외부 라이브러리
-
Promise기반의 API를 제공 -
자동
JSON변환 -JSON parsing이나JSON stringify를 직접 할 필요없음 -
요청 취소 - 진행 중인 요청을 취소할 수 있는 기능을 제공
-
인터셉터 - 요청과 응답을 가로채서 추가 처리를 할 수 있음
-
외부 라이브러리이기 때문에 내장
fetch에 비해서 크기가 큰 편
