웹 개발을 한 번 이상해본 사람이라면 익숙할 axios에 대해서 한 번 정리해보고자 합니다. 더하여 헤커톤에서 저를 당황하게 했던 .env 설정까지 알아봅시다.

Axios란?

Axios는 Promise API 기반 HTTP 비동기 클라이언트 라이브러리입니다.

클라이언트는 XMLHttpRequests 또는 Node.js의 http api를 사용합니다.

쉽게 말해서 백엔드랑 프론트엔드 통신을 위해서 사용하는 라이브러리입니다.

특징

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

위 내용은 공홈에서 제시한 Axios의 특징입니다. 그전에 한 번 주요 단어를 한 번 정리해봅시다.

1. XMLHttpRequests (XHR)

   JavaScript를 통해 서버와 상호작용할 수 있도록 해주는 브라우저 내장 객체입니다. AJAX(Asynchronous Javascript and XML) 기술의 핵심 구성 요소로 XML 뿐만 아니라 다양한 종류의 데이터를 가져올 수 있습니다.

2. Promise API

   Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체입니다. 이를 통해 비동기 코드를 작성할 때 발생하는 콜백 지옥(Callback Hell) 문제를 해결하고, 비동기 작업의 성공(fulfilled) 또는 실패(rejected) 상태를 더 직관적으로 처리할 수 있습니다.

   

   Promise는 **async/await**의 기반이 됩니다. async/await는 Promise를 더 간결하게 다룰 수 있도록 도와줍니다.

기본적인 method는 다음과 같습니다

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])