Calculator

 

[왼]계산하고 싶은 식을 버튼을 누르면 [오]계산 결과가 나타난다

CHALLENGE

• 숫자 입력, 연산자 입력, 계산 수행, 결과 출력, 초기화

TOOL

• HTML, CSS, JS

 

function calculate(btnValue){
  if (btnValue === 'C'){ // 초기화
      output = ''
  }else if (btnValue === 'D'){ // 삭제
      output = output.slice(0, -1)
  }else if (btnValue === '%'){ // 퍼센트 계산
    output = eval(output) / 100
  }else if (btnValue === '='){ // 결과 도출
    output = eval(output)
  }else{ // if 조건을 충족 못하면 button 이벤트 발생 시점으로 돌아가고 충족하면 다음 연산 실행
    if (btnValue === '' && operator.includes(btnValue)) return
    output += btnValue
  }
  input.value = output
}

eval 함수를 사용하면 코드가 간단하지만 보안상 문제가 생기기 때문에 권장하지 않는다.

단순히 조건문을 가지고 판별하고 계산하면 끝 

---

KEEP

• 계산하고 싶은 수를 버튼을 통해 입력해서 연산 수행
• data-value 속성을 가지고 dataset.value을 통해 해당 값을 가져올 수 있다. 

<button class="number-button" data-value="3">3</button>

buttons.forEach((button) => {
	button.addEventListener('click', (e) => calculate(e.target.dataset.value))
})

 

PROBLEM

• eval함수는 보안상의 문제가 있어서 구현할 때는 간단하게 사용했지만 실제 계산기 만들 때는 권장하지 않는다.
• 그래서 직접 구현하는 방법을 시도해봤는데 계속 오류가 발생했다. 스택 알고리즘 중에 후위 표기법이 있는데 이 방법을 사용했다가 코드가 왜 작동이 안 되는 지도 모르겠어서 며칠을 잡고 있었지만 결국 미해결,, 일단 보류하고 나중에 다시 해봐야겠다.

TRY

• eval 함수를 사용하지 않고 직접 구현해 보기

https://github.com/winterkang/JavaScript-Challenge/tree/main/calculator

GitHub - winterkang/JavaScript-Challenge