가장 큰 차이점?
내가 처음 Axios를 선배에게서 듣게 되었을때 가장 처음 직관적으로 든 생각이 있었다.
axios랑 fetch랑 차이가 없는데 axios가 뭐가 편하다는걸까?
그런 의문점을 가진 채로 그냥 별 생각 없이 지내왔는데 상세히 알아보고 싶어져서 의문점들을 해결해나가는 방향으로 문서를 작성해보고자 합니다.
우선 무엇보다도 가장 두드러지게 다른 점이 있습니다.
Fetch API는 최신 브라우저에는 이미 탑재되어 있는 인터페이스입니다. 그래서 따로 설치할 필요가 없습니다.
그러나 Axios는 라이브러리입니다. 따로 설치하지 않으면 사용이 불가합니다. npm과 같은 패키지 매니저를 이용해 다운받아 사용하면 되고 따라서 node.js환경에서도 실행가능합니다(브라우저 필수X)
둘의 공통점은?
예시를 들어보겠습니다.
제가 영화 소개 페이지를 만드는 중이라고 가정해보겠습니다.
그럼 영화들에 대한 데이터를 가져와야할 때가 분명 생깁니다. 포스터 이미지나, 제목, 등등을 최초에 다 들고 들어오는건 로딩을 느리게 만들기 때문에 하지 않는 행위입니다.
그렇다면 서버에 데이터들을 저장해두고 제가 필요할 때 해당 데이터들을 필요한 것들만 들고 와서 사용하게끔 만드는게 좋다고 판단되었을때, 해당 리소스들을 쉽게 들고올 수 있으면 좋을 것 같습니다.
이를 위한 것이 Fetch API & Axios library입니다.
그럼 Fetch API부터 차례대로 어떤 작동원리가 존재하고, 어떤 식으로 사용하는지 적어보겠습니다.
Fetch API
우선 이 페이지를 공부하려면 HTTP가 정확히 무엇이고, 어떤 원리를 가지고 있는지 같은 기초적인 지식을 알고 있으면 이해가 수월하다는 생각이 듭니다. 우선 HTTP가 무엇인지 알고 오시는 것을 추천드립니다.
아래 옵셔널 인자를 줄 때와 같이 좀 더 고급 옵션들(CORS…)을 확장 개념으로서 적용 가능합니다.
자바스크립트 함수인가 싶었지만, 문서에는 web api로 분류되어 있음을 알 수 있습니다. 자바스크립트 내장 라이브러리로 느껴지는 이유는, 모던 브라우저에 탑재된 기능을 웹 조작을 다루는 언어인 자바스크립트에서 기본적으로 이용가능하도록 만들었기 때문입니다.
원래 Fetch API는 웹 API로 속해있어서 웹이 아닌 다른 환경에서는 사용할 수 없었는데, Node.js 18버전이후로는 fetch를 사용할 수 있게 되었습니다.
Fetch API는 위에 설명했듯이 모던 브라우저에 내장되어 있는 기능입니다.
따라서 npm install 같은 행위는 하지 않아도 됩니다.
우리가 브라우저에서 서버에 요청을 보내고, 응답을 받아올 때의 요소들을 자바스크립트에서 쉽게 접근하고 조작할 수 있게끔 도와주는 API입니다.
fetch method의 첫번째 인자는 필수 옵션으로, 데이터를 요청할 url를 적어줘야합니다.
두 번째 인자는 옵셔널로, init 객체를 작성해주면 됩니다.
보통은 get 요청을 위주로 보내게 될텐데, default method로 get이 설정되어 있어서, 두번째 인자는 자주 사용하지는 않는 것 같습니다.
// 첫 번째 인자만 적어준다고 가정하고 적어보겠습니다.
async const logJsonData = () => {
// 해당 url를 통해 챔피언들의 정보를 가져온다고 가정해보겠습니다.
// response는 API의 RESPONSE 객체로 반환됩니다.
// RESPONSE 객체 : https://developer.mozilla.org/ko/docs/Web/API/Response
const response = await fetch('http://leagueoflegend.com');
const jsonData = await response.json();
console.log(jsonData);
}
JavaScript
복사
우리가 윗 코드를 보고 무엇을 짐작해볼 수 있을까요?
자바스크립트는 객체지향언어입니다. 그렇기에 우리는 함수만을 보고도 내부가 어떤 식으로 동작하는 지 짐작해볼 수 있어야합니다.
우선,
async - await 키워드를 사용했습니다.
이는 비동기 방식으로 fetch함수가 동작함을 짐작해볼 수 있습니다.
바로 떠올리지 못하셨다면, 아래 링크로 잠시 Promise 객체에 대해 공부해보시기를 추천드립니다.
두 번째로, fetch함수가 응답 객체를 받아오긴 하지만, JSON객체로 들고 오진 않습니다.
때문에 response.json()이라는 메소드를 이용해 다시 한 번 응답객체를 json형태로 파싱하게 됩니다.
또한, json method 또한, await가 사용됩니다. 이는 json method도 또 다른 Promise객체를 반환함을 알 수 있습니다.
따라서 만약 jsonData 변수 내부의 어떤 특징 변수에 접근하려면 jsonData.something 처럼 작성해 한 번 더 데이터 내부로 들어가야할 것입니다.
// 옵셔널 인자를 주는 경우 : 아래와 같이 사용됩니다.
// POST 메서드 구현 예제
async function postData(url = "", data = {}) {
// 옵션 기본 값은 *로 강조
const response = await fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE 등
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
});
return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}
// postData 함수 사용
postData("https://example.com/answer", { answer: 42 }).then((data) => {
console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});
JavaScript
복사
Axios
HTTP 클라이언트 : HTTP 통신에서의 요청을 보내는 쪽
사실 공식문서를 봐도 단어의 정의를 정확히 이해했다고 하기는 어려운 것 같습니다.
다만 제가 느끼기엔 동형 == 형태가 동일하다
즉, 구조가 다르게 생겨보여도, 약간의 치환(or 움직임)을 가하면, 결국 같은 구조(형태)를 가지고 있을 때 동형이라고 받아들이면 될 것 같습니다.
즉 문맥을 파악해보자면, Node.js와 브라우저 모두를 위한 HTTP client library이고, 동일한 구조로 Node.js와 브라우저 환경에서 똑같이 실행가능하다는 말인 듯 합니다.
또한 Axios는 라이브러리입니다.
따라서 npm과 같은 패키지 매니저를 통해 설치를 하거나, CDN을 통해 이용해야합니다.
// npm
npm install axios
// yarn
yarn add axios
// bower
bower install axios
PowerShell
복사
// jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
HTML
복사
Axios 사용법
만약 라이브러리를 다운받으셨으면 다음과 같은 호출을 통해 사용할 수 있습니다.
import axios from "axios";
JavaScript
복사
두 가지 방식으로 요청을 할 수 있습니다.
1.
axios.<method>
// 함수 형태로 요청
async function getUser() {
try {
const response = await axios.get('/user?ID=1');
console.log(response);
}
catch(error) {
console.log(error);
}
}
// 그냥 요청
axios.get('/user?ID=1')
.then((response)=> {
// 성공한 경우
console.log(response);
})
.catch((error)=> {
// 에러인 경우
console.log(error);
})
.finally(() => {
// 성공/실패 여부 상관없이 항상 실행되는 부분
something...
});
// 그냥 요청 : 선택적 요청
axios.get('user', {
params: {
ID: 1
}
})
.then((response)=> {
// 성공한 경우
console.log(response);
})
.catch((error)=> {
// 에러인 경우
console.log(error);
})
.finally(() => {
// 성공/실패 여부 상관없이 항상 실행되는 부분
something...
});
JavaScript
복사
async - await 키워드를 사용하며,
then(), catch(), finally()를 사용하는 것으로 보아 Promise객체를 반환한다는 것을 알 수 있습니다.
다만, fetch함수와는 다른 점이 존재하는데,
axios를 사용하면, 응답으로 넘어오는 객체가 곧바로 JSON타입으로 넘어와 사용 가능합니다.
2.
axios(config)
axios({
method: 'get',
url: '/user?ID=1',
})
.then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error);
})
JavaScript
복사
url만 필수이며 나머지는 선택이라서 필요시에만 공식문서에서 확인을 해보시고 공부해보시기를 추천해드립니다.
그렇다면 왜 많은 사람들이 Axios를 사용할까?
저는 이따금씩 Axios가 제 주변 선후배에게서 고평가를 받는다고 생각합니다.
학생 수준에서 1초가 다른 경험을 주는 큰 규모의 프로젝트를 다루는 것도 아닌데, Fetch는 쓸 줄 모르고 Axios가 무조건 좋다고만 평가하기 때문입니다.
그렇다면 도대체 왜? Axios를 좋다고 평가하는 것일까요?
NodeJs가 18버전으로 업그레이드 됨으로써 Fetch API가 탑재됨에 따라 Fetch API는 웹 브라우저에서만 동작한다는 단점으로 까내릴 수 없어졌습니다.
제 생각에 몇 가지 이유가 있다면,
1.
Interceptor를 통한 처리 과정 중 요청,응답을 가로채는 기능이 Axios에서 제공된다는 점
2.
리소스를 get method를 통해 받아왔을 때, default로 JSON형식으로 데이터가 제공된다는 점
정도로 얘기해볼 수 있지 않나 싶습니다.
제가 영어로 작성된 문서들도 몇 개 읽어보면서 내린 결론은,
좀 고평가가 맞다라는 것입니다.
인터셉트 기능은 물론 기본 제공된다는 점에서 좋긴 하지만, 구현하는데 큰 어려움이 있는 건 아닙니다.
그리고 JSON형식으로 기본 제공된다는게 물론, 개발자 입장에선 .json()이라는 것을 쓰지 않는다는 점에서 장점을 갖겠지만, 그거 몇 줄 된다고 axios를 찬양하는건가 싶습니다.
퍼포먼스가 좋다는 글을 본 적도 없고, 오히려 느리다는 얘기도 종종 있습니다.
게다가 결국 기본 탑재 기능이 아닌만큼, 다운한다는 건 앱이 무거워진다는 소립니다.
게다가 자신보다 더 잘하는 시니어 분들과만 일한다면, 그분들은 아마 axios를 잘 알고 잘 사용할 수 있겠죠.
하지만 오히려 모르는 시니어 개발자분이 계실 수도 있고, 자신이 시니어 역할이라면, 분명 학생 수준에서는 axios를 모르는 개발자 지망생도 계실 겁니다.
그런 개발자에게 axios를 무작정 공부해오게끔 시키고, 어떤 프로젝트에 참여시킨다는 건, 제가 보기에 마냥 좋게 보이지는 않는 것 같습니다.
그러니 기본 자바스크립트 실력을 더 키우고, Fetch API를 먼저 공부하고 Axios를 나중에 배우시는게 더 좋지 않나 싶은 제 개인적인 생각입니다.
Link
•
Axios Docs