문제
화면·스크립트가 늘수록 중복과 결합도가 커지고 변경 비용이 높았습니다. 그룹 표준 UI와 어긋난 경험, 초기 로딩·번들 비대화, 그리고 프론트만으로는 해결되지 않는 백엔드 구간 병목이 겹쳐 있었습니다.
솔루션
- 화면 단위로 jQuery를 React 컴포넌트 기반으로 이전
- 신한금융그룹 표준 UI/UX를 적용해 채널 경험을 정렬
- TypeScript 공통 순수 함수로 복제 로직을 공유·검증 가능하게 분리
- 코드 스플리팅·트리셰이킹으로 초기 번들·로딩 개선
- API·서버 측 병목까지 포함해 전 구간 최적화
결정의 포인트
- 한 번에 바꾸지 않고 화면·도메인 단위로 이전해 동작 유지와 표준화를 병행
- 공통 로직을 순수 함수 계약으로 고정해 UI는 조합에 집중
- 체감 성능을 위해 FE 범위를 넘어 백엔드 구간까지 함께 봄
성과
- 채널 차세대에서 jQuery → React 전환의 실무 경험
- 그룹 표준 UI로 채널 UX 일관성 확보
- 공통 TS 유틸·번들 전략으로 유지보수·초기 로딩 개선
레거시를 React로 재구축하며 표준 UI·타입 안전 공통 로직·전 구간 성능까지 한 번에 끌어올린 채널 개편 경험이었습니다.
Stack
React
TypeScript
JavaScript
Java
BXM
Oracle