비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
AJAX란 주로 웹 서버(백엔드 소스)와 통신할때 사용하는 기법으로 브라우저 내장 XMLHttpRequest 객체를 통해 웹 서버와 비동기적 통신을 중개하는 것을 말한다. 비동기 처리에 관한 내용은 이전글에서 작성했으니 그거 보면된다. >> 동기/비동기 처리, callback/Promise/async & await
에이잭스, 아작스등으로 불리는데 뭐가 맞다 이런거 없으니 개인적으로 입에 착 감기는거 쓰자.
이전 글을 읽기 귀찮은 당신에게 이어 달리기에 비유해 설명하자면 전 주자놈이 들어와야 내가 출발할 수 있듯 이전 코드가 완료되어야 다음 코드가 실행되는 구조띄는데, 이를 동기적 구조라 말한다. 그럼 비동기는 뭐겠나? 전 주자놈이 오던 말던 냅다 뛰어 먼저 들어온 순서대로 씻고 들어가는 구조다. 보통 프로그래밍 언어는 거의 대부분 동기적 특성을 띄는데 이는 전 작업이 오래걸릴 경우 행이 걸리거나 처리 응답이 늦게오는 등 성능 저하로 이어질 수 있는 다소 단순한 구조다. 이를 위해 비동기 개념이 나오게 되는데 요약하면 '언제든 시작해서 먼저 끝난 놈이 먼저 나가라' 이런 형태가 비동기 처리라고 보면 된다. 비동기 통신이란 이런 비동기적 특성을 지닌 웹 서버 요청 및 응답이라고 생각하면 쉽다.
오덕 카페 게시판으로 AJAX를 사용하는 이유를 말해보겠다. 여러분은 미소녀 피규어를 모으는 오타쿠고 네이버에 미소녀 수집 카페가 있다 가정해보자. 그중에 열혈 카페회원 미카짱이라는 회원이 있다 치자. 미카짱이 올리는 게시글은 항상 고화질의 20장이 넘는 사진이 기재되고 200개의 댓글이 달리는 인기 글이다. 당신이 미카짱의 게시글을 눌렀다. URL로 해당 게시글 페이지로 이동할 것이다. 고화질 사진이라 로딩 시간은 오래걸렸지만 당신은 곧 그가 쓴 미소녀 피규어 리뷰에 흐뭇해하고 있다. 그러다 문득 다른 사람의 의견이 궁금해졌고 확인을 위해 댓글 확인 버튼을 눌렀다. 그때 페이지 전체가 다시 리로드된다면? 고화질 사진도 다시 렌더링되야 하고 댓글 데이터도 200개 이상이기 때문에 서버에서 처리하는 시간이 오래걸리게 된다. 댓글 데이터를 받아오기 위해 전체 페이지를 다시 렌더링하는 것은 서버나 클라이언트 모두 리소스 낭비에 비효율적인 프로세스다. 이게 AJAX가 필요한 이유라 말할 수 있다. AJAX를 사용하면 게시글 리로드없이 댓글 데이터만 불러올 수 있다. AJAX는 경량화된 웹 서버 통신을 통해 데이터와 요청들을 분리하여 처리속도를 높이는데 있다. 요청마다 페이지를 리로드하지 않아도 된다는 얘기다.
AJAX 통신을 지원하는 라이브러리는 대표적으로 Jquery와 Axios가 있다. 일단 Vanilla JS(순수 javascript)를 기준으로 설명해보겠다. 그 이전에 웹 브라우저와 웹 서버간의 규약 request와 response에 대해 간략히 알아보자.
request와 response는 말 그대로 요청과 응답을 말하는데, request는 클라이언트(웹 브라우저)에서 보내는 요청 데이터고 response는 웹 서버에서 보내는 응답 데이터다. 둘의 구조는 대충 헤더와 바디를 띄고 있는데 딥하게 들어가면 더 설명할 거리가 많은 녀석들이지만 추후 글에서 설명하겠다. AJAX 이해를 위해 이정도만 알고 넘어가자
걍 코드를 보자 그게 빠르다.
// 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는 이정도로 정리해볼 수 있을 것 같다.
jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. Jquery를 사용하여 AJAX 통신을 할 수 있는데 XMLHttpRequest 객체를 사용하는 것보다 간결하다.
Jquery는 요즘 점점 안쓰는 추세긴 한데 알아보자 그냥.
일단 쓰는 방법은 다음과 같다.
// 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는 Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트다.
최근 Jquery 사용을 권고하지 않는 환경에서 AJAX를 보다 간편하게 사용할 수 있도록 지원해주는 라이브러리다. 얘는 Promise 기반으로 구현하기 떄문에 ES6 이상 스펙에서 사용가능하다. 주요 특징은 다음과 같다.
먼저 프로젝트에서 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
}
})
기존 Jquery AJAX처럼 속성 설정 방법으로 Axios를 쓸 수 도 있다. 또한 비동기 통신이기 때문에 ES8 async/await도 지원된다.
오늘은 비동기 통신 AJAX와 Jquery, Axios의 사용법에 대해 알아봤다. 웹 개발에 있어 AJAX는 필수적으로 사용된다. 정신이 혼미해질 정도로 많이 사용되니 개념이나 사용법에 대해 알아둘 필요가 있다.
오늘 저녁은 백숙이다. 🥕
참조 : https://99geo.tistory.com/65
https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0
https://axios-http.com/kr/docs/intro
https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
https://shxrecord.tistory.com/108