일부러 이상하게 써보니 나온 것 — 업종별 비교 + 엣지 케이스 점검

한 줄 요약: 업종별 평균 수익률 카드를 새로 붙인 뒤, 대시보드의 입력·선택 지점들을 일부러 이상하게 써봤다(빈 값, 중간에 취소, 엉뚱한 값). 크래시는 없었지만 진짜 문제 2개를 찾아 바로 고쳤다.

이런 분께 도움돼요: 기능을 다 만들고 나서 “이제 뭘 확인해야 하지” 감이 안 잡히는 분, 정상 입력만 테스트해보고 넘어가곤 하는 분.

오늘 추가한 것

이미 계산돼 있던 종목별 수익률을 업종으로 묶어서 평균만 내는 업종별 평균 수익률 카드를 대시보드에 추가했다. 새 계산 로직이 거의 없어서 위험이 적은 기능이었다.

일부러 이상하게 써본 순서

기능이 아니라 입력 지점을 기준으로 훑었다 — 이 사이트에서 사람이 값을 직접 넣거나 고르는 곳은 “만약 계산기”(종목·날짜·금액)와 필터·정렬 드롭다운들이다.

1. 빈 값으로 넘기기 — 날짜 비우기, 금액 0/비우기
2. 엉뚱한 값 넣기 — 금액에 문자열(“abc”), 음수, 극단적으로 큰 수(10^20), 날짜 칸에 진짜 날짜가 아닌 문자열, 존재하지 않는 종목 코드
3. 중간에 취소하듯 바꾸기 — 정상 값 넣다가 다시 비우기, 선택지를 없는 값으로 강제로 바꾸기

찾은 것

크래시나 콘솔 에러는 하나도 없었다. 대부분은 브라우저의 기본 입력 검증(type="date", <select>)과 이미 짜둔 방어 코드(빈 값·0·음수 체크)가 막고 있었다.

고친 것

1. 종목별 그래프 빈 상태 안내 추가

function showSelectedChart() {
  const 선택 = symbolChartSelect.value;
  const 매칭됨 = symbolCharts.some((el) => el.dataset.종목 === 선택);
  symbolCharts.forEach((el) => {
    el.hidden = el.dataset.종목 !== 선택;
  });
  symbolChartEmpty.hidden = 매칭됨; // 매칭 안 되면 안내 문구 보여줌
}

2. 만약 계산기 결과에 콤마 포맷 적용

const 최종표시 = 최종.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
resultEl.textContent = `... 지금 $${최종표시} ...`;

배운 점 / 재사용 자산

• “입력 지점” 기준으로 훑으면 빠짐없이 확인된다 — 기능 단위가 아니라 “사람이 값을 직접 넣거나 고르는 곳”을 먼저 나열하고, 그 각각에 빈 값·엉뚱한 값·취소를 대입해보면 테스트 범위를 놓치지 않는다.
• 브라우저 기본 검증도 방어선이다 — type="date", <select>처럼 브라우저가 원래 막아주는 것과, 코드가 직접 막아야 하는 것(빈 문자열, 0, 음수, NaN)을 구분해서 보면 어디를 더 신경 써야 할지 보인다.
• “안 죽는다” ≠ “잘 처리한다” — 두 문제 다 크래시는 아니었다. 하나는 그냥 읽기 불편한 숫자, 하나는 조용히 비는 화면. 에러가 안 나는 것과, 사용자가 지금 상황을 이해할 수 있는 것은 다른 기준이다.

지금 여기서 직접 확인 가능: kevin-one-murex.vercel.app/dashboard