1. 내가 생각한 계산기 만들기 코드

const numClick = (numString) => {
    // 첫 번째 클릭된 버튼이 0인지 아닌지 판별한다.
    if(numString === "0") {
        // 첫 번째 클릭된 버튼이 0이면 화면 0만 출력한다. 
        input.innerText = numString;
    }
    else {
        // 심볼이 클릭될 때까지 클릭된 숫자들을 화면에 출력한다. 
        input.innerText += numString
    }
}

여기서 여러가지 문제가 발생했다!!
1. 첫 번째 숫자를 저장하고 두 번째 숫자를 어떻게 구하고 저장해야지?
2. 연산자를 클릭하고 그 값을 어디다 저장하지?
이 문제를 도저히 해결할 수 없어 많은 시간을 낭비했고 결국 다른 사람의 로직을 보고 다시 만들어 보았다.

---

2. 다른 사람의 로직을 참고한 코드

const buttons = document.querySelectorAll(".buttons div"),
paintNum = document.querySelector(".input");

let buffer = "0", //화면에 출력될 숫자를 저장
runningTotal = 0, // 첫 번째 수를 저장하고, 사칙연산의 결과를 저장한다.
previousOperator; // 클릭된 연산자를 저장한다.

const felshOperation = (intBuffer) =>  {
    if(previousOperator === "+") {
        runningTotal += intBuffer;
    }
    else if(previousOperator === "-") {
        runningTotal -= intBuffer;
    }
    else if(previousOperator === "÷") {
        runningTotal /= intBuffer;
    }
    else if(previousOperator === "x") {
        runningTotal *= intBuffer;
    }
}

const handleMath = (simbol) => {
    // buffer(숫자)에 저장된 값이 0 이면 함수 탈출
    if(buffer === "0"){
        return;
    }
    // 계산될 숫자가 저장되어 있는지 없는지 판별한다.
    if(runningTotal === 0) {
        // 첫 번째 수를 저장한다.
        runningTotal = parseInt(buffer);
    }
    else {
        // 계산될 숫자가 있으므로 계산에 활용될 felshOperation 함수 실행
        felshOperation(parseInt(buffer));
    }
    // 클릭된 연산자를 저장한다.
    previousOperator = simbol;
    // 다음 수를 입력받기 위해 buffer 0으로 초기화
    buffer = "0";
}

const simbolClick = (simbol) => {
    // 어떤 심볼이 클릭된지 판별한다. 
    switch(simbol) {
        // C가 클릭되면
        case "C":
            // 모든 계산을 지우고 화면에 0을 출력한다. 
            buffer = "0"; 
        // =이 클릭되면
        case "=":
            // 저장된 연산가 없으면 함수 탈출
            if(previousOperator === null) {
                return;
            }
            // 두 번째 숫자를 인자로 가진다.
            felshOperation(parseInt(buffer));
            // 계산될 결과가 buffer에 저장된다.
            buffer = runningTotal;
            // 다음 계산을 위해 runningTotal, previousOperator 초기화
            runningTotal = 0;
            previousOperator = null;
            break;
        // ÷, x , - , + 중 하나가 클릭되면 handleMath함수 실행
        case "÷":
        case "x":
        case "-":
        case "+":
            handleMath(simbol);
            break;
    }
}

const numClick = (numString) => {
    // 첫 번째 클릭된 버튼이 0인지 아닌지 판별한다.
    if(buffer === "0") {
        // 첫 번째 클릭된 버튼이 0이면 화면 0만 출력한다. 
        buffer = numString;
    }
    else {
        // 심볼이 클릭될 때까지 클릭된 숫자들을 화면에 출력한다. 
        buffer += numString
    }
}

const buttonClick = (event) => {
    const buttonValue = event.target.innerText; // 클릭된 태그의 innerText

    // 클릭된 버튼이 숫자인지 심볼인지 판별한다. 
    if(isNaN(buttonValue)) {
        // 클릭된 버튼이 심볼이면
        simbolClick(buttonValue);
    }
    else {
        // 클릭된 버튼이 숫자이면
        numClick(buttonValue);
    }
    //클릭된 숫자가 화면에 출력된다.
    paintNum.innerText = buffer;
}

// 버튼 태그들에게 클릭 이벤트가 발생하면 buttonClick 함수 실행!!
buttons.forEach(button => {
    button.addEventListener("click", buttonClick);
});

나와 다른 점!!
1. let buffer = "0", //화면에 출력될 숫자를 저장
runningTotal = 0, // 첫 번째 수를 저장하고, 사칙연산의 결과를 저장한다.
previousOperator; // 클릭된 연산자를 저장한다.
위 와 같이 변수를 설정했다는 것이다. 나는 innerText를 활용하여 숫자와 연산을 할려고 했다.
이 점이 가장 달랐다. 이를 통해 전역 변수를 잘 활용해야겠구나 깨달았다...
2. 다른 사람의 코드는 buffer라는 변수를 통해 마지막에 한 줄로 innText하여 화면에 출력하지만. 나는 바로바로 innText를 활용하여 숫자를 출력했다.

---

3. 실행화면

4. 느낀점

일단 계산기는 정말 혼자 내 힘으로 만들어보고 싶었지만 혼자 만들 수 있을 줄 알았다.
하지만 은근히 신경써야 될께 많았다. 신경써야 될께 많았다는건 그 만큼 내가 배울 수 있었던게 많았다고 생각한다. 또 js 언어 익히는것도 집중해야겠지만 문제를 해결하는 능력도 키워야겠다고 생각했다.