AquaView 프론트엔드를 이해하려면 먼저 SPA가 무엇인지, React와 Vite가 어떤 역할을 하는지 알아야 합니다.

1. SPA와 React 소개

SPA (Single Page Application)란?

전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 HTML을 다시 받아옵니다. SPA는 액 전체를 처음에 한 번만 로드하고, 이후는 JavaScript로 DOM을 동적으로 업데이트합니다.

전통 웹:
  사용자 클릭 → 서버에서 HTML 요청 → 페이지 전체 재로드

SPA (AquaView):
  최초 접속: HTML + JS 번들 한 번 로드
  이후: JavaScript가 DOM 직접 업데이트 (3초 폴링으로 센서 갱신)

React의 컴포넌트 기반 설계

React에서는 UI를 컴포넌트 단위로 분리합니다.

// 가장 단순한 컴포넌트
function SensorCard({ sensor, onClick }) {
  return (
    <div onClick={onClick}>
      {sensor.value} {sensor.unit}
    </div>
  );
}

// 사용
<SensorCard sensor={{ value: 7.2, unit: "pH" }} onClick={() => alert("clicked")} />

AquaView 컴포넌트 목록:

컴포넌트	역할
`SensorCard`	pH, 탁도, 유량, 수온 현재값 표시
`HistoryChart`	시계열 차트 (Recharts)
`AlertPanel`	경보 목록
`ProcessFlowDiagram`	SVG 공정도
`HRTControls`	HRT 슬라이더
`WaterQualityComparison`	원수 vs 처리수 비교
`Unity3DView`	Unity WebGL iframe 브릿지

2. Vite: 현대적 번들 도구

Vite vs CRA (Create React App)

항목	CRA	Vite
개발 서버 시작	15~30초	0.5초 이하
HMR 속도	느림 (Webpack 기반)	빠름 (ESM 네이티브)
빌드	Webpack	Rollup
스타일	별도 babel 설정	기본 내장

HMR (Hot Module Replacement)

코드를 저장하면 브라우저를 새로고침 없이 변경된 리터지터리만 교체됩니다:

코드 저장 → Vite가 수정된 모듈 감지 → 해당 컴포넌트만 교체
                                         다른 컴포넌트는 유지→

vite.config.js 분석

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // @vitejs/plugin-react: React Fast Refresh 활성화 (HMR 지원)
  // 빌드 출력: dist/ 폴더
  // 기본 포트: 5173
})