개발/자바스크립트

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