[JavaScript] ajax 및 axios를 사용한 비동기 통신하기

1. 왜 필요한가?

자바스크립트에서 비동기 통신을 통해 서버와 브라우저가 새로고침을 하지 않고도 데이터를 통신하면서 부드럽게 동작하면 웹을 만들 수 있으며 이로 인해 사용자 경험인 UX가 증가하는 효과를 볼 수 있다.

※ 사용자 경험 (UX)란?
사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. 단순히 기능이나 절차상의 만족뿐 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치있는 경험이다.

2. 과정

비동기 통신 방법은 2가지 방법이 존재하며 ajax 및 axios를 사용하는 것이다.

3. 결과

만약 jQuery를 활용할 경우 jQuery라이브러리 안에 ajax를 사용하면 되고 사용하지 않는다면 axios를 활용하는 것을 추천한다.

1. ajax

ajax를 사용하기 위해서는 jQuery라이브러리를 사용해야 하며 해당 라이브러리를 설치하는 방법은 다음의 코드를 추가한다

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

최신 버전의 jQuery라이브러리를 설치하고 싶으면 아래의 링크에서 확인할 수 있다.
https://releases.jquery.com/

ajax를 사용하는 방법은 다음과 같다.

$.ajax({
  url: 'http://example.com/api/data', 
  method: 'GET',
  data: { param1: 'value1', param2: 'value2' },
  success: function(response) { 
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

ajax함수에서 받는 인자 값에 대한 설명은 다음과 같다.

• url: api 주소
• method: 통신 방식
• data: json형태로 api에 넘겨줄 인자 값.
• success: 통신이 성공할 경우 실행할 콜백 함수
• error: 통신이 실패할 경우 실행할 콜백함수

2. axios

axios는 ajax와 비교적으로 사용법이 간단하며 React와 Vue.js 등 다양한 프론트엔드 라이브러리에서 사용이 가능한 장점이 존재한다. axios를 사용하기 위해서 다음의 코드를 추가하여 axios라이브러리를 설치한다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

React와 Vue.js 등 npm을 지원하는 프론트엔드 라이브러리에서 사용하고 싶으면 다음의 명령어를 이용하여 해당 프로젝트에 설치가 가능하다.

• npm

npm install axios

• yarn

yarn add axios

최신 버전의 axios를 설치하고 싶거나 더 자세한 설명은 아래 링크에서 확인할 수 있다.
https://axios-http.com/kr/

axios를 사용하는 방법은 다음과 같다.

axios({
  url: "http://example.com/api/data",
  method: "get",
  data: { param1: "value1", param2: "value2" },
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

axios함수에서 받는 인자 값에 대한 설명은 다음과 같다.

• url: api 주소
• method: 통신 방식
• data: json형태로 api에 넘겨줄 인자 값
• then: 통신이 성공할 경우 실행할 콜백 함수
• catch: 통신이 실패할 경우 실행할 콜백함수

axios를 다르게 사용하는 방법은 다음과 같다.

• get

axios.get('http://example.com/api/data', {
  params: { param1: 'value1', param2: 'value2' }
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});

• post

axios.post('http://example.com/api/data', {
  params: { param1: 'value1', param2: 'value2' }
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});