htlee
2e9361ee58
- CollectDB 다중 신호 수집 → S&P Global AIS API 단일 수집으로 전환 - sig_src_cd + target_id 이중 식별자 → mmsi(VARCHAR) 단일 식별자 - t_vessel_latest_position → t_ais_position 테이블 전환 - 레거시 배치/유틸 ~30개 클래스 삭제 (VesselAggregationJobConfig, ShipKindCodeConverter 등) - AisTargetCacheManager 기반 캐시 이중 구조 (최신위치 + 트랙 버퍼) - CacheBasedVesselTrackDataReader + CacheBasedTrackJobListener 신규 추가 - VesselStaticStepConfig: 정적정보 CDC 변경 검출 + hourly job 편승 - SignalKindCode enum: vesselType/extraInfo 기반 선종 자동 분류 - WebSocket/STOMP 전체 mmsi 전환 (StompTrackStreamingService ~40곳) - 모니터링/성능 최적화 코드 mmsi 기반 전환 - DataSource 설정 통합 (snpdb 단일 DB) - AreaBoundaryCache Polygon→Geometry 캐스트 수정 (MULTIPOLYGON 지원) - ConcurrentHashMap 적용 (VesselTrackStepConfig 동시성 버그 수정) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
4.1 KiB
4.1 KiB
Signal Batch Static Resources v2.0
폐쇄망 환경에서 운용되는 Signal Batch 프로젝트의 개선된 정적 리소스 구조입니다.
구조 개요
v2/
├── css/ # 스타일시트
│ ├── common.css # 공통 스타일
│ └── abnormal-tracks.css # 비정상 궤적 전용 스타일
├── js/ # JavaScript 모듈
│ ├── api/ # API 통신 모듈
│ │ └── abnormal-tracks-api.js
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── map-controller.js
│ │ ├── vessel-list.js
│ │ └── statistics-panel.js
│ ├── pages/ # 페이지별 애플리케이션
│ │ └── abnormal-tracks-app.js
│ └── utils/ # 유틸리티 함수
│ ├── constants.js
│ └── helpers.js
├── pages/ # HTML 페이지
│ └── abnormal-tracks.html
└── README.md
주요 개선사항
1. 모듈화된 구조
- 인라인 CSS/JavaScript를 별도 파일로 분리
- 기능별로 모듈 분할하여 유지보수성 향상
- ES6 모듈 시스템 사용
2. 컴포넌트 기반 설계
- MapController: 지도 렌더링 및 상호작용 관리
- VesselList: 선박 목록 표시 및 필터링
- StatisticsPanel: 통계 정보 표시 및 범례 관리
3. API 모듈 분리
- API 호출 로직을 별도 모듈로 분리
- 에러 처리 및 로딩 상태 관리 개선
4. 폐쇄망 환경 최적화
- 모든 라이브러리는
/libs경로의 로컬 파일 사용 유지 - 지도 타일도 로컬 API 엔드포인트 사용
- CDN 의존성 없음
사용 방법
기본 사용법
- 웹 서버에서
/v2/pages/abnormal-tracks.html접근 - 기존 기능과 동일하게 작동하되, 개선된 코드 구조
개발 시 주의사항
- 모듈 임포트: ES6 모듈 문법 사용
- 이벤트 처리: 컴포넌트 간 이벤트 핸들러 패턴 활용
- 상태 관리: 각 컴포넌트가 자체 상태를 관리
API 엔드포인트
기존과 동일한 엔드포인트 사용:
GET /api/v1/abnormal-tracks/recent- 최근 비정상 궤적 조회POST /api/v1/abnormal-tracks/detect- 사용자 정의 검출POST /api/v1/abnormal-tracks/move-to-abnormal- 비정상 테이블 이동GET /api/tiles/world/{z}/{x}/{y}.webp- 지도 타일
컴포넌트 상세
MapController
- MapLibre GL JS와 Deck.gl 통합 관리
- 트랙 시각화 및 상호작용 처리
- GeoJSON 캐싱으로 성능 최적화
VesselList
- 선박별 궤적 그룹화 및 정렬
- 필터링 및 검색 기능
- 사용자 정의 검출 모드 지원
StatisticsPanel
- 실시간 통계 업데이트
- 비정상 유형별 범례 생성
- 조회 기간 표시
설정 및 상수
constants.js
// API 엔드포인트
export const API_ENDPOINTS = { ... };
// 비정상 유형 및 색상 정의
export const ABNORMAL_TYPES = { ... };
export const ABNORMAL_TYPE_COLORS = { ... };
// 지도 설정
export const MAP_CONFIG = { ... };
helpers.js
// 날짜 처리, 포맷팅, 유틸리티 함수들
export function formatDistance(distance) { ... }
export function getDateRange(days) { ... }
성능 최적화
- GeoJSON 캐싱: 파싱된 GeoJSON 데이터 메모리 캐시
- 디바운스: 빈번한 API 호출 방지
- 이벤트 위임: 동적 요소 이벤트 처리 최적화
- 레이어 관리: Deck.gl 레이어 효율적 업데이트
브라우저 호환성
- ES6 모듈을 지원하는 모던 브라우저 필요
- Chrome 61+, Firefox 60+, Safari 10.1+, Edge 79+
마이그레이션 가이드
기존 abnormal-tracks.html에서 v2로 이전 시:
- 기능적으로는 100% 동일
- URL만
/v2/pages/abnormal-tracks.html로 변경 - 개발자 도구에서 모듈 구조 확인 가능
향후 확장 계획
- TypeScript 도입: 타입 안전성 확보
- 테스트 코드: 단위 테스트 및 통합 테스트
- 번들링: Webpack/Vite를 통한 최적화
- PWA 기능: 오프라인 지원 및 캐싱