리팩토링 FE

FE

라이브러리 경량화

• Category: 성능 최적화

• Why?

  • chart 라이브러리와 같은 주요 로직이 아닌 라이브러리가 크기가 커서 초기 로딩 속도에 영향을 미침
  • 불필요한 리소스 사용으로 인한 성능 저하

• 목표

  • react profiler를 이용한 초기 로딩 속도 측정 및 개선
  • 대체 가능한 경량 라이브러리 도입 또는 직접 구현

캐싱 전략 최적화

• Category: 성능 최적화

• Why?

  • 불필요한 네트워크 요청 발생
  • 데이터 로딩으로 인한 UX 저하
  • 최신 데이터 동기화 문제

• 목표

  • Chrome DevTools Network 탭을 통한 API 요청 수 최적화
  • stale-while-revalidate 패턴 적용으로 최신성 유지
  • 캐시된 데이터를 활용한 즉시 UI 렌더링

반응형 웹 제작

• Category: 성능 최적화

• Why?

  • 반응형 웹이 제작되지 않아 모바일 접근성이 낮음
  • 반응형 작업을 통한 SEO 향상

• 목표

  • 반응형 웹 제작을 통한 모바일 사용자 수용

데이터 전송 최적화

• Category: 성능 최적화

• Why?

  • 큰 데이터 전송으로 인한 지연 발생
  • 초기 로딩 시간 개선 필요

• 목표

  • 데이터 압축을 통한 전송 크기 감소
  • 청크 단위 전송으로 초기 로딩 시간 단축

단위 테스트 커버리지

• Category: 테스트

• Why?

  • 잠재적인 문제 조기 발견 필요
  • 코드 신뢰성 향상 필요

• 목표

  • 테스트 커버리지 70% 이상 달성
  • 주요 기능에 대한 단위 테스트 구현

E2E 테스트

• Category: 테스트

• Why?

  • 실제 사용자 시나리오 기반 테스트 필요
  • 컴포넌트 간 상호작용 검증 필요
  • 전체 플로우에서의 성능 이슈 발견

• 목표

  • 핵심 사용자 시나리오 5개 작성 및 테스트
  • 통합 테스트를 통한 컴포넌트 간 상호작용 검증

미사용 코드 정리

• Category: 코드 정리

• Why?

  • 불필요한 코드로 인한 코드 복잡도 증가
  • 유지보수 비용 증가

• 목표

  • ESLint를 통한 미사용 코드 분석
  • SonarQube를 통한 코드 복잡도 측정 및 개선

API 주소 상수 처리

• Category: 코드 정리

• Why?

  • 하드코딩된 API 엔드포인트로 인한 유지보수 어려움
  • 코드 복잡도 증가

• 목표

  • API 엔드포인트 상수화
  • 중앙 집중식 API 관리 구조 구축