웹 애플리케이션 개발에서 클라이언트와 서버 간의 데이터 통신 방식은 매우 중요한 요소이다.
특히 AJAX와 WebSocket은 웹 애플리케이션에서 데이터를 주고받는 대표적인 기술로, 각각의 특징과 사용 방식이 다르다. 각각의 정의와 사용방식에 대해 알아보겠다.
1️⃣ AJAX란?
AJAX(Asynchronous JavaScript and XML)
자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 새로고침 없이 동적으로 갱신하는 프로그래밍 방식
기본적으로 XMLHttpRequest 객체 또는 fetch API를 사용하여 서버에 요청(Request)을 보내고 응답(Response)을 받는 방식으로 동작한다.
등장 배경
이전의 웹페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다.
따라서 화면이 전환되면, 서버로부터 새로운 HTML을 전송 받아 웹페이지 전체를 처음부터 다시 렌더링(MPA)했다.
이는 아래와 같은 이유로 성능 면에서 불리했다.
- 변경되지 않는 불필요한 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신 발생
- 처음부터 다시 렌더링하기 때문에, 화면이 순간적으로 깜박이는 현상이 발생
- 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹 됨
이와 같은 배경에서 AJAX의 등장으로 더이상 웹페이지에서 변경할 필요가 없는 부분을 다시 렌더링하지 않아도 됐고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능하게 됐다.
결론적으로, AJAX 웹 브라우저에서 빠른 성능과 부드러운 화면 전환이 가능해졌다.
✅ AJAX의 주요 특징
- 비동기 통신 지원
- 사용자가 웹페이지를 새로고침하지 않고도 서버로 데이터를 요청하고 받을 수 있음.
- 다양한 데이터 포맷 전송 가능
- JSON, XML, HTML, Plain Text 등 다양한 포맷의 데이터 전송이 가능.
- RESTful API와 호환
- HTTP 요청(
GET,POST,PUT,DELETE)을 통해 서버와 데이터를 주고받을 수 있음.
- HTTP 요청(
✅ AJAX 요청 예제 (fetch API)
fetch("https://api.example.com/data")
.then((response) => response.json()) // JSON 형식으로 변환
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));✅ AJAX의 한계
- Request-Response 방식이므로 클라이언트가 반드시 요청을 먼저 보내야 서버가 응답함.
- 실시간 데이터 전송이 어려워 웹소켓(WebSocket)과 같은 실시간 양방향 통신이 필요할 수 있음.
- 서버에서 데이터가 변경될 때마다 클라이언트가 주기적으로 요청해야 하므로 Polling 방식이 사용됨.
2️⃣ WebSocket이란?
WebSocket
클라이언트와 서버 간의 양방향, 실시간 통신을 지원하는 프로토콜
기존의 HTTP 기반 요청-응답 방식과 달리, 한 번 연결이 설정되면 추가 요청 없이 서버와 클라이언트가 데이터를 주고받을 수 있다.
✅ WebSocket의 주요 특징
- 양방향 통신 지원
- 서버가 클라이언트에게 직접 데이터를 Push할 수 있어 실시간 기능에 최적화.
- 소켓 연결 유지
- 서버와 클라이언트가 지속적으로 연결된 상태를 유지하여 추가 요청 없이 데이터 교환 가능.
- 낮은 오버헤드
- HTTP 요청보다 데이터 전송 오버헤드가 적어 성능이 우수함.
✅ WebSocket 연결 예제
const socket = new WebSocket("wss://example.com/socket");
// 연결 성공 이벤트
socket.onopen = () => {
console.log("WebSocket 연결 성공!");
socket.send("클라이언트에서 서버로 메시지 전송");
};
// 서버로부터 메시지를 받았을 때 실행
socket.onmessage = (event) => {
console.log("서버로부터 메시지:", event.data);
};
// 연결 종료 이벤트
socket.onclose = () => {
console.log("WebSocket 연결 종료");
};
// 오류 발생 이벤트
socket.onerror = (error) => {
console.log("WebSocket 오류 발생:", error);
};3️⃣ AJAX vs WebSocket 비교
| 비교 항목 | AJAX (XHR, fetch API) | WebSocket |
|---|---|---|
| 데이터 전송 방식 | 요청(Request)에 대한 응답(Response) 방식 | 양방향 실시간 통신 |
| 연결 유지 | 요청이 있을 때마다 새로운 HTTP 연결 생성 | 한 번 연결 후 지속적인 연결 유지 |
| 사용 프로토콜 | HTTP(S) | WebSocket (ws://, wss://) |
| 실시간 데이터 전송 | 지원하지 않음 (Polling 필요) | 실시간 데이터 Push 가능 |
| 오버헤드 | HTTP 요청 헤더 포함 (비효율적) | 한 번 연결 후 지속 사용 (낮은 오버헤드) |
| 주요 활용 사례 | REST API, 일반적인 CRUD 작업 | 채팅, 실시간 주식 데이터, 라이브 스트리밍 |
4️⃣ AJAX와 WebSocket의 활용 사례
✅ AJAX 사용 사례
- 일반적인 REST API 기반의 데이터 요청
- 검색, 게시글 CRUD (Create, Read, Update, Delete) 기능
- 자동완성 기능 (Debounce와 함께 사용)
- 폼 제출 처리 (비동기 요청으로 사용자 경험 개선)
✅ WebSocket 사용 사례
- 실시간 채팅 (예: 카카오톡, 슬랙, 디스코드 등)
- 라이브 주식 시세 전송
- 멀티플레이어 게임 (실시간 사용자 위치 동기화)
- 라이브 스트리밍 (트위치, 유튜브 라이브)
5️⃣ 실무에서 AJAX와 WebSocket을 함께 사용하는 경우
대부분의 웹 애플리케이션에서는 AJAX와 WebSocket을 함께 사용하여 최적의 성능을 구현한다.
✅ AJAX와 WebSocket을 함께 사용하는 패턴
- 초기 데이터는 AJAX 요청으로 가져오기
- 사용자가 페이지에 접속하면
fetch API또는axios로 초기 데이터를 불러온다.
- 사용자가 페이지에 접속하면
- 실시간 업데이트는 WebSocket으로 처리
- 이후 변경된 데이터는 WebSocket을 통해 실시간으로 업데이트한다.
// 초기 데이터는 AJAX로 가져옴
fetch("/api/messages")
.then((res) => res.json())
.then((messages) => {
console.log("초기 메시지 로드:", messages);
});
// 이후 실시간 데이터는 WebSocket으로 처리
const socket = new WebSocket("wss://example.com/socket");
socket.onmessage = (event) => {
console.log("실시간 메시지 수신:", event.data);
};🚀 결론
- AJAX는 요청-응답 방식으로, 서버에서 클라이언트로 데이터를 전달할 때 사용됨.
- WebSocket은 양방향 실시간 통신이 가능하여, 실시간 데이터 처리에 적합함.
- 실무에서는 AJAX와 WebSocket을 조합하여 초기 데이터 로딩은 AJAX로, 이후 실시간 데이터 처리는 WebSocket으로 관리하는 방식이 일반적이다.
👉 AJAX는 CRUD 요청과 일반 API 요청에 적합하며,
👉 WebSocket은 실시간 채팅, 라이브 데이터 스트리밍 같은 경우에 적합하다.
