비동기통신(Ajax and Axios)

비동기통신(Ajax and Axios)

 

 

컴퓨터에서 사용되는 통신에는 동기, 비동기가 있다. 그 중 비동기는 영어로 Asynchronous라고 하고, 비동기 통신으로 잘 알려진 'Ajax'의 첫 머리글자로 알려져있다. 

 

Ajax(Asynchronous javascript and xml: 비동기 자바스크립트와 xml)은 2005년 2월 Adaptive Path의 제시 제임스 가렛(Jesse James Garrett)이 이 명칭을 언급하게 되면서 널리 퍼지게 되었다. 

Ajax의 특징은 사용자 클릭 후 페이지 전체를 새로고침하지 않고 필요한 부분만 바로 수정하는 형태(동적으로 부분 갱신)로 빠른 응답을 제공한다. Ajax는 한 가지 기술을 의미하지 않고, 자바스크립트, XML, DOM, CSS등 다양한 기술이 결합된 것이다. 또한 서버(페이지 저장소)와 웹 브라우저 간 데이터 교환과 처리가 비동기적이다. 즉, 사용자 이벤트 요청에 따라 전체 웹 페이지를 다운로드하지 않고, 필요한 부분만 백그라운드 상태에서 처리되어 클라이언트 측은 다른 작업을 계속 할 수 있게 된다. 

하지만 Ajax를 사용할 수 있는 브라우저와 Http클라이언트의 기능이 한정되어있고, 페이지 이동없는 통신으로 인한 보안상의 문제점이 있고, 스크립트로 작성되어 디버깅이 용이하지 않을 뿐더러 요청을 남발하면 역으로 서버 부하가 늘수 있다. 또한 동일-출처 정책으로 인해 다른 도메인과의 통신이 불가능하다. 

Ajax를 지원하는 웹 브라우저로는 마이크로소프트 인터넷 익스플로어 5.0이상, 크롬 등이 있고, 지원하지 않는 웹 브라우저로는 마이크로소프트 인터넷 익스플로어 4.0이하, 1997년 이전 브라우저 등이 있다.

 

Ajax의 사용방법에는 다음과 같이 3가지 방법이 있다. 

1. jQuery 라이브러리($.ajax())

2. axios 라이브러리(axios.get())

3. JS(자바스크립트)(Fetch())

 

이 중에서 2번 axios라이브러리를 이용해 다양한 비동기 웹프로그램을 만들고자 한다. 

axios가 무엇인가 하면 브라우저와 node.js를 위한 Http 비동기 통신 라이브러리로 Promise 기반으로 만들어져서 데이터를 다루기에 편하다. 

*Promise 기반은 자바스크립트 비동기 처리(특정 코드의 실행이 완료될 때까지 기다리지 않고 곧바로 다음 코드를 수행)에 사용되는 객체이다. 

axios의 장점으로 response timeout처리 방법이 있고, 앞서 말했듯이 Promise기반으로 만들어져서 데이터를 다루기에 편하고, 브라우저 호환이 뛰어나다. 단점이라면 모듈을 설치해야 한다는 단점이 있다.

 

나도 실제로 axios를 써본 적이 있다. 앞에서 언급한 단점으로 '설치해야 한다'고 하는데 STS에서 사용한다면 데이터를 받아올 jsp페이지에다가 axios npm을 붙여넣기만 하면 설치 없이 사용할 수 있다.

axios npm:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

(STS는 자바스크립트를 편집하는데 유용하다)

axios를 자바스크립트 상에서 사용할 때 다음과 같이 사용한다.

   function io(insert){//insert를 입력으로 받음
    axios.get('InputOutput',{//get, post중 택1,InputOutput은 url
        params:{'input':insert}//입력 데이터
    }).then(response =>{//입력된 데이터에 대한 출력
        const output=response.data;//출력 데이터
    })
}

url은 페이지 주소가 들어가나 웹 개발 때는 서블릿의 주소를 입력하여 사용한다.

 

앞으로 비동기 통신인 ajax를 이용하여 다양한 웹 프로그래밍을 할 예정이다.