axios

팀원의 커밋을 내려받고 'npm start'를 한 순간..어라? 'axios'를 찾을 수 없다는 오류가 발생했다. axios가 뭔데?

 

axios 란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

https://axios-http.com/kr/docs/intro

 

시작하기 | Axios Docs

 

 

 

http 클라이언트?

 

아파치에서 제공하는 HTTP 컴포넌트. Client Side 동작을 구현한 라이브러리로, Java를 통해 편리하고 쉽게 HTTP 개발이 가능하다.

https://m.blog.naver.com/zzang9ha/222031902761

[Java/자바] - Apache HTTP 컴포넌트(HttpClient)를 이용한 HTTP 프로토콜 사용

 

 

XMLHttpRequests?

 

XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.

XMLHttpRequest는 AJAX 프로그래밍에 많이 사용됩니다.

 

 

왜 리액트에서 axios를 사용하는가 

 

HTTP 클라이언트가 내장되어있는 AngularJS와 다르게 리액트는 내장 클래스가 존재하지 않는다. 따라서 AJAX를 사용하기 위해서는 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web API | MDN

 

 

결론

즉, axios는 서버 사이드에서 node.js의 http 모듈을 이용하고, 클라이언트에서는 XMLHttpRequests를 사용하여 비동기 통신(AJAX)을 구현할 수 있도록 도와주는 라이브러리 이다. React는 AngularJS와 달리 HTTP 클라이언트가 내장되어있지 않기 때문에 axios와 같은 외부 라이브러리를 이용해 서버와 통신할 수 있다.