개발/자바스크립트
REST, SOAP, GraphQL, WebSocket API
피터JK
2025. 2. 18. 16:16
728x90
JavaScript에서 자주 사용되는 API 통신 방식인 REST, SOAP, GraphQL, WebSocket에 대해 설명해드릴게요.
1. REST (Representational State Transfer)
✔ 개념:
REST는 웹에서 가장 많이 사용하는 API 스타일로, HTTP 프로토콜을 기반으로 리소스를 주고받는 방식입니다.
✔ 특징:
- HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 데이터를 처리
- URL을 통해 리소스를 식별
- 주로 JSON 또는 XML 형태로 데이터를 주고받음
- 무상태(Stateless): 각 요청은 독립적으로 처리됨
✔ 예제 (JavaScript Fetch API 사용)
fetch('https://api.example.com/users/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
✔ 장점:
- 간단하고 직관적
- HTTP 표준을 따름
- 캐싱이 가능하여 성능 최적화 가능
✔ 단점:
- 클라이언트가 필요한 데이터를 여러 번 요청해야 할 수도 있음(Over-fetching, Under-fetching 문제)
- 요청과 응답이 많아지면 성능 저하 가능
2. SOAP (Simple Object Access Protocol)
✔ 개념:
SOAP은 XML 기반의 프로토콜로, 보안과 신뢰성이 중요한 엔터프라이즈 시스템에서 주로 사용됩니다.
✔ 특징:
- XML을 사용하여 메시지를 주고받음
- HTTP뿐만 아니라 SMTP, TCP/IP 등 다양한 프로토콜을 지원
- 강력한 보안(WS-Security) 및 트랜잭션 기능 제공
✔ SOAP 메시지 예제
const soapRequest = `
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:web="http://www.example.com/">
<soapenv:Header/>
<soapenv:Body>
<web:GetUser>
<web:id>1</web:id>
</web:GetUser>
</soapenv:Body>
</soapenv:Envelope>
`;
fetch('https://api.example.com/soap-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'text/xml',
'SOAPAction': 'http://www.example.com/GetUser'
},
body: soapRequest
})
.then(response => response.text())
.then(xml => {
console.log('Response:', xml);
})
.catch(error => console.error('Error:', error));
✔ 장점:
- 보안이 뛰어나고 신뢰성이 높음
- 표준화된 메시징 구조로 시스템 간 상호운용성이 좋음
✔ 단점:
- XML 기반이라 데이터 크기가 큼 → 성능 저하 가능
- REST보다 사용하기 어려움
3. GraphQL
✔ 개념:
GraphQL은 Facebook이 개발한 쿼리 언어로, 클라이언트가 필요한 데이터만 요청할 수 있도록 설계되었습니다.
✔ 특징:
- 단일 엔드포인트(/graphql)에서 모든 요청 처리
- 클라이언트가 원하는 데이터 구조를 쿼리로 정의 가능
- Over-fetching과 Under-fetching 문제 해결
✔ 예제 (GraphQL Query)
const query = `
{
user(id: 1) {
name
email
posts {
title
content
}
}
}`;
fetch('https://api.example.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => console.log('Response:', data))
.catch(error => console.error('Error:', error));
✔ 장점:
- 클라이언트가 원하는 데이터만 가져올 수 있음
- REST보다 효율적인 데이터 요청 가능
- API 버전 관리를 따로 할 필요 없음
✔ 단점:
- 초기 설정이 복잡할 수 있음
- 캐싱이 어려움
4. WebSocket
✔ 개념:
WebSocket은 서버와 클라이언트가 양방향, 실시간 통신을 할 수 있도록 하는 프로토콜입니다.
✔ 특징:
- 지속적인 연결 유지 (Stateful)
- 양방향 통신 가능
- REST보다 낮은 오버헤드로 빠른 데이터 전송 가능
✔ 예제 (JavaScript WebSocket 클라이언트)
const socket = new WebSocket('wss://example.com/socket');
socket.onopen = () => {
console.log('Connected');
socket.send('Hello Server!');
};
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};
socket.onclose = () => {
console.log('Disconnected');
};
✔ 장점:
- 실시간 데이터 전송이 필요할 때 적합 (예: 채팅, 주식 거래)
- REST보다 빠른 응답 속도
✔ 단점:
- 상태를 유지해야 해서 서버 부하가 증가할 수 있음
- 보안에 신경 써야 함
📌 비교 정리
| API 방식 | 특징 주요 | 사용 사례 |
| REST | HTTP 기반, Stateless, JSON/XML | 일반적인 웹 API, 모바일 백엔드 |
| SOAP | XML 기반, 보안과 트랜잭션에 강함 | 금융, 엔터프라이즈 시스템 |
| GraphQL | 원하는 데이터만 요청 가능 | 복잡한 데이터 구조 API |
| WebSocket | 양방향, 실시간 통신 | 채팅, 게임, 실시간 알림 |
각 방식마다 장단점이 있으므로, 프로젝트의 요구 사항에 따라 적절한 방식을 선택하는 것이 중요합니다. 🚀
어떤 방식이든 JavaScript에서는 fetch, axios, WebSocket API 등을 활용하여 쉽게 통신할 수 있습니다.
728x90