웹 개발을 학습하며 'Ajax'라는 용어를 자주 접하게 된다. 이 기술이 대체 무엇이길래 웹 개발 분야에서 그 중요성이 강조되는 것일까 ? 과거 웹페이지의 경우, 페이지 이동 시 화면 전체가 새로고침되어 사용자 경험이 단절되고 속도가 느려지는 단점이 있었다. 그러나 현대의 웹사이트들은 매우 부드럽게 작동하며, 페이지 새로고침 없이도 필요한 정보가 실시간으로 갱신된다. 이를 가능하게하는 기술이 'Ajax'이다. 이제는 개발에 있어서 필수적인 기술이 된 Ajax에 대해 알아보도록 하자.
1. Ajax와 비동기
Ajax
- Asynchronous JavaScript and XML
- 비동기 자바스크립트와 XML
간단하게 말하자면 Ajax는 '자바스크립트를 이용해 새로고침 없이 서버와 통신하는 기술'이다. 요즘은 XML보다는 HTML이나 JSON을 주로 사용하지만 개발 당시에는 XML이 주류였어서 이렇게 이름 지어졌다고 한다.
가장 큰 특징은 비동기적으로 백엔드 서버에 요청하여 새로운 데이터를 가져와 페이지 일부를 동적으로 바꾼다는 점 이다. 즉, 전체 페이지를 새로고침하지 않으면서 필요한 데이터만 받아와서 일부만 갱신할 수 있다는 말인데 ... 이게 도대체 무슨 뜻일까 ?
이를 이해하기 위해 먼저 '동기와 비동기'의 개념에 대해 간단하게 짚어보자.
동기 (Asynchronous)
말 그대로 동시에 일어나는 것이다. 브라우저와 서버 간의 요청과 응답이 한 번에 이루어지는 것인데 위 이미지를 참고하면 이해가 쉬울 것이다.
브라우저가 하나의 요청을 보내면 서버에서 응답을 줄 때까지 다른 요청을 보낼 수 없다. 다음 요청을 위해서는 이전 요청에 대해 응답 시간이 얼마가 걸리든 기다려야한다. 따라서 순서에 맞춰 데이터의 송수신이 진행된다는 장점이 있지만, 여러 요청을 동시에 처리할 수 없다. 이렇듯 한 번에 하나의 요청과 하나의 응답이 동시에 이루어지는 것이다. 이때 웹페이지는 요청에 대한 응답을 받으면 전체 화면을 다시 그려서 보여준다.
비동기 (Asynchronous)
말 그대로 동시에 일어나지 않는 것이다. 즉, 요청과 응답이 동시에 일어나지 않고 한 번에 여러 요청이 가능하다. 동기와는 반대로, 서버의 응답이 올 때까지 대기하지 않아도 사용자가 웹페이지에서 다른 작업을 수행할 수 있다. 그러다보니 응답까지 시간이 걸리더라도 자원을 효율적으로 사용할 수 있다. 또한 응답을 받기까지 사용자가 다른 이벤트(스크롤, 클릭 등)를 발생시킬 수 있어야하기 때문에 전체 페이지가 새로 로드되지 않는다.
차이점을 예시로 들자면, 보통 웹페이지가 로드되려면 서버에서 자원을 받아와야하는데 동기적 방식으로는 웹페이지 전체를 로드하기까지 시간이 오래 걸리고(자원이 모두 도착할 때까지 기다려야하기 때문) 이는 고객 이탈로 이어질 수 있다. 하지만 비동기적 방식을 이용하면 대기 없이 먼저 도착한 자원(텍스트 등등)부터 표시되며 응답까지 시간이 걸리는 자원(큰 파일, 이미지 등등)은 천천히 표시가 된다. 이는 UX 향상과 속도 향상으로 이어진다.
(그렇다면 무조건 비동기 방식이 짱인가 ? ... 그건 아니다. 각각 장단점이 있고 설계 의도에 따라 사용하면 된다. 자세한 내용은 다음에 포스팅으로 다뤄보겠다.)
결론적으로 Ajax에서는 위와 같은 비동기 방식을 사용한다. 그렇기 때문에 새로고침 없이 서버와 데이터를 주고 받기가 가능하다는 것이다.
2. Ajax의 작동 방식
브라우저가 서버에 Ajax 요청을 보내게 되는데, 위에서 설명한 것처럼 Ajax는 비동기 통신을 사용한다. 이 비동기 통신을 가능하게 하기 위해서는 브라우저에 내장된 객체나 외부 라이브러리를 사용할 수 있다.
브라우저 자체 내장 기능 (설치 필요 X)
XMLHttpRequest: 브라우저에 기본으로 탑재된 내장된 객체 이다. JavaScript에서new XMLHttpRequest()으로 객체를 만들어 사용할 수 있다.fetch: 브라우저에 기본으로 제공되는 내장 API(웹 API) 이다.fetch()라는 함수를 브라우저의 전역 객체에서 바로 호출해서 사용한다.
외부 라이브러리 (설치 필요 O)
가장 많이 쓰는 방식으로는
axios가 있다.
axios: Ajax 통신을 더 간편하게 해주는 자바스크립트 라이브러리이다. 내부적으로는 XMLHttpRequest를 사용하지만 Promise 기반으로 작성되어 코드가 훨씬 깔끔해진다는 장점이 있다. XML 뿐만 아니라 HTML, JSON, 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.
작동 흐름
1. 브라우저가 서버에 요청을 보낸다.
- 사용자가 어떤 행동(버튼 클릭 등)을 하면, JavaScript 코드에서 axios 등을 써서 특정 서버 주소(URL)로 데이터를 요청(request)을 한다.
- 이때 요청은 비동기적으로 보내진다. 요청을 보낸 후 서버 응답(response)이 올 때까지 브라우저가 멈추지 않는다는 뜻이다. 덕분에 사용자는 그동안 다른 버튼을 누르거나 스크롤을 하거나 다른 이벤트를 발생시킬 수 있다.
2. 서버가 요청을 처리하고 응답을 보낸다.
- 서버는 브라우저가 보낸 요청을 받아서 필요한 작업(데이터 찾기 등)을 하게된다. 그리고 찾은 데이터를 다양한 포맷(JSON, XML, HTML, 일반 텍스트 등)으로 만들어서 브라우저에게 다시 보내준다(응답). 요즘 웹 개발에서는 JSON 형식을 가장 많이 사용하는데, 사람이 읽기도 쉽고 JavaScript에서 다루기도 편하기 때문이다.
3. 브라우저가 응답을 받고 웹 페이지 일부를 업데이트한다.
- 브라우저는 서버로부터 응답이 오면, 미리 약속해둔 JavaScript 함수를 실행한다.(이걸 '콜백 함수'라고 한다.) 이 함수 안에서 서버가 보내준 데이터를 가지고 웹 페이지의 일부분만 바꿔주는데 여기서 가장 중요한 점은 페이지 전체를 새로고침하지 않고 필요한 부분만 동적으로 업데이트한다는 것이다. 이게 Ajax의 핵심 장점이다.
3. 한계
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀(Client Pull) 방식이다. 그래서 사용자가 요청하지 않아도 서버가 알아서 특정 정보를 제공하는 서버 푸시(Server Push) 방식의 실시간 서비스(스마트폰 푸시 알림, 실시간 채팅 등)는 만들기 어렵다.
실시간으로 업데이트되는 서비스를 만들려면 클라이언트에서 계속 폴링(Polling) 을 해줘야하는데, 그렇게되면 실시간도 아닐뿐더러 서버에 부하도 커지고 비효율적이다. 서버가 새 소식이 생겼을 때 클라이언트한테 먼저 알려줄 수 있는 기술이 필요한 것이다.
그래서 스마트폰 푸시 알림이나 실시간 채팅처럼 서버 푸시가 필요한 서비스는 Ajax 기본 방식만으로는 만들기 어렵고 WebSocket이나 Firebase 같은 양방향 통신이나 실시간 데이터 동기화에 특화된 기술을 사용해야 한다.
4. 추가 지식!
❓ Ajax와 Axios 혼동?
- 참고로 Ajax는 기술(통신 방식)이다. 이를 처음 접하게 되면 axios와 은근 헷갈리는 경우가 있는데 axios는 Ajax라는 기술을 쉽게 구현하기 위한 라이브러리(도구)이다. 혼동하지 않도록 정확히 알고가도록 하자 !
❓ 실시간 통신 기술
- WebSocket
클라이언트랑 서버랑 한 번 연결되면 양방향으로 데이터를 언제든지 주고받을 수 있는 기술이다. 서버가 새 데이터가 생기면 클라이언트한테 바로 보내줄 수 있다. 채팅이나 주식 시세처럼 정보가 계속 업데이트되는 서비스에 좋다. - Firebase
구글에서 만든 서비스인데 실시간 데이터베이스(RealTime DB)기능이 있다. 데이터가 바뀌면 연결된 모든 클라이언트한테 실시간으로 동기화해준다.
❓ Ajax와 CRS
- CRS(Client-Side Rendering)는 클라이언트(브라우저)에서 웹 페이지를 직접 그리는 렌더링 방식이다. 서버는 처음에 HTML과 JavaScript만 보내주고, 브라우저가 그 JavaScript를 실행해서 화면을 동적으로 만든다.
그리고 여기서 AJAX가 등장한다. CSR 방식으로 웹 페이지를 만들 때, 브라우저가 화면을 그리려면 서버에서 데이터가 필요하기 마련이다. 그때 그 데이터를 서버한테 비동기적으로 요청해서 가져오는 것이 바로 Ajax인 것이다. - 결국 Ajax는 CSR 방식에서 데이터를 가져오는 데 쓰이는 아주 중요한 도구라고 볼 수 있다. CSR은 AJAX를 사용해서 필요한 데이터를 가져와 화면을 업데이트하는 하는 것으로 이해하면 될 것이다.
- 참고로 대표적인 렌더링 방식은 CRS와 SSR(Server-Side Rendering)가 있다. 간단하게 설명하자면 CRS는 렌더링을 클라이언트 측에서, SSR은 렌더링을 서버 측에서 진행한다.
