📝 [250321~0325/오답노트] 자바스크립트 4일 걸린 계산기 만들며 겪은 오답노트

조별과제로 만든 계산기...! 다행히 코드는 각자 짰지만 서로 상부상조하며 짰다.

다행히 구성단계가 있어 코드짜는 거에는 어려움이 없었지만, 요구사항들이 있어서 머리가 아팠다..

4일걸려 만든 내 계산기 기록을 적어보겠다..!

💡 목표

HTML, CSS, JavaScript를 활용해
기본적인 사칙연산이 가능한 계산기를 만들기.

✅ 전체 구성 요약

• 숫자 버튼: .number
• 연산자 버튼: .operator
• 기능 버튼(C, ±, %): .function
• 디스플레이: .num_text

버튼은 querySelectorAll로 가져와 forEach()를 이용해 반복 처리했고,
상태 관리는 firstOperand, operator, newNumber라는 3개의 변수로 만듬.

🧩 1. 상태 저장 변수 헷갈림

❌ 오답

let firstOperand;

✅ 정답과 개념

let firstOperand = null;
let operator = null;
let newNumber = false;

• firstOperand: 연산을 위해 첫 번째 숫자 저장
• operator: 누른 연산자 기호 저장
• newNumber: 연산자 누른 다음 숫자 입력할 때 덮어쓸지 이어붙일지 판단
• 사실 오타다.......

🧩 2. 숫자 입력 흐름 오류

❌ 문제 상황

• 연산자 누른 뒤 숫자를 누르면 숫자가 이어붙음
  예: 5 + 2 누르고 싶었는데 52 됨

✅ 원인

• newNumber 상태관리를 안 해줬음

if (newNumber) {
  numberDisplay.textContent = clickedValue;
  newNumber = false;
} else {
  if (numberDisplay.textContent === "0") {
    numberDisplay.textContent = clickedValue;
  } else {
    numberDisplay.textContent += clickedValue;
  }
}

👉 newNumber가 true면 새로 입력 false면 기존 숫자에 이어붙이기

🧩 3. 계산이 안 되는 문제

❌ 문제

• = 버튼을 눌렀는데 계산이 안 됨

✅ 원인

• 연산자, 숫자 저장 안 돼 있음
• 계산 함수 없음

✅ 해결 코드 흐름

if (clickedOperator === "=") {
  if (operator && firstOperand !== null) {
    const secondOperand = parseFloat(numberDisplay.textContent);
    let result = calculate(firstOperand, operator, secondOperand);
    numberDisplay.textContent = result;
    firstOperand = result;
    operator = null;
    newNumber = true;
  }
  return;
}

🧩 4. 계산 로직 하드코딩

❌ 오답

if (operator === "+") {
  numberDisplay.textContent = firstOperand + secondOperand;
}

• 계산 로직이 중복되고 복잡해짐

✅ 정답: calculate() 함수로 분리

function calculate(firstOperand, operator, secondOperand) {
    if (operator === "+") {
        return firstOperand + secondOperand;
    } else if (operator === "-") {
        return firstOperand - secondOperand;
    } else if (operator === "*") {
        return firstOperand * secondOperand;
    } else if (operator === "/") {
        return firstOperand / secondOperand;
    }
    return secondOperand;
}

• 계산은 조건문으로 분리
• return으로 결과를 보냄

✅ 배우고 느낀 점

• 계산기 만들기는 단순한 숫자 연산이 아니라,
  입력 흐름 + 상태 관리 + 조건 처리 + 함수 분리까지 연습되는 구조적인 과제였다.
• 특히 변수 하나(newNumber)가 얼마나 흐름 제어에 중요한지 알게 되었음.
• 함수로 분리하면서 코드의 재사용성과 가독성이 좋아졌음을 체감했다.