일반 계산기 만들기

나름대로 열심히 디자인한 계산기

---

일반 계산기 모습

Javascript

---

결과값이 출력되는 이 div 부분의 id를 result로 설정해두었으며,

민트색으로 된 숫자버튼에는 add()함수를,

노란색의 연산 기호에는 operate()함수를 onclick 이벤트 리스너로 묶어두었다.

const result = document.querySelector('#result')

function add() {
    const number = Number(event.target.innerText)
    result.value += number
}

결과값이 출력되는 result div박스를 result 변수로 설정해두었다.

add함수에는 숫자 버튼을 클릭 시 클릭된 버튼에 저장된 숫자 (event.target.innerText)
를 정수 형태로(Number) number변수에 담았고 result 에 값이 나타나게 설정하였다.

• Number(value)형태로 사용시 value 값을 정수로 반환하고, 반환하지 못했을 시 NaN을 반환한다.
  
  

const operate = () => {
    const operator = event.target.id
    switch (operator) {
        case 'reset':
            result.value = ''
            break
        case 'convert':
            result.value = -result.value
            break
        case 'percent':
            result.value /= 100
            break
        case 'addition':
            result.value += '+'
            break
        case 'divide':
            result.value += '/'
            break
        case 'multiply':
            result.value += '*'
            break
        case 'subtraction':
            result.value += '-'
            break
        case 'dot':
            result.value += '.'
            break
        case 'equal':
            try {
                result.value = eval(result.value)
                break
            } catch (e) {
                //예외 처리
                result.value = 'ERR'
            }
    }
}

opeate 함수도 add와 동일하게 클릭 시 result에 값을 나타내는 함수이다.

모든 값이 담겨지고 결과 값을 출력할 때 '='를 누르게 되며, 그 결과는
를 정수 형태로 eval를 이용하여 값이 나타나게 함수를 만들었다.

• eval() 함수는 문자열로 저장된 값을 javascript로 동작하게 만드는 함수이다.

eval 함수를 사용하는 것은 보안상으로 위험하기 때문에 사용하는 것을 지양해야 한다고 멘토님께서 말씀하셨다.

그 후 eval로 인해서 계산이 안되는 경우 ( 연산기호만 연속해서 사용하거나, 계산할 수 없는 식이 적혀있을 경우) 'ERR'가 result에 출력되도록 하였다.

Review

---

멘토님의 말씀을 듣고 eval함수를 사용하지 않겠다는 굳을 결심을 갖고 다시 함수를 만드려 하였으나, 아직 javascript를 배운 지 2주가 된 코린이는 방법을 찾지 못하였습니다.. 여러 구글링을 해보았지만 저의 머리로는 이해할 수 없는 로직이 많았기에 지금은 물러나지만 꼭 기회가 되었을 때 eval없는 계산기를 완성시킬 겁니다. 두고보자