[JavaScript] 계산기 기능 구현

const calculator = document.querySelector(".calculator");
const buttons = calculator.querySelector(".calculator__buttons");
const firstOperend = document.querySelector(".calculator__operend--left");
const operator = document.querySelector(".calculator__operator");
const secondOperend = document.querySelector(".calculator__operend--right");
const calculatedResult = document.querySelector(".calculator__result");

function calculate(n1, operator, n2) {
  let result = 0;
  let num1 = Number(n1);
  let num2 = Number(n2);

  if (operator === "+") {
    result = num1 + num2;
  } else if (operator === "-") {
    result = num1 - num2;
  } else if (operator === "*") {
    result = num1 * num2;
  } else if (operator === "/") {
    result = num1 / num2;
  }

  return String((calculatedResult.textContent = result));
}

buttons.addEventListener("click", function (event) {
  const target = event.target;
  //이따 콘솔로 각각 찍어보자,숫자 0번 버튼,
  // console.log("target은", target);
  const action = target.classList[0];
  // console.log("action은", action);
  const buttonContent = target.textContent;
  // console.log("버튼콘텐츠는", buttonContent);
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.
  // 아래함수는 클릭하는 버튼의 종류에 따라 각기 다른 함수를 작동시킨다.

  if (target.matches("button")) {
    if (action === "number") {
      if (firstOperend.textContent === "0") {
        firstOperend.textContent = buttonContent;
      } else {
        secondOperend.textContent = buttonContent;
      }
      // console.log("숫자 " + buttonContent + " 버튼");
    }

    if (action === "operator") {
      operator.textContent = buttonContent;
    }

    if (action === "decimal") {
      //console.log("소수점 버튼");
    }

    if (action === "clear") {
      console.log("초기화 버튼");
      //첫번째 자리 리셋
      firstOperend.textContent = 0;
      //연산자 리셋
      operator.textContent = "+";
      //세번째 자리 리셋
      secondOperend.textContent = 0;
      //결과창 리셋
      calculatedResult.textContent = 0;
      //유저플로우 결과장 리셋
      display.textContent = 0;
    }

    if (action === "calculate") {
      console.log("계산 버튼");
      // = 버튼이 눌러지면 칼큐레이트 함수가 작동되고, 그 안에 전달되는 요소는 첫번째, 연산자, 두번째 자리수이다.
      calculate(
        firstOperend.textContent,
        operator.textContent,
        secondOperend.textContent
      );
    }
  }
});

// ! Advanced Challenge test와 Nightmare test를 위해서는 아래 주석을 해제하세요.

const display = document.querySelector(".calculator__display--for-advanced");
let firstNum; //계산기에서 보여줄 첫번째 숫자
let operatorForAdvanced; // 이전에 입력한 연산자 기호를 저장
let previousKey; // 이전에 누른 버튼이 숫자/연산자 인지 저장
let previousNum;

buttons.addEventListener("click", function (event) {
  const target = event.target;
  const action = target.classList[0];
  const buttonContent = target.textContent;
  // ! 위 코드는 수정하지 마세요.

  // ! 여기서부터 Advanced Challenge & Nightmare 과제룰 풀어주세요.
  if (target.matches("button")) {
    if (action === "number") {
      if (display.textContent === "0" && operatorForAdvanced === "") {
        display.textContent = buttonContent;
        firstNum = display.textContent;
      } else if (display.textContent !== "0" && operatorForAdvanced === "") {
        display.textContent = display.textContent + buttonContent;
        firstNum = display.textContent;
      } else if (display.textContent !== "0" && operatorForAdvanced !== "") {
        if (previousKey === operatorForAdvanced) {
          // 연산자 + 넘버 버튼을 누른 경우,
          // 디스플레이 창은 방금 누른 넘버 버튼으로 바꾸고
          display.textContent = buttonContent;
          // 프리비어스 키에 => 방금 누른 넘버 버튼 값으로 바꾼다.
          previousKey = display.textContent;
          // 프리비어스 넘버에 => 방금 누른 넘버 버튼 값 넣는다.
          previousNum = display.textContent;

          console.log("연산자+숫자btn=> 프리비어스 key :", previousKey);
          console.log("연산자+숫자btn=> 프리비어스 Num : ", previousNum);
        } else if (previousKey !== operatorForAdvanced) {
          //두번째 숫자를 누를때, 값을 이어서 받는다.
          display.textContent = display.textContent + buttonContent;
          //프리비어스 넘버도 결과값으로 갱신한다.
          previousNum = display.textContent;
        }
      }
    }
    if (action === "operator") {
      // 방금 누른 버튼이 오퍼레이터라면,
      operatorForAdvanced = buttonContent;
      previousKey = operatorForAdvanced;
      console.log("연산자btn => 프리비어스 key : ", previousKey);
      console.log("연산자btn => 오퍼레이터 key :", operatorForAdvanced);
    }
    if (action === "decimal") {
    }
    if (action === "clear") {
      display.textContent = "0";
      firstNum = "";
      previousNum = "";
      operatorForAdvanced = "";
      previousKey = "";
    }
    if (action === "calculate") {
      if (firstNum !== "" && operatorForAdvanced === "") {
        display.textContent = firstNum;
      } else if (firstNum !== "" && previousNum === "") {
        display.textContent = calculate(
          display.textContent,
          operatorForAdvanced,
          display.textContent
        );
      } else if (previousKey === display.textContent) {
        display.textContent = calculate(
          firstNum,
          operatorForAdvanced,
          previousNum
        );
      } else if (previousKey !== display.textContent && previousNum === "") {
        display.textContent = firstNum;
      }
    }
  }
});

사전에 넘겨준
operatorForAdvanced
previousNum
previousKey 에 대해서 이해가 안되서
일요일 오전 내내 돌려보고
콘솔에 찍어보고 별짓을 다한 결과
ㅠㅠ 이해가 간다.
옆에 주석처리로 텍스트 해놨으니
내일 다시 봐야겠어
이제 장보러 간다 으아!!