| 역량 | 구체적 구현 |
|---|---|
| RDF/Linked Data 타입 시스템 | JSON-LD 형식 데이터를 위한 제네릭 인터페이스 설계 |
| Type Guards 구현 | isRDFString, isRDFReference 등 런타임 타입 검증 |
| 데이터 변환 파이프라인 | 564줄 복잡한 RDF → UI 데이터 변환 로직 설계 |
| Prefix 처리 | RDF URI prefix 정리 유틸리티 함수 구현 |
| 역량 | 구체적 구현 |
|---|---|
| 하이브리드 상태 관리 | MobX(클라이언트) + React Query(서버) 역할 분리 |
| 캐싱 전략 | staleTime 5분 설정으로 불필요한 API 호출 방지 |
| QUERY_KEYS 중앙화 | Factory 패턴으로 쿼리 키 네임스페이스 체계화 |
| Observer 패턴 | MobX observer로 필요한 컴포넌트만 리렌더링 |
| 역량 | 구체적 구현 |
|---|---|
| 이중 API 엔드포인트 | 언어별 Axios 인스턴스 분리 (api_ko, api_en) |
| 언어별 커스텀 훅 | useSearchKo/En, useFacetKo/En 등 8개 훅 설계 |
| 조건부 쿼리 활성화 | enabled 옵션으로 현재 언어에 해당하는 훅만 실행 |
| 언어 설정 영속화 | localStorage 기반 언어 설정 저장/복원 |
| 역량 | 구체적 구현 |
|---|---|
| 동적 탭 렌더링 | Type Guard + filter로 데이터 존재 탭만 표시 |
| 반응형 헤더 | useRef + scroll 이벤트로 수평 스크롤 버튼 상태 관리 |
| 검색 컴포넌트 | 포커스 시 width 확장 애니메이션 구현 |
| 레이아웃 시스템 | GnbLayout 래퍼로 공통 Header/Footer 관리 |
| 역량 | 구체적 구현 |
|---|---|
| Type Guards | 동적 RDF 데이터 타입 좁히기 |
| Discriminated Unions | 탭 데이터 필터링 시 타입 안전성 확보 |
| Module Augmentation | MUI Button Variant 커스텀 확장 |
| Path Aliases | @apis/, @components/ 등 경로 별칭 설정 |
| 역량 | 구체적 구현 |
|---|---|
| 코드 품질 자동화 | ESLint + Prettier + Husky + lint-staged 설정 |
| SVG 최적화 | vite-plugin-svgr로 SVG → React 컴포넌트 변환 |
| 테마 시스템 | MUI 테마 커스터마이징 + 중앙 팔레트 관리 |
| 빌드 최적화 | Vite HMR + ES Module 기반 빠른 개발 환경 |