AquaView의 실시간성은 3초 폴링과 브라우저 브릿지로 구현됩니다. WebSocket이 아니라 Polling을 선택한 이유와, 디바운스 패턴으로 API 호출을 최적화하는 방식도 다룹니다.

1. Fetch API 기초

fetch() 기본 패턴

fetch는 브라우저에 내장된 HTTP 요청 함수로, 외부 라이브러리 없이 사용할 수 있습니다.

// 기본 fetch
const response = await fetch("<http://localhost:8000/api/sensors>");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();

주의: fetch는 404, 500 같은 HTTP 에러에도 throw하지 않습니다. response.ok를 직접 확인해야 합니다.

2. client.js 분석: 5개 API 함수

모든 API 호출은 src/api/client.js 한 곳에 모아 관리합니다.

const BASE_URL = import.meta.env.VITE_API_URL || "<http://localhost:8000/api>";

// 공통 에러 처리를 내장한 헬퍼
async function apiFetch(path, options = {}) {
  const res = await fetch(`${BASE_URL}${path}`, options);
  if (!res.ok) throw new Error(`API ${res.status}: ${path}`);
  return res.json();
}

// 1. 센서 현재값
export const fetchSensors = () => apiFetch("/sensors");

// 2. 경보 목록
export const fetchAlerts = () => apiFetch("/alerts");

// 3. 시계열 이력
export const fetchHistory = (sensor, limit = 20) =>
  apiFetch(`/history?sensor=${sensor}&limit=${limit}`);

// 4. 파이프라인 기본 계산
export const fetchPipeline = () => apiFetch("/pipeline");

// 5. 커스텀 HRT 파라미터로 파이프라인 계산
export const updatePipelineParams = (params) =>
  apiFetch("/pipeline/params", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ params }),
  });

설계 포인트: apiFetch 헬퍼로 HTTP 에러 실리를 한 곣에서 관리합니다. 새 API 추가 시 apiFetch만 사용하면 됩니다.

3. 폴링(Polling) 전략

WebSocket vs Polling

AquaView 선택 이유: 센서 데이터는 3초마다 변하고 이표요과중이 낮아 Polling으로 충분합니다.

인터벌별 상세 전략

// App.jsx
const { data: sensors }  = usePolling(fetchSensors, 3000);   // 3초: 빠른 실시간성
const { data: alerts }   = usePolling(fetchAlerts, 3000);    // 3초: 경보는 글로 업데이트
const { data: pipeline } = usePolling(fetchPipeline, 10000); // 10초: 계산 비용 절감