Projects · 웹 프론트엔드 웹 프론트엔드 AssetMind진행 중 Figma 디자인부터 디자인 시스템 구축, 실서비스 API 연동까지UI 개발을 전담한 금융자산관리 웹 서비스 React TypeScript Tailwind CSS Storybook Zustand React Query WebSocket (STOMP) MSW Vite Figma Vercel Overview Period 2026.01 – 2026.06 (진행 중) Team 4인 팀 프로젝트 (UI · UX · 백엔드 · 데이터) Platform Web — PC / Tablet..

1. 들어가며프론트엔드 개발을 진행하다 보면 디자인 형태는 완전히 동일하지만, 주입되는 데이터의 구조가 달라 매번 새로운 컴포넌트를 생성해야 하는 상황을 마주하게 됩니다.특히 금융 도메인이나 대시보드 형태의 서비스를 개발할 때 이러한 문제가 자주 발생합니다. 주식, 현금, 부동산 등 각 자산군마다 백엔드에서 내려주는 API 응답 형태가 다르기 때문입니다. 이 글에서는 이러한 상황에서 TypeScript의 제네릭을 활용하여 컴포넌트를 유연하게 추상화하고 중복 코드를 제거한 과정을 공유합니다.2. 문제 상황: 늘어나는 보일러플레이트와 중복 코드초기에는 직관적인 구현을 위해 데이터 타입별로 컴포넌트를 분리했습니다. 백엔드에서 전달받는 주식과 현금 데이터의 타입은 다음과 같이 서로 다른 필드명을 가지고 있었습니..