AJAX, Fetch API 등 - 인터페이스 통신 기술
정처기인터페이스SW개발
읽는데 4분 소요
처음 쓰인 날: 2025-10-07
마지막 수정일: 2026-06-29
조회수: —
선수학습(1개)
요약
정보처리기사 실기 시험의 핵심 주제인 인터페이스 통신 기술을 완벽히 정리합니다. 비동기 통신의 근간인 AJAX부터 현대적인 Fetch API, 실시간 통신을 위한 WebSocket, 효율적인 데이터 요청을 위한 GraphQL까지 각 기술의 특징과 차이점을 알아봅니다.
인터페이스 통신 기술은 클라이언트와 서버가 상호작용하는 방식을 정의하며, 정보처리기사 실기 시험에서 각 기술의 목적과 특징을 비교하는 문제가 자주 나옵니다.
인터페이스 통신 기술
클라이언트와 서버가 데이터를 주고받기 위해 사용하는 다양한 통신 기술들입니다. 각 기술은 사용 목적과 특징이 다릅니다.
| 기술 | 핵심 키워드 | 주요 특징 |
|---|---|---|
| AJAX | XMLHttpRequest, 비동기, 일부 컨텐츠 리로드 | 페이지 새로고침 없이 동적으로 화면 일부를 업데이트하는 개발 기법 |
| Fetch API | Promise 기반, 내장 API, 간결한 문법 | XMLHttpRequest를 대체하는 현대적인 웹 표준 API |
| WebSocket | 양방향, 실시간, 서버 푸시(Server-Push) | 지속적인 연결을 통해 실시간으로 데이터를 주고받는 프로토콜 |
| GraphQL | API 쿼리 언어, Over-fetching 해결 | 클라이언트가 필요한 데이터만 정확하게 요청하는 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문법과 함께 사용되어 비동기 코드를 쉽게 관리할 수 있음. - 현재 웹 표준으로 자리 잡아
XMLHttpRequest기반 요청 방식보다 더 많이 사용됩니다.
-
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사용):
javascript
코드 하이라이팅 중…
정보처리기사 실기 기출문제
문제를 불러오는 중이에요.
문제를 불러오는 중이에요.
정보처리기사 실기 대비 문제
문제를 불러오는 중이에요.
문제를 불러오는 중이에요.
문제를 불러오는 중이에요.
문제를 불러오는 중이에요.
문제를 불러오는 중이에요.