[Front CS] Ajax, Axios, Fetch에 대한 정리

안녕하세요 미어캣입니다.

 

요즘 일/공부 의 무한 굴레에 있어 바쁘지만 알찬 하루 하루를 보내고 있습니다.

 

코드적인 스킬도 중요하지만 누군가에게 설명하고 할 때에 CS 지식도 굉장히 중요하다고 생각해서 

 

틈틈히 시간나면 기록하려고 합니다. 

 

---

 

 

오늘은 HTTP API 통신을 사용할 때 주로 쓰이는 Ajax, Axios, Fetch에 대한 정리를 하려고합니다.

 

Ajax Asynchronous JavaScript And XML

 : Ajax는 JavaScript에서 비동기 HTTP 통신이 가능한 기술

 

 

비동기 HTTP 통신이란 :
response와 request를 비동기 식으로 다를 수 있다

동기 : 순차적으로 작업을 실행하고, 작업이 완료되기를 기다렸다 다음 작업을 실행, 작업이 끝나기를 기다리는 동안 다른 작업은 대기

비동기 : 비동기 방식은 한 작업의 완료를 기다리지 않고 다음 작업을 바로 실행 비동기 작업은 주로 콜백(callback), 프로미스(promise), 혹은 async/await를 사용하여 처리

 

그러면 저는 callback, promise, async/await가 궁금해집니다.

 

callback :
콜백은 비동기 작업이 완료되었을 때 실행되는 함수를 다른 함수에 전달하여 사용하는 방식 콜백 함수는 주로 비동기 작업이 완료됐을 때 호출되며, 이를 통해 비동기 작업의 결과를 처리

promise :
프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 프로미스는 비동기 작업이 완료되면 resolve(성공) 콜백 또는 reject(실패) 콜백 중 하나를 호출합니다. 이를 통해 비동기 작업의 결과를 처리

async/await :
async/await는 ES2017(ES8)에서 도입된 비동기 처리 방식으로, 프로미스를 더 쉽게 사용할 수 있게 해줍니다. async 함수 내에서 await 키워드를 사용하여 프로미스의 완료를 기다리고, 이를 통해 동기적으로 비동기 코드를 작성

 

 

Axios Promise based HTTP client for the browser and node.js

 :  node.js와 브라우저를 위한 HTTP통신 라이브러리
 비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽습니다.

 

fetch ES6부터 JavaScript의 내장 라이브러리

 : promise기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 내장 라이브러리라는 장점으로 인해 상당히 편리

 

ES6는 ECMAScript 2015의 줄임말
ES6는 ECMAScript 언어의 6번째 버전이며,  자바스크립트에 많은 새로운 기능과 문법을 도입하여
언어의 표현력과 기능을 크게 향상시켰습니다.

화살표 함수(Arrow Functions):
함수를 더 간결하게 정의할 수 있는 화살표 함수 문법

let과 const 키워드:
블록 스코프를 가지는 변수를 선언할 수 있는 let과 상수를 선언할 수 있는 const 키워드가 추가

* let: 블록 스코프를 가지는 변수를 선언할 때 사용(블록 스코프란 변수가 선언된 블록 내에서만 유효)
* const: 상수를 선언할 때 사용됩니다. 한 번 할당된 값을 변경할 수 없

템플릿 리터럴(Template Literals):
문자열을 보다 쉽게 조합할 수 있는 템플릿 리터럴이 도입

* 백틱(`)을 사용하여 문자열을 정의
* 변수나 표현식을 ${}로 감싸서 문자열에 삽입

확장된 객체 리터럴(Enhanced Object Literals):
객체 리터럴에서 메서드 축약, 계산된 속성 이름 등의 기능이 추가

구조 분해 할당(Destructuring Assignment):
배열이나 객체에서 필요한 값들을 추출하여 변수에 할당할 수 있는 구조 분해 할당 기능이 추가

클래스(Class):
클래스 문법이 추가되어 객체지향 프로그래밍을 더 쉽게

Promise:
비동기 처리를 위한 Promise 객체가 추가

모듈(Module):
모듈화를 지원하기 위한 import와 export 키워드가 추가

확장 연산자(Spread Operator)와 나머지 연산자(Rest Operator):
배열이나 객체를 확장하거나 축소하는데 사용되는 연산자들이 추가


* 확장 연산자(...)는 배열이나 객체를 확장하거나 함수의 인수를 전달할 때 사용
* 나머지 연산자(...)는 함수의 매개변수에서 남은 인수들을 배열로 받아올 때 사용

 

Axios vs Fetch 

 

Axios : 

• response timeout 처리 방법이 있다
• promise 기반으로 다루기가 쉽다
• 크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어나다.
• 모듈 설치를 해줘야한다.

 

Fetch : 

• 내장 라이브러리이기에 별도의 import를 해줄 필요가 없다.
• promise 기반으로 다루기가 쉽다.
• 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.
• internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다.
• 기능이 부족하다.

 

가볍게 Ajax, Axios, Fetch를 보다가 꼬꼬무를 하게되었지만 상당히 유익한 정보였던 것 같습니다.

 

감사합니다.

 

---

참고 : 

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch