AJAX에 대해 설명해주세요.

키워드
비동기, 데이터 정보 교환 기법

AJAX 는 Asynchronous Javascript And XML 의 약자로 Javascript와 XML을 이용한 비동기적 정보 교환 기법을 말한다.

기존의 매 요청마다, 새로운 HTML 파일을 받아 다시 렌더링 해야했던 정적 웹페이지 방식과는 다르게, 사용자와의 상호작용에 따라 필요한 데이터만 받아와, 변경할 부분만 렌더링하는 것이 가능하다. flash 나 activeX 플러그인 없이 웹 표준 기술만으로 다양한 사용자와의 상호작용을 보여주는 것을 통해, 구글 맵, gmail 과 AJAX 를 기반으로 한 유용한 서비스들이 출시되며, 웹 개발 표준 기법으로 자리매김하게 되었다.

AJAX를 통해 어떤 기능을 만들 수 있나요?

키워드
알림, 자동완성

기존의 정적 웹페이지 방식의 기능들을 모두 동일하게 재현하면서도 훨씬 가볍고 빠르게 만드는 것이 가능하다.

특히 AJAX 출현 이후 대표적으로 주목을 받았던 기능이 알림 기능과 자동완성이다. 사용자는 메일이나, 파일을 보낼때 확인 페이지로 이동하지 않아도 성공적으로 보내졌다는 것을 알림으로 인지하는 것이 가능하며, 검색 시 해당 페이지에서 매 타이핑에 따라 일치하는 데이터만 불러오는 것도 가능해졌다.

요즘은 AJAX 안쓰던데, 혹시 단점이 있나요?

키워드
콜백헬, 상태 코드마다 일일히 대안을 작성해야함, Promise

AJAX 의 자체 단점보다는, 비동기 처리를 진행하면서 새로운 문제들이 나타났다. 가장 큰 것은 서비스의 흐름을 제어하기 쉽지 않았다는 것이다. 예를들어 A의 데이터가 도착하는 경우 B 페이지로 이동하는 서비스라고 있다고 치자.

비동기 처리 방식은 언제 서버에서 데이터가 도착하는 지 개발을 진행하는 입장에서는 알 수가 없다. 따라서 A의 데이터가 도착하기 전 B 페이지로 이동해버리거나, A의 데이터가 도착하고 한참 지나 B 페이지로 이동하는 문제들이 발생했다. 이러한 비동기를 제어하기 위한 수단으로 가장 많이 사용했던 것이 callback 이었는데, 이는 함수를 들여쓰고, 들여쓰고, 또 들여써야 하는 콜백지옥 문제를 가져오게 되었다.

그래서 나타난 것이 ES6 의 Promise 객체이다. Promise 는 비동기 과정에서 일어날 수 있는 요소들을 묶어서 처리하는 것이 가능해졌다. 오늘 날 우리는 이러한 Promise 객체를 바탕으로, 현재 데이터를 가져오는 중인지, 성공적으로 가져왔는지, 실패했는지를 쉽게 확인할 수 있게 되었다.

더불어, 기존에 함수를 들여써야하는 콜백과는 다르게, 성공한 케이스와 실패한 케이스를 묶어서 개별 블럭에서 코드를 작성하는 것이 가능해져, 기존 AJAX 대비 일어날 수 있는 실수를 줄이고, 작업 효율성이 높아졌으며, 유지보수 및 확장성 면에서 크게 개선이 되었다.

fetch랑 axios 많이 쓰던데, 어떤 걸 선호하시나요?

키워드
axios, 호환성

axios 를 쓰겠다. 브라우저, 라이브러리, 프레임워크 모두 axios 가 호환성이 더 많다. 커뮤니티도 활발하여 프레임워크, 라이브러리 특화 설정된 모듈도 많다. 또한 fetch 는 explorer 는 안되는데, axios 는 되는 사례도 있었다고 한다. 어지간한 서비스라면 뭘 사용하든 상관없겠지만 미래까지 생각한다면 당연히 호환성 좋고 문제를 덜 일으키는 것을 선택하는 것이 좋다고 생각한다.

JS 는 싱글 쓰레드인데 어떻게 비동기 통신이 가능한가요?

키워드
자바스크립트 엔진, event loop, call stack, webAPIs

JS 는 call stack 이 하나로 call stack 의 호출 순서에 따라 동기적으로 코드가 실행되는 것이 일반적이다. 그럼에도 비동기가 가능한것은, call stack 과 WebAPI , callback queue 가 서로 분리되어 독립적으로 작업하기 때문이다.

비동기 처리에 관련된 일련의 과정은 모두 WebAPI 에서 이루어진다. 비동기 함수가 콜스택에서 호출이 되는 경우, 해당 데이터가 도착하거나, 콜백함수가 이루어지기 까지, WebAPI 에서 처리한다. 만약 해당 처리가 완료되는 경우, callback queue 에서 대기하고 있게된다. 이 때 call stack 에서는 비동기 함수 호출 이후, 쌓여있는 작업을 하나하나 처리를 하고 있을 것이다. 만약 callback queue 최상단에 놓여있고, call stack 에 있는 작업이 모두 끝나, 스택이 빈 상태가 됬을 때 callback queue 는 call stack 으로 콜백함수를 보내게 되는데 이것이 바로 이벤트 루프 이다.

이러한 과정을 통해 JS 가 싱글 쓰레드 기반이어도 비동기 처리가 가능한 이유이다.

JS 는 왜 멀티 쓰레드로 만들지 않았을까요?

키워드
웹을 위한 언어, 대규모 통신, 동시성 문제

멀티쓰레드를 사용하게 되면, 데이터를 받는 속도는 더욱 빠를 수 있을거다. 브랜든 아이크가 어떤 생각을 하고 JS 를 만들었는지는 모르겠으나, 여러 가설을 세워볼 수는 있다.

일단 넷스케이프에서 언어를 만들어달라는 부탁을 할때, 웹사이트에 사용될 언어를 필요로 하였고, 그렇기 때문에 기존에 있던 언어대비 가볍고 경량화된 언어를 만들다가, 싱글쓰레드 형식이 되었다는 이야기가 있다. 이 이야기가 그럴듯 한게 인터넷이라는 것 자체가 전세계 통신을 위한 목적으로 만들어졌고, 시간당 엄청 많은 통신량이 발생하였기 때문에 이때 일어날 수 있는 멀티쓰레드의 동시성을 문제를 주체할 수 없었을 것이다.

즉, 단순히 말하자면 사이트를 만들거나, 문제를 개선할때 개발자가 일하는 것이 더 쉽기 때문이다. 속도적인 부분이 떨어질 수 있지만, 뭐 당시 가정이나 업무용 PC가 멀티쓰레드를 다 감당할 수 있을 정도로 성능이 좋았던 것도 아니었고, 싱글쓰레드를 쓰더라도 기존의 통신방식이었던 전화나 편지보다는 통신 영역도 훨씬 크고 속도도 빠르기에 절충하여 이렇게 만들지 않았나 싶다.

덕분에 이렇게 많은 사람들이 인터넷을 쓰는 역사가 만들어지고, 싱글쓰레드 문제를 개선하는 비동기 처리방식도 나오고, 기술이 진보하여 나도 이렇게 웹개발하고 있으니, 잘 선택한 거 같다.

참고 자료
Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)
[10분 테코톡] 티거의 Ajax
[JAVASCRIPT] 비동기 처리와 AJAX
[Ajax] XMLHttpRequest 객체, XMLHttpRequest 객체의 역사
[JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스)
Ajax 의 개념
Ajax 10주년 : 웹 기술의 미래 :: Channy's Blog
Ajax - 위키백과, 우리 모두의 백과사전
AJAX - 웹 개발자 안내서 | MDN
초보 개발자들을 위한 AJAX에 대한 정리
[개발상식] Ajax, axios, fetch 차이점 장단점
[10분 테코톡] 🍗 피터의 이벤트루프