Library | Axios

블로그 이사 완료·2023년 1월 5일
WILWhat I learnedaxioshttp
0
post-thumbnail

신규 프로젝트를 진행하기 위해 서버와 데이터를 주고받기 위해 HTTP 통신을 해야하는법을 알아야 했다.
그 중 Axios를 통해 HTTP 통신하는 방법에 대해 알고 싶어서 찾아봤다.

📍 주요 HTTP 통신방법

왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자.

#1. Ajax

  • Ajax는 Asynchronous JavaScript And XML의 약자로, 말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다.
  • 순수 Ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만 JQuery를 통해 Ajax를 보다 쉽게 쓸 수 있기 때문에 주로 JQuery와 함께 쓰인다.
  • 그러나 Promise 기반이 아니고 JQuery를 사용하지 않으면 쉽게 구현하기 어렵다는 단점이 있다.

React에서 promise가 async, await과 사용될 때 그 장점을 생각해보면 Ajax는 매력적이지 않다.

#2. Fetch

Fetch는 ES6부터 자바스크립트의 내장 라이브러리로 들어왔다.

  • Promise기반으로 만들어졌다.
  • 내장 라이브러리이기 때문에 별도의 모듈 설치가 필요하지 않다.

코드 또한 단순하다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

브라우저 호환성이 떨어지고 response timeout 처리 방법이 없는 등 기능적인 부분이 상대적으로 부족하다.
그럼에도 내장 라이브러리인만큼 안정적이지 않은 프레임워크에선 유용하게 사용하기 좋다

#3. Axios

Axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리다.

Fetch처럼 Promise를 지원한다는 공통점이 있지만 Fetch와는 달리 브라우저 호환성이 좋고 편리하며 기능이 많다.
라이브러리 설치가 필요하다는 단점(...?)이 있지만 Fetch에 비해 기능상으로 더 디테일하다는 큰 장점이 있다.

그래서 React에서 HTTP 통신을 할 때엔 주로 Axios를 이용한다. promise기반에 호환성이 좋고 디테일한 기능들을 사용할 수 있기 때문이다.

📌 나 역시 새로 진행하는 프로젝트에서 Axios를 사용한다.

📍 Axios

#1. Axios란?

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

#1.1. 특징

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

#2. Axios 사용법

전반적으로 axios를 통해 서버와 소통하는 과정은 아래와 같이 두 단계로 이뤄진다.

  1. 서버에 요청을 보내고(request)
  2. 서버로부터 응답이 오면(response) 제대로 응답이 왔을 때와 못 왔을 때를 구분하여 처리

서버에 요청을 보냈을 때 응답이 오기까지 시간이 걸리므로 서버에 보내는 요청은 비동기 처리를 해주며, 그 이후에 응답을 바탕으로 처리하는 과정은 .then 이나 await를 이용한다.

전 게시물에서 설명한 HTTP 메소드 4가지를 주로 request로 사용한다.

  1. GET
  2. POST
  3. PUT
  4. DELETE

이 네 가지 메소드를 사용하기 위해서는 아래와 같이 함께 보내야 하는 데이터가 있다.

  1. 사용할 메소드
  2. url
  3. data (선택)
  4. params (선택)
axios({
    //request
    method: "get",
    url: "url",
    responseType: "type"
}).then(function (response) {
    // response Action
});

#2.1. Axios 설치

자신이 사용하는 패키지 매니저로 프로젝트에 추가하고 사용할 파일에서 불러온다.

npm i axios
import axios from 'axios'

#2.2. GET

입력한 url에 존재하는 자원에 요청을 한다.

axios.get(url,[,config])
  • 지정된 단순 데이터 요청을 수행하는 경우 ➡️ url만 파라미터로 넘긴다.
async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url');
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}
  • 사용자에 따라 다른 데이터를 불러오는 경우 ➡️ url과 함께 prams:{} 객체 리터럴도 파라미터로 넘긴다.
async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url',{
      params:{
        //url 뒤에 붙는 param id값
        id: 12345
      }
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

🤔 Get이 데이터를 받아오는 것이라고 했는데, 로그인을 구현할때 GET을 사용 한 경우에는?

www.example.com/login?id=userid&pw=userpw

웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.

✔ GET은 서버에서 어떤 데이터를 가져와서 보여주는 용도다.
✔ 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET은 값이나 상태 등을 바꿀 수 없다.

// example
import axios from 'axios';

axios.get('https://example.com/list').then((response)=>{
    console.log(response.data);
}).catch((Error)=>{
    console.log(Error);
})
[
  // example 
  { id: 1, pw: '1234', name: 'hello' },
  { id: 2, pw: '1234', name: 'hi' },
  { id: 3, pw: '1234', name: 'welcome' }
]

GET으로 요청해 JSON데이터로 받아온 걸 확인할 수 있다.

#2.3. POST

새로운 리소스를 생성(create)할 때 사용한다.

axios.post("url주소",{
    data객체
},[,config])

post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

🤔 Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하는가?

✔ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
✔ POST를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

async function postData() {
  try {
    //응답 성공 
    const response = await axios.post('url',{
      	//보내고자 하는 데이터 
        id: id,
        password: password
    }, { withCredentials: true, });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

#2.4. DELETE

Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

RestAPI 기반 프로그램에서 DB에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

axios.delete(URL,[,config]);

✔ 데이터베이스 내부의 데이터를 삭제하는 DELETE 메소드는 일반적으로 body가 비어있는 형태이지만, query나 params가 많아서 헤더에 많은 정보를 담기 어려운 상황에 한해서만 두번째 인자에 data를 추가한다.

  • 일반적인 delete
async function deleteData() {
  try {
    //응답 성공
    const response = await axios.delete('url주소');
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}
  • 헤더에 정보가 많이 포함된 경우
async function deleteData() {
  try {
    //응답 성공
    const response = await axios.delete('url주소',{
      //헤더에 포함된 정보들 
    	data:{
          post_id: 1,
      	  comment_id: 13,
      	  username: "foo"
        }
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

#2.5. PUT

PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

RestAPI 기반 프로그램에서 데이터베이스에 저장되어 있는 내용을 변경 및 갱신하는 목적으로 사용된다.

axios.put(url[, data[, config]])
  • GET ➡️ POSET 하는 과정을 거치기 때문에 POST메소드와 비슷한 형식이다.
async function putData() {
  try {
    //응답 성공 
    const response = await axios.put('url주소',{
      	//항목에 새롭게 넣을 데이터
        id: id,
        password: password
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}
profile
블로그 이사 완료
https://kyledev.tistory.com/
이전 포스트

API | RestAPI

다음 포스트

React | React Query

0개의 댓글