코드스테이츠 프론트엔드 부트캠프-Section1 계산기 제작(Feat. Nightmare)

그래도 아무튼 개발자·2023년 3월 10일
0

Front_End

목록 보기
4/12
post-thumbnail
if (target.matches('button')) {
    if (action === 'number') {
      if (display.textContent==='0' || previousKey==='operator') display.textContent=buttonContent;
      else display.textContent = display.textContent + buttonContent;
      previousKey = 'number';
    }
    if (action === 'operator') {
      if(previousKey==='operator') previousKey='operator';
      else if(previousKey==='calculate') previousKey='calculate';
      else if(firstNum) {
        display.textContent=calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent));
      }
      firstNum=display.textContent;
      operatorForAdvanced = buttonContent;
      previousKey='operator';
    }
    if (action === 'decimal') {
      if(previousKey==='decimal') previousKey='decimal';
      else if(display.textContent === '0' || previousKey==='operator') display.textContent='0.';
      else display.textContent = display.textContent + '.';
      previousKey='decimal';
    }
    if (action === 'clear') {
      display.textContent='0';
      firstNum=undefined;
      operatorForAdvanced=undefined;
      previousKey='clear';
    }
    if (action === 'calculate') {
      if (firstNum===undefined){
        previousKey='number';
      } 
      else if (previousKey=='calculate') {
        display.textContent=calculate(Number(display.textContent), operatorForAdvanced, Number(previousNum));
      }
      else {
        previousNum=display.textContent;
        display.textContent=calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent));
        previousKey='calculate';
      }
    }
  }

});

이전 글에서 위 코드로 Nightmare 단계까지 통과했다고 언급했다.
Nightmare가 뭘 테스트하길래 이렇게 간단한 프로그램이 코드가 길어진걸까...

어이가없다 허허

우선 대표적인 것들을 하나씩 살펴보면
실수 연산의 경우는 .입력을 구현하면 된다! 이전 Advance 단계에서는 실수 계산 단계를 검증하지 않았기에 .이 눌리든말든 통과가 되었다. 하지만 Nightmare에서는 다르다

if (action === 'demical') 조건문으로 display 텍스트콘텐트에 .을 추가하였다.

.

이후 아래를 보자

테스트를 살펴보면 일단 연산 이후 Enter를 누를 경우 거듭 연산이 진행되어야 하고, 연산 중간에 Enter를 누른 경우 아무런 동작이 없어야 한다.

if (action === 'calculate') {
      if (firstNum===undefined){
        previousKey='number';
      } 
      else if (previousKey=='calculate') {
        display.textContent=calculate(Number(display.textContent), operatorForAdvanced, Number(previousNum));
      }
      else {
        previousNum=display.textContent;
        display.textContent=calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent));
        previousKey='calculate';
      }
    }

firstNum에 아무런 값이 없는 경우 연산 중간임으로 previousKey는 Number로 두었다.
그리고 PreviousKey가 Calculate인 경우 연산 이후임으로 다시 거듭 연산을 실행하는 코드를 두었다.

나머지도 이와 비슷하게 구현하였다.
연산자를 연타로 누른 경우 그냥 PreviousKey='operator'로 계속 설정하면서 지나가도록, 소수점을 연타로 누른 경우에도 그냥 PreviousKey='demical'로 계속 설정하면서 그냥 지나가도록 설정하면 PreviousKey도 유지되고, 코드도 생각보다 간단하게 구현이 된다.

.

.

이로써 Nightmare 구현까지 완료!

0개의 댓글