[FE/TypeScript] 계산기 오류 후 입력 초기화로 정상 복구 | 개발일지

분야: FE
기술 스택: React · TypeScript
관련 기술: 계산기 상태 전이 · 입력 처리 · 오류 복구 · 문자열 길이 제한

문제와 원인

계산 실패 뒤 expression은 남고 result만 빈 문자열이 됐다. 새 입력 분기가 result만 검사해, 1÷0 오류 뒤 5×5가 1÷05×5로 이어졌다. 이 식은 1÷5×5로 계산돼 1을 반환했다.

수정 전 코드

calculatorKey()

if (key === "=") {
  try {
    return { ...state, result: evaluateCalculation(state.expression), error: "" };
  } catch (error) {
    return {
      ...state,
      result: "",
      error: error instanceof Error ? error.message : "계산식을 확인해 주세요.",
    };
  }
}

let expression = state.expression;
if (state.result) {
  expression = /^[+−×÷%]$/u.test(key) ? state.result.replace(/^-/, "−") : "";
}

if(key==="⌫")return {expression:state.expression.slice(0,-1),result:"",error:""};
if(key==="±")return {expression:state.expression?`−(${state.expression})`:"−",result:"",error:""};
if(expression.length>=80)return state;

수정 후 코드

오류 뒤 숫자·소수점·여는 괄호를 입력하면 식을 비운다. ±도 새 음수 입력으로 시작한다. 지우기는 먼저 처리해 실패한 식을 한 글자씩 수정할 수 있게 했고, 80자 한도를 넘으면 안내 오류를 반환한 뒤 새 피연산자로 다시 시작하도록 했다.

calculatorKey()

if (key === "⌫") {
  return { expression: state.expression.slice(0, -1), result: "", error: "" };
}

if (key === "±") {
  const expression = state.error ? "" : state.expression;
  if (expression.length + 3 > 80) {
    return { ...state, result: "", error: "계산식이 너무 깁니다. 새 계산을 시작해 주세요." };
  }
  return { expression: expression ? `−(${expression})` : "−", result: "", error: "" };
}

if (!/^[\d.()+−×÷%]$/u.test(key)) return state;
let expression = state.expression;
if (state.error && /^[\d.(]$/u.test(key)) expression = "";
if (state.result) {
  expression = /^[+−×÷%]$/u.test(key) ? state.result.replace(/^-/, "−") : "";
}
if (/^[+−×÷]$/u.test(key) && /[+−×÷]$/u.test(expression)) {
  expression = expression.slice(0, -1);
}
if (key === "." && /\d*\.\d*$/u.test(expression)) return state;
if (expression.length >= 80) {
  return { ...state, result: "", error: "계산식이 너무 깁니다. 새 계산을 시작해 주세요." };
}
return { expression: expression + key, result: "", error: "" };

검증 결과

로컬 함수 비교에서 전후 calculatorKey에 같은 오류 상태·키 순서를 전달했다. 새 입력 4조건의 기대값 일치는 0/4 → 4/4, 지우기·C 초기화 2조건은 2/2를 유지했다.

입력 조건	기대 결과	수정 전	수정 후
`1÷0` 오류 뒤 `5×5`	25	1	25
`5+` 오류 뒤 `2+3`	5	10	5
`3+` 오류 뒤 `.5+.5`	1	4	1
`1÷0` 오류 뒤 `(2+3)`	5	계산 오류 유지	5
`1÷0` 오류 뒤 지우기 → `2`	0.5	0.5	0.5
`1÷0` 오류 뒤 C → `2+3`	5	5	5

같은 오류 상태·키 순서 6개를 원본 전후 함수에 다시 전달해 로컬 Node에서 각 1회 실행했다. 오류 뒤 숫자·소수점·괄호 입력은 새 계산 결과를 반환했고, 지우기와 C 입력은 기존 결과를 유지했다.

계산기 입력 6개: 새 계산 4개 수정과 초기화 2개 유지원본 보기 (새 창)