쌀집 계산기보다 핸드폰 계산기에 익숙해져 버린 내가 만든 웹 계산기 (feat. 버전의 중요성)

이예빈·2022년 7월 7일

CSS JavaScript calculator html pairprogramming version 계산기

JavaScript

목록 보기

9/26

나는 왕초보 코더이기 때문에 이번 웹 계산기는 이미 만들어져 있는 틀과 변수들을 깔아놓고 시작했다.

변수들은 선언만 되어있고 할당하는 작업은 나와 페어가 함께 진행했다.

이번 과제는 크게 세 단계의 테스트를 거쳐야 했다.

Bare Minimum test

Advanced Challenged test

Nightmare test

과제의 목표는 1차 Bare minimum test를 통과하는 것이었고 나머지 테스트는 할 수 있는 사람만 도전하는 형식이었다.

1. 웹 계산기 (ver. 1.0.0)👭

1.0.0 버전은 처음 페어와 함께 작업한 버전이다.
이 버전은 Bare minimum test와 Advanced Challenged test를 모두 통과하였고 Nightmare test의 마지막 문제는 통과하지 못하였다.

두둥....😬

한정된 페어 프로그래밍 시간 안에 모두 푸는 데에 실패했다.

테스트 식을 보면 앞에 +와 -가 있고 뒤에 /와 *가 있었기 때문에
나는 실패의 이유가 사칙연산의 우선순위 때문일 것이라고 생각했다.

우선 정해진 과제 제출 시간이 있었기 때문에 이 버전을 깃헙에 제출하였다.

2. 웹 계산기 (ver. 1.1.0)🤯

1.1.0 버전은 페어 프로그래밍 시간 이후에 나 혼자 진행하였다.
앞서 Nightmare test를 통과하지 못한 원인이 사칙연산의 우선순위라고 생각했기 때문에
나는 formula라는 새로운 변수를 하나 추가하였다.

let formula = ''; // 계산식을 담을 변수

계산식을 모두 입력하고 enter버튼을 눌렀을 때
formula에 입력된 계산식을 한번에 모아 계산하는 방식으로 진행하고자 했다.

if (action === 'calculate') {
      if(특이한 경우){
        - 중략 -
      } else {
        previousNum = display.textContent;
        display.textContent = eval(formula);
      } - 후략 -
}

이 때 eval()이라는 함수를 사용하였다.

🚨eval() 주의🚨

eval() 함수를 사용하는 것은 매우 위험할 수 있으므로 사용을 지양할 것으로 권장되는 함수이다. eval()보다는 function을 작성하여 실행하는 것이 이상적이라고 한다. (속도 면에서나 보안 면에서나...)
~~나는 어떻게든 빨리 풀어보고 싶기도 하고 조그마한 단순 계산기 프로그램이라서 한번 써 보았는데 앞으로 쓸 일은 없을 것이다...~~

아무튼.

결과는..

꾸궁....ㅠㅠ..........
당연히 핸드폰 계산기처럼 한꺼번에 계산해줘야하는 줄 알았는데
그게 아니었던 것이었다.

생각해보니 쌀집 계산기는
사칙연산 기호를 누를 때마다 앞의 값을 계산해서 보여준다는 것이 떠올랐다.

~~쌀집 계산기는 중학교 이후로 써본 적이 없는 것 같은데..~~
아무튼 문제가 원했던 것은 이 쌀집계산기라는 것이었다.

결국 그래서 야심차게 추가한 formula변수와 eval()은
커밋의 저 뒷편에 보내버리고 다시 1.0.0 버전을 다운 받았다.

3. 웹 계산기 (ver. 1.0.1)👊💥

1.1.0 버전을 날려버리고 사칙연산을 입력했을 때 조건을 달아줬더니
드디어 Nightmare test의 마지막 문제도 해결이 되었다..!!!

if (action === 'operator') {
	if(operatorForAdvanced !== undefined && previousKey !== 'calculate' && previousKey !== 'operator'){
		firstNum = calculate(firstNum, operatorForAdvanced, display.textContent);
		display.textContent = firstNum;
	}
	operatorForAdvanced = buttonContent;
	previousKey = 'operator';
	firstNum = display.textContent;
}