1) 문제점
• 기존 Vue.js 기반 시스템 구조가 복잡해져 신규 기능 추가 시 개발 생산성 저하
• 화면별로 흩어진 서버 통신 로직으로 인해 비동기 처리 및 에러 핸들링 일관성 부족
• 컴포넌트 재사용성이 낮아 유지보수 비용 증가 및 인수인계 어려움

⸻

2) 프로젝트 목표
• React + TypeScript 전환을 통해 안정적이고 생산적인 개발 환경 확보
• Feature-Sliced Design(FSD) 아키텍처 도입으로 모듈화 및 확장성 강화
• RTK Query 적용으로 데이터 통신 로직 표준화 및 비동기 처리 안정성 향상
• 금융 서비스 특성에 맞는 일관된 사용자 경험(UX) 제공

⸻

3) 주안점
• 모듈 설계 주도: 기능 단위로 코드 구조 재설계, 재사용성 극대화
• 상태 관리 최적화: 비동기 처리 단순화 및 안정성 확보
• 협업 효율 강화: mock 페이지 제작으로 초기 검증 및 기획·QA와 원활한 협업
• 장기적 유지보수성 고려: 대규모 금융 서비스에서도 확장 가능한 구조 마련

프로젝트 개요
• 금융권 내부 직원(행원)을 위한 AI 기반 상품 추천 서비스 관리 플랫폼 개발
• 기존 Vue.js 기반 내부 시스템의 한계를 개선하고, 대규모 서비스 확장성과 유지보수성을 확보하는 것을 목표로 진행

⸻

기존 문제점
1. Vue.js 기반의 기존 시스템은 컴포넌트 재사용성과 상태 관리의 일관성 부족
2. 서버와의 데이터 통신 로직이 산발적으로 흩어져, 비동기 요청 처리 및 에러 핸들링의 복잡성 증가
3. 코드 구조가 모듈화되지 않아 신규 기능 추가나 인수인계 시 생산성 저하 발생

⸻

프로젝트 목표
• React + TypeScript 기반으로 전환하여 컴포넌트 단위 개발 효율성 및 안정성 확보
• RTK Query를 적용해 데이터 패칭 로직을 표준화, 반복되는 통신 로직 최소화 및 일관된 에러 처리
• FSD(Feature-Sliced Design) 아키텍처를 도입해 기능 단위로 코드 구조를 모듈화, 확장성과 유지보수성 강화

⸻

담당 역할
• React 전환 주도: Vue.js 기반 시스템을 React + TypeScript로 전환
• 아키텍처 설계: FSD 아키텍처 적용, 기능 단위 코드 구조를 모듈화 설계
• 상태 관리 최적화: RTK Query를 활용해 데이터 통신 로직/에러 처리 프로세스 표준화
• 모듈 설계: 핵심 기능별 컴포넌트 구조 재설계, 재사용성 극대화
• 개발 생산성/품질 향상: 신규 기능 추가 및 인수인계 시 생산성을 높이고 테스트 용이성 확보

⸻

주요 성과