eval 함수 없이 계산기 만들기-2일차

eval 함수 없이 계산기 만들기 - 2일 차

eval 함수를 사용하지 않고 자바스크립트 계산기 만들기 2일 차입니다 1일 차에서 작업 예정이었던 실제 계산 로직과, AC(All Clear) 기능을 구현하였으며, 작업 내용은 아래 깃에서 확인 가능합니다
https://github.com/jungHyeonS/Calculator

2일 차 작업 내용

2일차 작업 같은 경우는 주로 자바스크립트에서 작업을 진행하였습니다
우선 실제 계산 로직을 구현하기에 앞서 바로 코드로 짜는 게 아닌 필요한 기능과 구조를 정리해보았습니다

1. 연산자와 피연산자를 입력받고 '=' 버튼 클릭 시 실제 계산이 되어야 한다
2. 피연산자가 없는 상황에서 연산자는 클릭했을 경우 연산자가 출력이 되어선 안된다
3. AC버튼 클릭 시 모든 데이터가 초기화되어야 한다
4. AC버튼을 클릭하기 전까지는 이전에 계산되었던 결과에서 이어서 계산이 진행되어야 한다

이러한 구조를 정리 한 이후에 결과를 보여 주는 함수, 실제 계산이 진행되는 함수, AC함수 총 3개의 함수를 추가적으로 만들었습니다

1. 변수 초기화

//변수 초기화
let operatorEl = document.getElementsByClassName("operator");
let operandEl = document.getElementsByClassName("operand");
let resultEl = document.getElementById("calculator_result_text");
let subResultEl = document.getElementById("calculator_sub_result_text");
let acEl = document.getElementById("allClear");

let resultText = "";
let isOperator = false;
let currentOperand = "";
let prevOperand = "";
let currentOperator = "";

변수 초기화 부분입니다, 버튼과 화면 표시로 엘리먼트들을 초기화하고
계산기 구현에 있어 필요한 변수들의 초기화를 진행합니다

2. 피연산자 클릭 이벤트

//피연산자 클릭 이벤트
let operandClick = function(event){
    if(event.target.textContent == "." && currentOperand.includes(".")){
        alert("잘못된 숫자 입니다.");
        return false;
    }
    isOperator = true;
    currentOperand += event.target.textContent;
    setResultText(event.target.textContent);
}

피연산자 클릭이벤트입니다 1일 차에 선언했던 이벤트 리스너 부분을 수정했습니다
계산기 특성상 소수점 입력 시 소수점이 두 번이 들어가는 숫자는 존재하면 안 되기에 예외처리를 넣어두었습니다
(ex 3.. 5와 같은 숫자는 입력이 불가능합니다)
이후 피연산자 입력 후 연산자 가 입력이 되어야 되기 isOperator를 true로 바꿔주고
현재 피연산자에 입력된 값을 넣어줍니다

3. 연산자 클릭 이벤트

//연산자 클릭 이벤트
let operatorClick = function(event){
    if(event.target.textContent == "="){
        equls();
        return false;
    }
    currentOperator = event.target.textContent;
    if(isOperator){
        prevOperand = currentOperand;
        currentOperand = "";
        setResultText(event.target.textContent);
        isOperator = false;
    }
}

연산자 클릭이벤트입니다 연산자에는 '=' 버튼도 존재하기에
'=' 버튼이 클릭되었을 경우는 equls라는 함수가 실행될 수 있도록 조건문을 걸어주고
그 외에는 조건문 아래 로직을 탈 수 있도록 하였습니다

현재 클릭한 피연산자를 currentOperator 변수에 담아주고
피연산자가 클릭 이후에 연산자가 입력될 수 있도록 isOperator 가 true일 때만 실행되게 해 두었습니다
이후 연산자가 입력이 다된 이후에 피연산자가 입력이 되어야 되기에
현재 연산자(currentOperand)는 prevOperand 변수에 담아주고 currentOperand 변수는 초기화시켜줍니다

4. equls 함수, setResultText 함수

// 화면 표시
let setResultText = function(text){
    resultText += text;
    resultEl.textContent = resultText;
}


// 계산식 로직
let equls = function(){
    let completeResult = "";
    let prevNumber = Number(prevOperand);
    let currentNumber = Number(currentOperand);
    switch(currentOperator){
        case "÷":
            completeResult = prevNumber / currentNumber;
            break;
        case "×":
            completeResult = prevNumber * currentNumber;
            break;
        case "-":
            completeResult = prevNumber - currentNumber;
            break;
        case "+":
            completeResult = prevNumber + currentNumber;
            break;
        default:
            console.log("operator err");
            break;
    }
    currentOperand = completeResult;
    resultText = completeResult.toString();
    subResultEl.textContent = `${prevNumber} ${currentOperator} ${currentNumber}`;
    resultEl.textContent = completeResult;
    currentOperator = "";
}

setResultText -

setResultText 함수는 실제 화면에 클릭한 값들이 나올 수 있도록 이전에 선언한 결과 엘리먼트에 값을 표기해주는 역할을 하고 있습니다

equls -

'='버튼을 클릭했을 때만 실행이 되는 함수이며 실제 계산식 로직이 진행되는 함수입니다
우선 지금까지 입력받은 currentOperand, prevOperand 변수는 문자열 값으로 되어 있기에
해당 변수들을 숫자(Number) 형으로 변경해줍니다

이후 현재 입력받은 연산자를 switch case 문을 사용해서 입력받은 연산자 별로 실제 사칙연산을 진행합니다

이후 계산기 완료가 된 이후 완전히 계산기 끝내 지는 게 아닌
AC버튼을 클릭하기 전까지는 유지가 되어야 되기에
currentOperand 변수에 계산 결과 값을 넣어주고
currentOperator변수를 초기화시켜줍니다

'=' 버튼이 클릭이 되었기에 사용자가 봤을 때 화면에 결과 값이 나올 수 있도록 이전에 초기화했던 엘리먼트들에 값을 표기해줍니다

5. allClear

//AC 로직
let allClear = function(){
    resultText = "0";
    isOperator = false;
    currentOperand = "";
    prevOperand = "";
    currentOperator = "";
    resultEl.textContent = resultText;
    subResultEl.textContent = "";
}

acEl.addEventListener("click",allClear,false);

AC 버튼을 클릭했을 때 동작하는 이벤트입니다
간단히 이전에 선언되었던 변수들을 모두 초기화하고
사용자에게도 다 초기화되었다고 알려줘야 되기에 html 값 초기화도 같이 넣어두었습니다

결과 화면

 

2일 차를 마치며

오늘은 실제 계산 로직과 AllClear 기능을 구현하였습니다
eval함수를 사용한다면 더 간단히 구현을 할 수 있었겠지만 eval함수 없이도 충분히 구현이 가능했었고, 계산기 로직을 확실히 알 수 있었던 거 같습니다
블로그 포스팅을 쓰면서 코드들을 다시 봤는데 불필요한 코드들이 몇몇 개 보이는 거 같아 개발이 다 완료되면 코드 정리하는 시간을 가지면 좋을 거 같습니다