디라이브 재직 중 이어받은 서비스의 React 코드를 리팩토링하고 기능을 추가한 프로젝트

2025.09 ~ 2025.12 · 디라이브 프론트엔드 개발자 · 프론트엔드 단독 담당

백엔드·디자이너와 협업하며 기존 레거시 코드 수정과 신규 기능 추가를 맡았습니다. 위 기간은 이음 프로젝트 참여 기간이며, 디라이브㈜ 전체 재직 기간은 2025.09.09–2026.02.28입니다.

한 줄 요약

다른 사람이 작성한 레거시 코드베이스를 이어받아, API 호출 로직을 통합하고 UI를 개선하며 웹 푸시 등 기능을 추가했다.

기술 스택

React, Vite, TypeScript, SCSS, Zustand

내가 한 일

• apiClient 통합 — 흩어진 API 호출 로직을 단일 apiClient로 통합 → 에러 처리 일관성 확보, 인증 헤더 자동 주입, 인증 만료 시 자동 로그아웃·재로그인 UX, 추후 API 변경 시 수정 범위 최소화
• 웹 FCM 푸시 메시지 + 토스트 구현
• 로딩 페이지(JSON 애니메이션) 삽입, 테이블 반응형 UI
• 자잘한 기능 추가·UI 개선·이슈 해결

🔧 트러블슈팅

1000줄 컴포넌트 — 리팩토링할까, 묻어갈까

1000줄이 넘는 컴포넌트 앞에서 '리팩토링할지, 사업 진행을 위해 그대로 둘지' 고민이 됐다.

→ 1000줄을 넘거나 너무 불편한 부분은 컴포넌트로 분리하고, apiClient처럼 기능적으로 꼭 필요한 부분은 리팩토링하는 식으로 우선순위를 나눠 판단했다. 이 경험을 통해 "코드를 처음부터 계획하고 구조를 짠 뒤 시작하자", 폴더 구조의 중요성을 절감했고, 이것이 다음 프로젝트(리얼뷰)에서 FSD를 도입한 직접적 계기가 됐다.