20251118 Axios는 뭘까?

저번 주에 유레카에서 Axios를 공부하고 사용해보았다. 그리고 이번 주에는 공부했던 내용을 바탕으로 웹페이지를 만들어보는 실습을 진행하는데 Axios를 사용했다. 그래서 Axios에 대해 좀 더 깊이 있게 이해해보고 글로 써보려고 한다.

 

Axios는 뭘까?

 

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

시작하기 | Axios Docs

Axios는 Promise API를 활용하는 HTTP 비동기 통신 자바스크립트 라이브러리이다.

프론트엔드에서 백엔드 API 서버와 데이터를 주고받을 때 주로 사용된다.

 

특징

• 브라우저를 위해 XMLHttpRequest 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

사용법

1. 설치

npm install axios

2. Axios 문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

• url: 서버 주소
• method: 요청방식 (get이 디폴트)
• data: 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터

3. HTTP Methods

GET

get 메서드에는 2가지 상황이 크게 존재한다.

• 단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
• 파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

.출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

POST

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.

출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신(수정)하는 목적으로 사용된다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.

출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

Delete

delete 메서드에는 일반적으로 body가 비어있다.

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

하지만 query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는

다음과 같이 두 번째 인자에 data를 추가해줄 수 있다고 한다.

출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

 

요약

자바스크립트에 fetch API가 있지만 axios 라이브러리를 설치해서 사용하면 fetch 보다 많은 기능 지원과 문법이 조금이나마 간소화된다는 장점이 있다. 따라서, 간단하게 사용할 때는 fetch를 쓰고 이외의 확장성을 염두해봤을 때는 axios를 쓰면 좋다고 볼 수 있다.

 

실습

수업 때 axios 실습을 하면서 영국의 뉴스 기사들을 api로 가져와봤다.  

axios.get로 newsapi 홈페이지에서 apiKey를 발급받고 기사를 가져왔다.

 

느낀 점

전에는 fetch를 이용해서 서버-클라이언트 통신을 해본 적 있었는데 또 axios를 이용해 실습을 해보니 또 다른 재미가 있었다.

내가 해야될 일을 크게 많지 않았던 것 같아서 좀 더 깊이 있게 이해하는 게 중요할 것 같다.

fetch보다 좋은 점이 많은 것 같아 더 써봐야할 것 같다.

 

참고 자료

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

시작하기 | Axios Docs

2. https://ldd6cr-adness.tistory.com/306

axios는 뭘까

3. https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

📚 AXIOS 설치 & 특징 & 문법 💯 정리