내가 처음 Axios를 선배에게서 듣게 되었을때 가장 처음 직관적으로 든 생각이 있었다.
axios랑 fetch랑 차이가 없는데 axios가 뭐가 편하다는걸까?
그런 의문점을 가진 채로 그냥 별 생각 없이 지내왔는데 상세히 알아보고 싶어져서 의문점들을 해결해나가는 방향으로 문서를 작성해보고자 합니다.
우선 무엇보다도 가장 두드러지게 다른 점이 있습니다.
Fetch API는 최신 브라우저에는 이미 탑재되어 있는 인터페이스입니다. 그래서 따로 설치할 필요가 없습니다.
그러나 Axios는 라이브러리입니다. 따로 설치하지 않으면 사용이 불가합니다. npm과 같은 패키지 매니저를 이용해 다운받아 사용하면 되고 따라서 node.js환경에서도 실행가능합니다(브라우저 필수X)
예시를 들어보겠습니다.
제가 영화 소개 페이지를 만드는 중이라고 가정해보겠습니다.
그럼 영화들에 대한 데이터를 가져와야할 때가 분명 생깁니다. 포스터 이미지나, 제목, 등등을 최초에 다 들고 들어오는건 로딩을 느리게 만들기 때문에 하지 않는 행위입니다.
그렇다면 서버에 데이터들을 저장해두고 제가 필요할 때 해당 데이터들을 필요한 것들만 들고 와서 사용하게끔 만드는게 좋다고 판단되었을때, 해당 리소스들을 쉽게 들고올 수 있으면 좋을 것 같습니다.
이를 위한 것이 Fetch API & Axios library입니다.
그럼 Fetch API부터 차례대로 어떤 작동원리가 존재하고, 어떤 식으로 사용하는지 적어보겠습니다.
우선 이 페이지를 공부하려면 HTTP가 정확히 무엇이고, 어떤 원리를 가지고 있는지 같은 기초적인 지식을 알고 있으면 이해가 수월하다는 생각이 듭니다. 우선 HTTP가 무엇인지 알고 오시는 것을 추천드립니다.