DOCS/journey/troubleshooting/260116_환율_그래프_이상치_필터링_반성.md

2.4 KiB

환율 그래프 이상치 필터링 - 반성 문서

날짜: 2026-01-16 작성자: Agent 관련 파일: goosefarminvesting/frontend/src/pages/GoldDetailPage.tsx:307-412


문제 상황

환율 추이 그래프에서 이상치 스파이크(0 KRW 급락, 500+ KRW 급등)가 표시되어 사용자 경험이 저하됨

해결 방안

최종 구현: GoldDetailPage.tsx:308-412

  • 전일 대비 변화율 30% 이상인 데이터 필터링 (O(1) 복잡도)
  • 원본 데이터 필터링 → 집계 → 재필터링 (이중 필터링)
  • 날짜 순 정렬 강제

왜 복잡하게 돌아갔는가 (반성)

1. 브라우저 테스트 미실시 (AGENTS.md 원칙 위반)

  • 원칙: "프론트엔드 코드 변경 후 반드시 실제 브라우저에서 동작 확인"
  • 실제: 코드 수정 후 바로 배포, 배포 후에야 브라우저 테스트
  • 결과: 필터링이 작동하지 않아도 알 수 없음 → 여러 번 수정 반복

2. 데이터 흐름 파악 부족

  • 문제: aggregateDatafilterOutliers 함수 순서/의존성 미확인
  • 결과: 필터링을 집계 후에만 적용 → 집계 과정에서 이상치 포함됨
  • 해결: 집계 전후 이중 필터링으로 복잡도 증가

3. 단계별 검증 부족

  • 원칙: "각 단계마다 테스트로 검증 후 진행"
  • 실제: 필터링 로직 수정 → 빌드/배포 → 브라우저 확인 (반복)
  • 결과: 문제가 계속 발견되어 여러 번 수정

4. 간단한 해결책을 놓침

  • 처음 시도: 집계 후 필터링만 시도
  • 실제 해결: 원본 데이터 필터링 → 집계 → 재필터링 (이중)
  • 더 나은 방법: 원본 데이터만 필터링하고 집계는 단순화 가능했을 수도

교훈

원칙 준수 체크리스트

  • 브라우저 테스트 먼저 (코드 수정 전 현황 파악)
  • 데이터 흐름 명확히 파악 후 수정
  • 단계별 검증 (필터링 로직 → 집계 로직 → 최종 결과)

다음에 할 일

  1. 프론트엔드 수정 시: 코드 수정 전 브라우저에서 문제 확인
  2. 데이터 처리 로직: 입력 → 처리 → 출력 흐름 명확히 문서화
  3. 필터링 적용 위치: 가능하면 가장 앞 단계에서 한 번만 적용

참고

  • AGENTS.md: 프론트엔드 브라우저 테스트 필수 원칙
  • 312_문서_작성_원칙.md: 단계별 검증 원칙