diff --git a/journey/troubleshooting/260116_환율_그래프_이상치_필터링_반성.md b/journey/troubleshooting/260116_환율_그래프_이상치_필터링_반성.md new file mode 100644 index 0000000..e016c1e --- /dev/null +++ b/journey/troubleshooting/260116_환율_그래프_이상치_필터링_반성.md @@ -0,0 +1,62 @@ +# 환율 그래프 이상치 필터링 - 반성 문서 + +**날짜**: 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. 데이터 흐름 파악 부족 +- **문제**: `aggregateData`와 `filterOutliers` 함수 순서/의존성 미확인 +- **결과**: 필터링을 집계 후에만 적용 → 집계 과정에서 이상치 포함됨 +- **해결**: 집계 전후 이중 필터링으로 복잡도 증가 + +### 3. 단계별 검증 부족 +- **원칙**: "각 단계마다 테스트로 검증 후 진행" +- **실제**: 필터링 로직 수정 → 빌드/배포 → 브라우저 확인 (반복) +- **결과**: 문제가 계속 발견되어 여러 번 수정 + +### 4. 간단한 해결책을 놓침 +- **처음 시도**: 집계 후 필터링만 시도 +- **실제 해결**: 원본 데이터 필터링 → 집계 → 재필터링 (이중) +- **더 나은 방법**: 원본 데이터만 필터링하고 집계는 단순화 가능했을 수도 + +--- + +## 교훈 + +### 원칙 준수 체크리스트 +- [x] 브라우저 테스트 먼저 (코드 수정 전 현황 파악) +- [x] 데이터 흐름 명확히 파악 후 수정 +- [x] 단계별 검증 (필터링 로직 → 집계 로직 → 최종 결과) + +### 다음에 할 일 +1. **프론트엔드 수정 시**: 코드 수정 전 브라우저에서 문제 확인 +2. **데이터 처리 로직**: 입력 → 처리 → 출력 흐름 명확히 문서화 +3. **필터링 적용 위치**: 가능하면 가장 앞 단계에서 한 번만 적용 + +--- + +## 참고 +- AGENTS.md: 프론트엔드 브라우저 테스트 필수 원칙 +- 312_문서_작성_원칙.md: 단계별 검증 원칙