Axios API 사용하기
Axios란?
- Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리다. 쉽게 말해 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것이다. 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 한다. 즉, 코드 작성이 매우 복잡해진다. 따라서 비동기 통신을 쉽게 해주는 Axios나 Ajax 같은 것이 자주 사용된다.
- Axios는 Promise를 기반으로 만들어진 라이브러리다.
- 자바스크립트에 내장되어 있는 fetch와는 달리 간단한 설치 과정이 필요하다.
- fetch보다 브라우저 호환성이 뛰어나다.
API
- API는 Application Programming Interface의 줄임말로 다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말한다.
HTTP
- URL을 통해 누군가에게 해당 정보를 요청하면, 요청한 정보를 누군가가 나에게 다시 전달해준다. 이러한 규칙을 HTTP라고 부른다.
- 브라우저 주소창에 URL을 입력하면 그 데이터를 요청하고 보여주는 것은 브라우저의 역할이다. 그리고 요청 받은 데이터를 가져오는 것은 웹 서버의 역할이며 HTTP는 바로 그 클라이언트와 서버 간의 규칙이다. 이때, 클라이언트의 요청을 HTTP Request, 서버의 응답을 HTTP Response라고 한다.
HTTP Methods
HTTP 통신을 위해 아래와 같은 Method 제공
Axios와 CRUD
- C:Create(생성) - POST
- R : Read(조회) - GET
- U : Update(수정) - PUT
- D : Delete(삭제 - DELETE
Axios 사용법
- index.html에 아래 두 스크립트를 추가해주면 axios 라이브러리를 손쉽게 사용할 수 있다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
POST : 새로운 자원을 생성할 때 사용
axios.post(url, data 객체)
GET : 자원을 요청할 때 사용
axios.get(url)
PUT : 자원을 갱신할 때 사용
axios.put(url, data 객체)
DELETE : 자원을 삭제할 때 사용
axios.delete(url)
