AJAX, Fetch API, WebSocket, GraphQL - 인터페이스 통신 기술

💡 인터페이스 통신 기술은 클라이언트와 서버가 상호작용하는 방식을 정의하며, 정처기 실기 시험에서 각 기술의 목적과 특징을 비교하는 문제가 자주 나옵니다.

🔄 인터페이스 통신 기술

클라이언트와 서버가 데이터를 주고받기 위해 사용하는 다양한 통신 기술들입니다. 각 기술은 사용 목적과 특징이 다릅니다.

1. AJAX (Asynchronous JavaScript and XML)

AJAX는 웹페이지 전체를 새로고침하지 않고도, 백그라운드에서 서버와 데이터를 비동기적으로 교환하여 동적으로 화면을 갱신하는 개발 기법입니다.

• 핵심 역할: XMLHttpRequest 객체를 사용하여 서버에 요청을 보내고 응답을 받습니다.
• 특징:
  • 페이지 깜빡임 없이 필요한 부분만 업데이트하여 사용자 경험(UX)을 향상시킴.
  • 이름에는 XML이 포함되어 있지만, 현재는 주로 가벼운 JSON 형식을 사용하여 데이터를 교환함.
  • AJAX는 특정 기술이 아닌, 여러 기술(JavaScript, DOM, Fetch/XHR 등)을 사용하는 패러다임에 가깝습니다.

2. Fetch API

Fetch API는 XMLHttpRequest 객체를 대체하는 현대적인 브라우저 내장 API입니다. Promise 기반으로 설계되어 코드가 더 간결하고 가독성이 높습니다.

• 특징:

  • 별도의 라이브러리 설치 없이 사용 가능.
  • Promise 기반으로 async/await 문법과 함께 사용되어 비동기 코드를 쉽게 관리할 수 있음.
  • 현재 웹 표준으로 자리 잡아 AJAX보다 더 많이 사용됩니다.

• JavaScript 예시 (async/await 사용):

  javascript복사

  async function getUser(id) {
    try {
      // API에 GET 요청을 보냅니다.(**fetch** 사용)
      const response = await fetch(`https://api.example.com/users/${id}`);
  
      // 응답이 성공적이지 않으면 에러를 발생시킵니다.
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
  
      // 응답 본문을 JSON으로 파싱합니다.
      const user = await response.json();
      console.log(user);
      return user;
    } catch (error) {
      console.error("Fetch error:", error);
    }
  }
  
  // 함수 호출
  getUser(1);

3. WebSockets

웹소켓(WebSockets) 은 클라이언트와 서버 간에 양방향 실시간 통신을 지원하는 프로토콜입니다.

• 특징:
  • 한 번 연결이 수립되면 계속 유지(Persistent Connection)되어 데이터 교환이 자유로움.
  • 서버가 클라이언트의 요청 없이도 데이터를 보낼 수 있는 **서버 푸시(Server-Push)**가 가능.
  • 매우 낮은 지연 시간(latency)으로 실시간 채팅, 온라인 게임, 주식 시세 알림 등에 사용됨.

4. GraphQL

GraphQL은 API를 위한 **쿼리 언어(Query Language)**이자, 해당 쿼리를 처리하기 위한 런타임입니다. REST 아키텍처의 대안으로 등장했습니다.

• 특징:
  • Over-fetching/Under-fetching 해결: 클라이언트가 필요한 데이터의 구조를 직접 정의하여 요청하므로, 불필요한 데이터 전송이 없음.
  • 하나의 엔드포인트(Endpoint)로 여러 종류의 데이터를 유연하게 요청 가능.
  • 강력한 타입 시스템을 기반으로 API 명세를 관리.
• JavaScript 예시 (fetch 사용):

async function getProduct(id) {
  // 클라이언트가 필요한 데이터를 GraphQL 쿼리로 정의합니다.
  const query = `
    query GetProductById($id: ID!) {
      product(id: $id) {
        id
        name
        price
        description
      }
    }
  `;

  try {
    const response = await fetch("https://api.example.com/graphql", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // 쿼리와 변수를 body에 담아 보냅니다.
      body: JSON.stringify({
        query: query,
        variables: { id: id },
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log(result.data.product);
    return result.data.product;
  } catch (error) {
    console.error("GraphQL request error:", error);
  }
}

// 함수 호출
getProduct("prod-123");

📝 정처기 실기 대비 문제