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

eval 함수 없이 계산기 만들기 프로젝트 1일차

프로젝트를 시작한 계기

저는 주로 vue 혹은 앵귤러를 사용을 많이 하거나, 혹은 하이브리드 앱을 개발할때는 아이오닉,capacitor 와 같은 라이브러리를 사용을 하여 개발을 많이 했었습니다, 간편하고 좋은 프레임워크 이면서 라이브러리 이기는 하나 너무 간편한 나머지는 본래에 자바스크립트(바닐라자바스크립트) 에 이해도가 많이 떨어지는 거 같아 이전에 배운 자바스크립를 복습 진행하고있었는데, 자바스크립트 내부 함수인 eval 함수를 더이상 사용하지 말라는 글을 보고 흥미가 생겨 eval 함수 없이 계산기 만들기 프로젝트를 시작했습니다

eval 함수는 무엇이고 왜 사용을 하면 안되나?

eval 함수는 문자열을 코드로 인식하게 하는 함수입니다

예를 들어 eval('2+2') 를 실행했을경우 일반적인 문자열 출력(2+2) 가 아닌 숫자 4가 출력이 될수있도록 해주는 함수입니다

간단하게 설명드리면 eval 함수를 사용시 취약점이 발생하고 eval 함수 없이도 충분히 로직을 구현할수 있기에 큰 리스크를 감수 하면서 쓸필요는없습니다

1일차 작업 내용

오늘은 html과 css 로 기본적인 계산기 폼을 구현하고, 바닐라 자바스크립트로 연산자와 피연산잔에 클릭 이벤트 연결까지 작업하였습니다

1. html

<html>
    <head>
        <title>계산기</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="calculator">
            <div class="calculator_result">
               <p id="calculator_result_text">11</p>
            </div>
            <table class="calculator_form" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="3">AC</td>
                    <td class="operator">&divide</td>
                </tr>
                <tr>
                    <td class="operand">7</td>
                    <td class="operand">8</td>
                    <td class="operand">9</td>
                    <td class="operator">&times</td>
                </tr>
                <tr>
                    <td class="operand">4</td>
                    <td class="operand">5</td>
                    <td class="operand">6</td>
                    <td class="operator">&#45;</td>
                </tr>
                <tr>
                    <td class="operand">1</td>
                    <td class="operand">2</td>
                    <td class="operand">3</td>
                    <td class="operator">&#43;</td>
                </tr>
                <tr>
                    <td colspan="2" class="operand">0</td>
                    <td class="operand">&#46;</td>
                    <td class="operator">&#61;</td>
                </tr>
                
            </table>
        </div>
    </body>
    <script src="script.js"></script>
</html>

2. css(scss)

.calculator{
    .calculator_result{
        width: 200px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: right;
        border: 1px solid #ddd;
        box-sizing: border-box;
        p{
            margin: 0;
            font-size: 28px;
            color: #2E64FE;
            padding-right: 10px;
        }
    }
    .calculator_form{
        width: 200px;
        tr{
            td{
                cursor: pointer;
                font-size: 24px;
                background: #E6E6E6;
                text-align: center;
                padding-top: 18px;
                padding-bottom: 18px;
                border: 1px solid #ddd;
                &:hover{
                    background: #A4A4A4;
                }
            }
            td.operator{
                background: #2E64FE;
                color: #fff;
                &:hover{
                    background: #5882FA;
                }
            }
        }
    }
}

3. javascript

// eval 를 사용하면 더 간단하게 구현이 가능하지만
// 함수 성능,보안,디버깅의 문제가 있다

let operatorEl = document.getElementsByClassName("operator");
let operandEl = document.getElementsByClassName("operand");
let resultEl = document.getElementById("calculator_result_text");


let operatorClick = function(event){
    switch(event.target.textContent){
        case "÷":
            console.log("devic");
            break;
        case "×":
            console.log("times");
            break;
        case "-":
            console.log("마이너스");
            break;
        case "+":
            console.log("플러스");
            break;
        case "=":
            console.log("결과");
            break;
        default:
            console.log("OperatorErr");
    }
    resultEl.textContent = event.target.textContent;

}

let operandClick = function(event){
    resultEl.textContent = event.target.textContent;
}

for(let i = 0; i < operatorEl.length; i++){
    operatorEl[i].addEventListener("click",operatorClick,false);
}
for(let i = 0; i < operandEl.length; i++){
    operandEl[i].addEventListener("click",operandClick,false);
}

4. 결과 화면

5. 작업내용

우선 HTML에서 기본적인 폼을 구성하였습니다

계산기에 일반적인 형태는 상단에 결과 값, 하단에 연산자와 피연산자 버튼이 존재하는 구성이며

해당 구성을 잡기 위해 div 와 table를 사용하여 구조를 잡아두었습니다

그 다음으로는 css 작업을 진행하였으며, css를 더 보기 쉽게 작업하기 위해 scss로 작업을 진행하였습니다

상단 결과 값 부분과 하단 테이블 부분의 스타일을 적용하였습니다

이후 바닐라 자바스크립트를 이용해 각 버튼 과 결과 텍스트에 대한 이벤트 연결을 진행하였습니다

버튼 같은경우는 operand(연산자), operator(피연산자) 클래스로 구분하였으며

각 버튼에 click 이벤트를 연결 시킨후, 결과 텍스트에 확인할수 있도록 하였습니다

1일차를 마치며

프레임워크를 사용하다보면 익숙함에 적응이 되어 본래 자바스크립트가 가지고 있던 원리를 잊을때가 많은거같습니다 오늘 작업을 진행하면서 vue로 개발을 시작했다면 더 빠르게 할수 있었을텐데 라는 생각이 들기는했지만 자바스크립트의 아이디 선택, 클래스 선택이 내부적으로 어떤식으로 진행되는지 명확히 알수있었습니다. 이후 작업으로는 실제 연산 작업 진행과, AC(All Clear) 기능 작업을 진행하도록 하겠습니다

'javascript' 카테고리의 다른 글

Node Js,Vue - SocketIo 세팅 (0)	2022.05.22
Node JS JWT Token (0)	2022.05.14
Node js Crypto 모듈 로그인 (0)	2022.05.11
단방향 암호화 와 Nodejs Crypto 모듈 (0)	2022.05.08
eval 함수 없이 계산기 만들기-2일차 (0)	2022.04.10