[ AJAX, Axios ]

carrotsman·2022년 4월 15일

프론트엔드

목록 보기

10/34

AJAX (Asynchronous JavaScript And XML)

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

AJAX란 주로 웹 서버(백엔드 소스)와 통신할때 사용하는 기법으로 브라우저 내장 XMLHttpRequest 객체를 통해 웹 서버와 비동기적 통신을 중개하는 것을 말한다. 비동기 처리에 관한 내용은 이전글에서 작성했으니 그거 보면된다. >> 동기/비동기 처리, callback/Promise/async & await
에이잭스, 아작스등으로 불리는데 뭐가 맞다 이런거 없으니 개인적으로 입에 착 감기는거 쓰자.

비동기 통신

이전 글을 읽기 귀찮은 당신에게 이어 달리기에 비유해 설명하자면 전 주자놈이 들어와야 내가 출발할 수 있듯 이전 코드가 완료되어야 다음 코드가 실행되는 구조띄는데, 이를 동기적 구조라 말한다. 그럼 비동기는 뭐겠나? 전 주자놈이 오던 말던 냅다 뛰어 먼저 들어온 순서대로 씻고 들어가는 구조다. 보통 프로그래밍 언어는 거의 대부분 동기적 특성을 띄는데 이는 전 작업이 오래걸릴 경우 행이 걸리거나 처리 응답이 늦게오는 등 성능 저하로 이어질 수 있는 다소 단순한 구조다. 이를 위해 비동기 개념이 나오게 되는데 요약하면 '언제든 시작해서 먼저 끝난 놈이 먼저 나가라' 이런 형태가 비동기 처리라고 보면 된다. 비동기 통신이란 이런 비동기적 특성을 지닌 웹 서버 요청 및 응답이라고 생각하면 쉽다.

AJAX 비동기에 대해 설명할 때 간혹 '웹 페이지를 리로드하지 않고 데이터를 불러오는 방식' 라고 설명하는 글들이 있는데, 이건 비동기에 대한 설명이 아니라 AJAX에 대한 설명이다. 일반 웹 서버와의 통신은 웹 브라우저의 주소창에 URI을 입력해 웹 서버의 컨텐츠에 접근하는 구조를 띄고 있다. 다만 이렇게 호출하면 페이지 전체가 리로드되기 때문에 페이지 깜빡임이 생긴다. 하지만 AJAX는 XMLHttpRequest객체를 통해 휍 서버에서 JSON, XML형태로 데이터만 받아 갱신이 가능하다. AJAX가 비동기적 통신을 지원하긴 하지만 AJAX에 대한 설명이지 '비동기기 떄문에 페이지를 리로드하지 않는구나' 는 아니라는 얘기다.

AJAX를 사용하는 이유

오덕 카페 게시판으로 AJAX를 사용하는 이유를 말해보겠다. 여러분은 미소녀 피규어를 모으는 오타쿠고 네이버에 미소녀 수집 카페가 있다 가정해보자. 그중에 열혈 카페회원 미카짱이라는 회원이 있다 치자. 미카짱이 올리는 게시글은 항상 고화질의 20장이 넘는 사진이 기재되고 200개의 댓글이 달리는 인기 글이다. 당신이 미카짱의 게시글을 눌렀다. URL로 해당 게시글 페이지로 이동할 것이다. 고화질 사진이라 로딩 시간은 오래걸렸지만 당신은 곧 그가 쓴 미소녀 피규어 리뷰에 흐뭇해하고 있다. 그러다 문득 다른 사람의 의견이 궁금해졌고 확인을 위해 댓글 확인 버튼을 눌렀다. 그때 페이지 전체가 다시 리로드된다면? 고화질 사진도 다시 렌더링되야 하고 댓글 데이터도 200개 이상이기 때문에 서버에서 처리하는 시간이 오래걸리게 된다. 댓글 데이터를 받아오기 위해 전체 페이지를 다시 렌더링하는 것은 서버나 클라이언트 모두 리소스 낭비에 비효율적인 프로세스다. 이게 AJAX가 필요한 이유라 말할 수 있다. AJAX를 사용하면 게시글 리로드없이 댓글 데이터만 불러올 수 있다. AJAX는 경량화된 웹 서버 통신을 통해 데이터와 요청들을 분리하여 처리속도를 높이는데 있다. 요청마다 페이지를 리로드하지 않아도 된다는 얘기다.

AJAX 사용

AJAX 통신을 지원하는 라이브러리는 대표적으로 Jquery와 Axios가 있다. 일단 Vanilla JS(순수 javascript)를 기준으로 설명해보겠다. 그 이전에 웹 브라우저와 웹 서버간의 규약 request와 response에 대해 간략히 알아보자.

Request/Response

request와 response는 말 그대로 요청과 응답을 말하는데, request는 클라이언트(웹 브라우저)에서 보내는 요청 데이터고 response는 웹 서버에서 보내는 응답 데이터다. 둘의 구조는 대충 헤더와 바디를 띄고 있는데 딥하게 들어가면 더 설명할 거리가 많은 녀석들이지만 추후 글에서 설명하겠다. AJAX 이해를 위해 이정도만 알고 넘어가자

실행 순서

통신을 위한 XMLHttpRequest 객체 생성
request 열거 및 옵션 설정 (요청 방식, 주소, 동기여부, 요청헤더 등등 잡다구리)
request 전송 (설정된 정보로 웹 서버 호출)
callback 함수 호출 (웹 서버로 부터 받아온 response 처리)

걍 코드를 보자 그게 빠르다.

// Vanilla JS
var xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성 
xhr.open('GET', '/getOduckList.do', true); // 데이터 전송 방식, 주소, 비동기여부 설정 
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // HTTP 요청 헤더 설정 
xhr.onreadystatechange = function () { // 웹 서버 응답이후 callback 함수
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200 
            || xhr.status === 201) { // HTTP STATUS CODE가 200번대면 정상 처리란 얘기다.
            console.log(xhr.responseText);
        } else {
            console.error(xhr.responseText);
        }
    }
};
xhr.send();

뭐 대충 이런 구도인데 XMLHttpRequest 객체를 생성해서 그 객체에 웹 서버 리소스 정보를 기입하고 send를 실행하면 통신이 시작된다.

AJAX 장/단점

장점

웹 페이지의 속도 향상 : 한번에 모든 데이터를 담을 필요가 없기 때문에 속도가 빨라진다.
비동기 통신 지원 : 웹 서버 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
리소스 접근과 데이터 분리 : 모듈, 컨텐츠 별로 접근 주소와 데이터를 분리할 수 있다.
웹 페이지 리로드없이 데이터 조회 : 데이터 조회를 위해 웹 페이지가 전체 리로드되는 불합리함을 없앨 수 있다.

단점

히스토리 관리 X : 웹 브라우저의 뒤로가기 버튼을 사용할 수 없다.
요청 빈도 상승으로 인한 서버 부하 증가 : 데이터를 모듈 단위로 분리하는 것은 좋지만 그만큼 활용할때 웹 서버에 접근하는 빈도가 늘어난다.
통신 진행 상황 확인 불가능 : 보내고 나면 웹 브라우저 손을 떠난 것이다. 이후 얼마나 진행 중인지 확인이 불가능하다.
AJAX를 지원하지 않는 브라우저 존재 :
- 오페라 7 이하
- 마이크로소프트 인터넷 익스플로러 4.0이하
- 텍스트 기반의 브라우저 링크스, w3m
- 시각장애인을 위한 브라우저
- 1997년 이전 브라우저
지원하는 Charset 한정적 : 솔직히 이건 통신이라면 똑같다 본다.
크로스 도메인 지원 X : 보안 정책 개선에 따라 도메인이 다를 때 아주 오만똥을 다싸야한다.

AJAX는 이정도로 정리해볼 수 있을 것 같다.

Jquery AJAX

jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. Jquery를 사용하여 AJAX 통신을 할 수 있는데 XMLHttpRequest 객체를 사용하는 것보다 간결하다.

Jquery는 요즘 점점 안쓰는 추세긴 한데 알아보자 그냥.

Jquery AJAX 문법

일단 쓰는 방법은 다음과 같다.

// Jquery
$.ajax({ 
    url: 'getOduckList.do',       // 요청 url
    type: 'GET',                  // 데이터 전송방식 (GET, POST)
    cache: false,                 // 요청 페이지 캐시 여부 (false, true)
    dataType: 'json',             // 웹 서버에서 받아올 데이터의 형태 (xml, json, html, script)
    data: { userName : '미카짱' },  // 웹 서버에 전송할 파라미터 ({ key : value } 형태)
    success : function (data) {   // 통신 성공시 실행되는 callback 함수
        console.log(data.userInfo);
    }, 
    error : function (request, status, error) { // 통신 실패시 실행되는 callback 함수
        console.error(error);
    } 
});

확실히 XMLHttpRequest 객체를 생성해서 사용하는 코드보단 직관적이고 간단하다. Jquery를 사용해 속성으로 통신에 대한 정보를 입력하고 실행한다. 그냥 더 가시적으로 작성할 수 있다는 장점말고는 딱히 모르겠다.

Axios

Axios는 Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트다.

최근 Jquery 사용을 권고하지 않는 환경에서 AJAX를 보다 간편하게 사용할 수 있도록 지원해주는 라이브러리다. 얘는 Promise 기반으로 구현하기 떄문에 ES6 이상 스펙에서 사용가능하다. 주요 특징은 다음과 같다.

운영 환경에 따라 XMLHttpRequest 객체 또는 Node.js의 http API 사용
Promise(ES6) 기반
HTTP 요청 취소가 가능
HTTP 요청, 응답을 JSON 형태로 자동 파싱
JSON 데이터 자동변환이 가능하다.

Axios 문법

먼저 프로젝트에서 axios 패키지를 추가한다.

$ npm install axios

이후 소스 상단에 axios 참조를 추가해 준다.

import axios from 'axios'

// GET 방식
axios.get('getOduckList.do').then((res) => {
    console.log('list : ' + res);
})
.catch((err) => {
    console.log(err);
});

// POST 방식
axios.post('setOduckPerson.do', { userName : '미카짱', age : 40 }).then((res) => {
   console.log('add person : ' + res);
})
.catch((err) => {
    console.log(err);
});

// DELETE 방식 
axios.delete('deleteOduckPerson.do', { userName : 'carrtos' }).then((res) => {
   console.log('delete person : ' + res);
})
.catch((err) => {
    console.log(err);
});

// PUT 방식
axios.put('updateOduckPerson.do', { userName : '미카짱', age : 45 }).then((res) => {
   console.log('update person : ' + res);
})
.catch((err) => {
    console.log(err);
});;

Axios는 데이터 전송방식별로 메소드를 지원한다. 저기에 주소쓰고 추가 설정만 입력하면 AJAX 통신이 가능하다. 그리고 코드를 보면 ES6 Promise 형태로 then, catch 를 통해 통신 성공, 실패를 컨트롤한다. 전송 방식에 대해서는 추후 RESTFUL API 글에서 설명하겠다. 데이터 통신에 있어서 전송 방식을 선택할 수 있는데 각 요청 메소드별로 특징이 나뉜다. 뭐 글타~

import axios from 'axios'

await axios({
    method : 'POST',
    url : 'updateOduckPerson.do',
    data : {
        userName : '미카짱',
        age : 45
    }
})