AJAX
Asynchronous JavaScript and XML.
— 2005년 제시 제임스 가렛이 웹의 비동기식 상호작용 기술들을 한데 묶어 최초로 정의한 역사적 용어
좋아요 버튼 하나 눌렀을 뿐인데 웹페이지 전체가 번쩍이며 깜빡이던 'F5의 암흑시대'를 종식시킨 인류 최고의 웹 구세주. 이름은 분명 XML을 달고 있지만, 정작 현대 웹 개발자 중 그 누구도 XML을 쓰지 않고 오직 JSON으로만 비동기 통신을 하는 웃픈 모순의 상징(...)
1. 개요
Asynchronous JavaScript and XML의 약자로, 웹 브라우저가 페이지 전체를 다시 로드(새로고침)하지 않고도 서버와 백그라운드에서 비동기 자바스크립트를 가동해 데이터를 주고받는 웹 개발 기법을 뜻한다. 화면의 '진짜 변해야 하는 일부분만' 동적으로 쏙쏙 갱신해 주기 때문에, 사용자에게 네이티브 데스크톱 애플리케이션에 버금가는 유려하고 부드러운 웹 서핑 인터페이스를 제공하는 혁신적 SPA 시대의 신호탄을 쏘아 올린 위대한 기술적 뿌리이다.
2. 비동기 웹 혁명의 시작
AJAX가 등장하기 전의 고대 웹 서핑은 그야말로 인내심 테스트의 연속이었다. 게시판에서 댓글 하나를 쓰거나, 쇼핑몰 장바구니에 상품을 담거나, 심지어 아이디 중복 체크 버튼 하나만 눌러도 브라우저가 화면 전체를 하얗게 비우며 번쩍인 뒤, HTML 소스코드 수천 줄을 서버로부터 처음부터 끝까지 새로 내려받아 렌더링해야 했다. 서버 자원의 낭비이자 지구 온난화의 주범이었다. 하지만 마이크로소프트가 아웃룩 웹 메일을 구현하기 위해 IE에 최초로 심어두었던 XMLHTTP 기술이 세상에 재조명받으면서 웹은 완전히 뒤바뀌었다. 서버가 브라우저에게 전체 HTML 페이지를 던지는 것이 아니라, 백그라운드에서 오직 '알맹이 데이터'만 아주 콤팩트하게 주고받을 수 있게 되었기 때문이다.
3. 이름값 못하는 XML과 JSON의 찬탈
이름에 아주 당당하게 XML을 박아놓았지만, 현대 실무 웹 생태계에서 AJAX 통신에 XML을 가공해서 쓰는 개발자는 거의 존재하지 않는다. 고대 XML은 데이터보다 겉을 둘러싼 태그가 더 커서 전송 용량이 무겁고, 자바스크립트 내에서 파싱하는 코드가 토가 나올 정도로 길고 복잡했기 때문이다.(...) 결국 자바스크립트 객체와 100% 한 몸으로 호환되는 초경량 텍스트 포맷인 JSON이 혜성같이 등장하면서 웹 생태계는 빠르게 JSON으로 평정되었다. 현대에 와서는 이름만 관성적으로 AJAX라 부를 뿐, 물밑에서는 'AJAJ (Asynchronous JavaScript and JSON)' 또는 그냥 비동기 데이터 통신으로 불리는 것이 압도적인 사실이다.
4. XHR에서 Fetch API로의 진화
고전 브라우저에서 AJAX를 구현하던 도구는 악명 높은 XMLHttpRequest(XHR) 객체였다. 이 객체는 코드가 직관적이지 못하고, 성공과 실패 시 비동기 제어를 위해 콜백 함수를 비엔나소시지처럼 줄줄이 엮어야 해서 비동기 자바스크립트 특유의 '콜백 지옥(Callback Hell)'을 유발하는 악의 축이었다. 이 고질병을 해결하기 위해 현대 브라우저 표준은 자바스크립트의 비동기 객체인 Promise를 기반으로 동작하는 깔끔한 Fetch API를 공식 도입했다. 또한 실무진 사이에서는 HTTP 요청을 더 부드럽고 편리하게 처리해 주며 인터셉터 기능까지 기본 탑재한 오픈소스 라이브러리인 Axios가 사실상의 업계 표준 도구로 군림하고 있는 중이다.
5. 관련 밈 및 드립
5.1. F5의 소멸과 스피너 지옥
AJAX의 보편화로 웹 서핑 중에 유구히 보아왔던 'F5 깜빡임 에러'는 완전히 자취를 감추었지만, 그 반대급부로 현대 개발자들은 사용자들에게 데이터를 로딩 중임을 시각적으로 증명해야 하는 무거운 의무를 짊어지게 되었다. 이로 인해 현대 거의 모든 웹사이트 곳곳에 뱅글뱅글 도는 로딩 스피너(Loading Spinner)가 좀비처럼 창궐하기 시작했다. 오죽하면 유저들 사이에서는 'F5 하얀 화면 대기 시간보다, 로딩 스피너 세 마리가 제자리 돌기 댄스를 추는 걸 바라보며 멘탈이 터지는 대기 시간이 정신적으로 더 치명적이다'라며 자조 섞인 넋두리를 뱉는 이색 밈이 공유되고 있다.
6. 여담
- 구글 지도가 가치를 입증했다: 2005년 당시 AJAX가 단순한 개발 트렌드가 아니라 세상을 바꿀 혁신임을 전 세계 대중들에게 똑똑히 각인시킨 킬러 콘텐츠는 바로 구글 지도(Google Maps)였다. 지도를 마우스로 드래그하는 순간 페이지 새로고침 없이 주변 타일 지도 이미지들만 백그라운드로 쏙쏙 받아와 끊김 없이 화면을 채워주는 광경은 당시 전 인류에게 그야말로 거대한 기술적 문화 충격을 주었다.
- 이름을 지은 사람은 개발자가 아니다: AJAX라는 유서 깊은 이름을 정립한 제시 제임스 가렛은 컴퓨터 프로그래머가 아니라 디자인 및 웹 사용자 경험(UX) 컨설턴트였다. 그는 여러 비동기 브라우저 기술들의 이름을 하나로 마케팅적으로 근사하게 네이밍하려다 AJAX라는 단어를 발명해 냈다.
- 보안의 통곡의 벽, CORS: AJAX 통신을 처음 공부하는 주니어들이 로컬에서 API를 쏘다가 빨간색 콘솔 경고창을 보며 눈물을 흘리는 원흉이 바로 CORS 에러이다. 브라우저는 기본적으로 동일한 출처에서 온 리소스만 AJAX로 통신할 수 있도록 제한하는 동일 출처 정책(SOP)을 고수하기 때문에, 주니어들은 서버 포트 하나만 달라도 보안 장벽에 가로막히는 참담함을 맛보게 된다.