Axios란?

Axios란?

• Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리 입니다.
• (백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.)

1. Axois의 특징

• Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.
• Promise(ES6) API를 사용
• 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환

2. Axios 사용법

• Axios 다운로드
• yarn add axios & npm i axios // 생성한 프로젝트 상단에 import로 추가 import axios from "axios"
• HTTP Methods (GET,POST,DELETE,PUT)
  • 클아이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단
  • 이 Method중에서 Axios로 통신하면서 가장 많이 사용되는 메소드들을 정리해보았습니다

  // 1. GET
  // GET: 입력한 url이 존재하는 자원에 요청을 보낸다.
  axios.get(url,[,config])
  
  // GET 방식으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 보면 이러한 형태가 나옴
  www.server.com/login?id=Jung&pw=12345  // 실제로 없는 서버이고 예로 추가한 사이트
  
  // GET방식은 서버에서 어떤 데이터를 가져와서 보여줄것인가를 정하는 용도로 쓴다.
  // 주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것이고 GET 메서드는 값이나 상태등을 직접 바꿀수 없다.
  
  // 2.POST
  // POST: 새로운 리소스를 생성(create)할 때 가용한다
  
  axios.post("url주소",{
    data객체
  },[,config])
  
  // POST 메서드의 두 번째  인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
  // 로그인, 회원가입 등  사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
  // Post를 사용하면 주소창에 쿼리스트링이 남지 않고 GET보다 안전하다.
  
  // 3.Delete
  // REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 삭제하는 목적으로 사용된다.
  
  axios.delete(url,[,config]);
  
  // Delete메서드는 HTML Form태그에서 기본적으로 지원되는 HTTP 메서드가 아니다.
  // Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
  
  // 4.PUT
  // REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 갱신하는 목적으로 사용된다.
  
  axios.put(url[, data[, config]])
  
  // PUT 메서드는 HTML Form 태그에 기본적으로 지원하는 HTTP 메서드는 아니다.
  // PUT 메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 한다.
  

3. 백엔드 없이 서버 통신하는 법!

• 실제 API를 가지고 서버 통신을 해보고 싶으면 백엔드 개발자와 같이 하는 것이 정석이지만, 백엔드 개발자가 없어도 다양한 방법으로 테스트 해볼 수 있습니다.
• Mock서버를 사용하는 방법
• 다양한 온라인 Fake서버를 사용하는 방법

-출처- https://koras02.tistory.com/48#--%25--Delete%25--