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

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

인터페이스 통신 기술

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

AJAX (Asynchronous JavaScript and XML)

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

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

Fetch API

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

• 특징:

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

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

  javascript복사

  코드 하이라이팅 중...

WebSockets

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

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

GraphQL

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

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

정보처리기사 실기 대비 문제