[CS] Axios 란 무엇일까?

프론트 코드에 백엔드 API를 연동할 때 사용하는 대표적인 라이브러리에는 axios가 있습니다

axios외에도 fetch가 있지만 오늘은 axios에 대해서 알아보도록 하겠습니다

 

axios 란

💡 브라우저 , Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

즉  axios는 GET, POST, PUT, DELETE 등  HTTP 메서드를 통해 프론트엔드와 백엔드 API와 쉽게 통신하도록 도와주는 라이브러리 라고 할 수 있습니다

Promise
💡비동기 로직 처리에 유용한 자바스크립트 객체

 

axios의 특징

• 운영환경에 따라서 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
• Primise API사용
• 요청과 응답 데이터의 변형
• HTTP요청 취소 및 요청과 응답을 JSON 형태로 자동 변환

---

axios 사용해보기

그럼 본격적으로 axios 사용 방법에 대해 알아보겠습니다

1. npm을 이용하여 axios를 설치합니다

npm i axios

 

2. 설치 후 axios를 사용할 파일에 적용 시켜줍니다 

import axios from 'axios'

 

3. axios에서 post방식으로 login 요청 코드

export default function Login() {
    const [email, setEmail] = useState('');
    const [pw, setPw] = useState('');
    
    const onClickConfirmButton = async() => {
    
      // 사용자가 입력한 이메일과 비밀번호를 객체로 저장
      const data={email,password:pw}
      try{
      	// 서버에 로그인 요청을 보냄
        const response = await axios.post('http://localhost:5000/users/login',data)
        
         // 요청이 성공적으로 처리되면 성공 메시지를 표시와 http 상태코드 200을 표시
        if(response.status===200){
          alert('로그인에 성공하셨습니다')
        }
      }catch(error){
      	  // 요청이 실패하면 에러 메시지를 표시
          alert('회원이 아닙니다')
      }
    }
   }

 

• axios.post 메서드를 사용하여 http://localhost:5000/users/login URL로 POST 요청을 보냅니다
• 이 요청은 data 객체를 포함하여 서버에 전달합니다