1) 문제점
- Next.js 및 React의 구버전 사용으로 인해 새로운 기능 도입이 어려움
- TypeScript가 도입되지 않아 런타임 오류가 잦고 코드 안정성이 낮음
- Redux 기반의 상태 관리로 인해 서버 상태와 클라이언트 상태가 혼재되어 유지보수성이 낮음

- 디자인 시스템이 구축되지 않아 일관되지 않은 UI 요소들로 인해 유지보수성이 떨어짐
- 테스트 코드가 부족하여, 운영 환경에서 발생하는 오류를 사전 방지하기 어려움


2) 프로젝트 목표
- Next.js 최신 버전(13.5)으로 업그레이드하여 서버 사이드 렌더링(SSR) 및 빌드 속도 개선
- TypeScript 도입 및 점진적 마이그레이션을 통해 코드 안정성 확보 및 유지보수 용이성 향상
- React Query를 활용하여 서버 상태와 클라이언트 상태를 분리하고 API 호출 최적화
- React Query를 활용한 데이터 캐싱 및 상태 관리 최적화

- 디자인 시스템 도입을 통해 UI 컴포넌트 일관성 유지 및 개발 생산성 향상
- Jest & React Testing Library를 활용하여 테스트 자동화 및 코드 안정성 확보
- MSW(Mock Service Worker)를 활용한 API Mocking으로 QA 과정에서 오류 사전 검출


3) 주안점
- TanStack Query 기반 데이터 캐싱 최적화를 통해 API 요청 부담 감소 및 데이터 검색 속도 개선
- 코딩 컨벤션을 정립하고 Husky, Lint-staged, Commitlint 도입하여 코드 스타일 자동화
- Next.js 및 React의 최신 기능을 활용하여 유지보수성을 고려한 아키텍처 설계
- 타입 안정성 강화를 위한 TypeScript 도입 및 코드 리팩토링 진행

- 디자인 시스템을 도입하여 UI 컴포넌트 재사용성을 극대화
- Jest 및 React Testing Library 기반의 단위 테스트 및 통합 테스트 적용
- MSW를 활용하여 백엔드와의 연동 없이도 테스트 및 QA 진행 가능하도록 환경 구축

1) 서비스 소개
- 뱅크몰은 금융 상품 비교 및 소셜 카지노 관련 서비스를 제공하는 핀테크 플랫폼입니다.
- 주로 소셜 카지노 비교 서비스, 금융상품 추천, 신용 분석 등을 다루며, 다양한 금융사와 제휴하여 사용자들에게 맞춤형 금융 정보를 제공합니다.
- 개인 및 기업 고객이 소셜 카지노 상품을 비교하고 최적의 선택을 할 수 있도록 지원하는 서비스를 운영하고 있습니다.

2)주요 서비스
- 신용소셜 카지노, 주택담보소셜 카지노, 전세소셜 카지노, 자동차 소셜 카지노 등 다양한 소셜 카지노 상품을 비교 제공
- 사용자 신용 정보를 기반으로 최적의 소셜 카지노 상품 추천
- 소셜 카지노뿐만 아니라 예금, 적금, 보험 상품 등도 비교할 수 있는 서비스 운영
- 사용자의 신용 상태를 분석하고, 신용 점수 개선을 위한 가이드 제공
- 여러 금융기관과 협력하여 사용자가 다양한 옵션을 비교하고 선택할 수 있도록 함

3) 주요 업무
- 뱅크몰 서비스의 기능 개발 및 환경 설정을 포함한 전반적인 프론트엔드 개발을 담당하였습니다.
- 회사 내부에서 사용하는 백오피스 서비스와 현재 심사 대기중인 소셜 카지노 상담사가 고객에게 소셜 카지노 상품을 제안할 수 있는 서비스를 기획 단계부터 참여해서 성공적으로 런칭한 경험이 있습니다.

3-1. Husky, Commitlint, Lint-staged, Stylelint 등의 도구를 활용하여 코드 스타일을 자동으로 검증하고 일관성을 유지하도록 환경을 구축
- 브랜치 전략 및 코딩 컨벤션을 정립하고, 이를 노션 문서화하여 팀원들이 참고할 수 있도록 함
- Husky, commitlint, lint-staged, Stylelint를 활용하여 코드 스타일을 자동화하고 개발 일관성을 확보

3-2. Next.js 및 React 버전 업그레이드 (Next.js 10.2 → 13.5, React 17 → 18)
- Stable한 최신 버전(Next.js 13.5, React 18)으로 업그레이드하여 성능 개선
- 신규 API 및 최적화 기능 활용하여 빌드 속도 단축 및 개발 생산성 향상

3.3. 타입스크립트 도입 및 점진적 마이그레이션
- 타입스크립트를 도입하여 컴파일 시점에 에러를 사전 검출
- 팀 내 타입스크립트 스터디 운영 및 도입 가이드 제공
- 점진적 마이그레이션을 통해 1년 내 전체 코드베이스의 40% 이상을 타입스크립트로 변환

3.4 테스팅 환경 구축 및 자동화
- Jest & React Testing Library 기반의 단위 테스트 및 통합 테스트 환경 구축
- MSW를 활용한 API Mocking으로 테스트 환경에서 안정적인 데이터 테스트 가능
- QA 단계에서 발견되던 주요 에러를 개발 단계에서 사전 검출하여 오류 발생률 감소

3.5 디자인 시스템 도입
- 디자이너와 협업하여 디자인 시스템 구축
- 재사용 가능한 공통 UI 컴포넌트 개발로 유지보수 및 생산성 향상

3.6 Suspense와 Error Boundary를 사용한 선언적 UI 처리
- Suspense를 사용하여 로딩 상태를 컴포넌트 단위로 관리
- Error Boundary를 활용하여 API 응답 코드에 따른 에러 처리 체계 구축
- 전역 Error Boundary를 적용하여 예외 처리의 일관성을 확보

3.7 아이콘 생성 자동화
- SVG 파일을 React 컴포넌트로 자동 변환하는 스크립트 개발
- npm 명령어 실행만으로 `<Icon name="ArrowLeft" /` 형태로 아이콘을 사용할 수 있도록 개선

3.8 상태 관리 도구 변경 (Redux → TanStack Query & Recoil)
- TanStack Query를 도입하여 서버 상태와 클라이언트 상태를 분리
- API 별 캐싱 정책 적용으로 불필요한 API 호출을 줄이고 응답 속도 개선