목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
KODEX2 (Korean Defense Export Knowledge Platform) |
| 유형 |
국방 지식 플랫폼 / RDF 기반 Linked Data 브라우저 |
| 역할 |
프론트엔드 개발 |
| 기간 |
2024.12 ~ 2025.01 |
| 팀 구성 |
BE: 1, FE: 1 |
프로젝트 소개
KODEX2는 국방 관련 장비, 시설, 군사 정보를 RDF 기반 시맨틱 웹 기술로 제공하는 다국어(한국어/영어) 지식 플랫폼입니다. Faceted Navigation, 실시간 검색, 동적 필터링 등 고급 데이터 브라우징 기능을 제공합니다.
2. 기술 스택
Frontend Core
| 기술 |
버전 |
선택 이유 |
| React |
18.2.0 |
안정적인 LTS, 풍부한 생태계 |
| TypeScript |
4.9.5 |
RDF 데이터 타입 안전성 확보 |
| Vite |
4.3.9 |
빠른 HMR, ES Module 기반 빌드 |
상태 관리
| 기술 |
버전 |
용도 |
| MobX |
6.13.5 |
클라이언트 상태 관리 (필터, UI 상태) |
| mobx-react-lite |
4.1.0 |
MobX React 바인딩 (observer HOC) |
| React Query (TanStack) |
5.62.11 |
서버 상태 관리 (API 캐싱, 동기화) |
UI/스타일링
| 기술 |
버전 |
용도 |
| Material-UI (MUI) |
6.3.0 |
컴포넌트 라이브러리 + 테마 시스템 |
| Emotion (react/styled) |
11.14.0 |
MUI 기본 스타일링 엔진 |
| styled-components |
6.1.13 |
추가 CSS-in-JS 스타일링 |
| Phosphor Icons |
2.1.7 |
아이콘 라이브러리 |
국제화 (i18n)
| 기술 |
버전 |
용도 |
| i18next |
22.5.1 |
다국어 프레임워크 코어 |
| react-i18next |
12.1.5 |
React 바인딩 (useTranslation 훅) |
| i18next-browser-languagedetector |
8.0.2 |
브라우저 언어 자동 감지 |
| i18next-http-backend |
3.0.1 |
번역 파일 동적 로딩 |
라우팅 & HTTP
| 기술 |
버전 |
용도 |
| React Router |
7.1.1 |
클라이언트 사이드 라우팅 |
| Axios |
1.7.9 |
HTTP 클라이언트 (이중 엔드포인트 ko/en) |
UI 컴포넌트
| 기술 |
버전 |
용도 |
| react-slick |
0.30.3 |
캐러셀/슬라이더 |
| slick-carousel |
1.8.1 |
slick CSS 스타일 |
| vite-plugin-svgr |
4.3.0 |
SVG → React 컴포넌트 변환 |
개발 도구