[CodeStates-Section1]U7.간단한 웹앱 만들기

1.후기

계산기 만들기가 이렇게 어려운 줄 몰랐지... 하나 고치면 또 하나 오류 나는 코드 수정의 늪...

오늘 든 생각 1. 짧은 코드 vs. 이해하기 쉬운 코드
나는 변경해야 하는 변수만 재할당하는 방식으로 코드를 작성했는데 알려준 코드는 변수 재할당 식을 따로 작성하지 않고 직접 함수에 인자를 넣는 방식이었다. 그 방식은 내 방식과 코드 길이는 비슷하면서 다른 사람이 봤을 때 이해하기 쉬울 거 같았다. 그러면서 든 생각은 몇 날 며칠 고민해서 나온 논리적으로 문제없는 짧은 코드와 사고의 흐름에 따라 작성하여 이해하기 쉬운 코드 중에 무엇이 더 좋을까 궁금해졌다. 나는 리팩토링을 고려해 후자가 더 좋다고 생각하는데 무엇이 정답인지는 모르겠다.

오늘 든 생각 2. 처음부터 조건 분류를 잘하자.
당장 눈에 보이는 오류만 고치겠다고 닥치는 대로 조건을 추가하다가 꼬여서 싹 지우고 다시 시작해야 했다. 처음부터 모든 경우의 수를 따져서 빈틈없게 조건을 걸어야 일이 줄어든다는 것을 알았다.

2.새롭게 알게 된 것

Section1 Unit7 - 간단한 웹앱 만들기
과제1 - 계산기 구현하기
과제2 - user flow에 따라 기능 구현하기

<과제>

1)

//나
//내 코드의 문제점: 불필요한 코드 작성
if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      if (firstNum !== undefined && operatorForAdvanced !== undefined&& previousKey === 'number') {
  		previousNum = Number(display.textContent);
  		display.textContent = calculate(
    	  firstNum,
    	  operatorForAdvanced,
    	  previousNum
  		);
	  }
      firstNum = Number(display.textContent);
      operatorForAdvanced = buttonContent;
      previousKey = 'operator';
}

//Codestates 답안
//해결 방법: !== undefined 생략
if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      if (firstNum && operatorForAdvanced && previousKey === 'number') {
        previousNum = Number(display.textContent);
        display.textContent = calculate(
          firstNum,
          operatorForAdvanced,
          previousNum
        );
      }
      firstNum = Number(display.textContent);
      operatorForAdvanced = buttonContent;
      previousKey = 'operator';
}

2)

//나
//내 코드의 문제점: '.' 다중 입력 가능(ex. 50.86.5.4 입력 가능), 초기화 후 '.' 작성 안됨(초기화 + '.' + '5' => 0.5 돼야하는데 5 입력됨)
if (action === 'decimal') {
      if (previousKey === 'number') {
        display.textContent = display.textContent + '.';
      }
      if (previousKey === 'operator') {
        display.textContent = '0.';
      }
      previousKey = 'decimal';
}

//Codestates 답안
//해결 방법: Sting.includes()
//Codestates 답안의 문제점: 50, -, 5, =,'.' => '0.' 나와야 하는데 '45.'이 됨 
if (action === 'decimal') {
      if (!display.textContent.includes('.') && previousKey !== 'operator') {
        display.textContent = display.textContent + '.';
      } else if (previousKey === 'operator') {
        display.textContent = '0.';
      }
      previousKey = 'decimal';
}

//Codestates 답안 개선
//해결 방법: decimal이 입력된 적 없고 previousKey = 'calculate'인 경우가 고려되지 않았으므로 그것을 반영
if (action === 'decimal') {
      if (!display.textContent.includes('.') && previousKey === 'number') {
        display.textContent = display.textContent + '.';
      } else if (previousKey !== 'decimal') {
        display.textContent = '0.';
      }
      previousKey = 'decimal';
}

3)

//나
//내 코드의 문제: 잘못된 조건 분류, previousNum = Number(display.textContent); 중복
if (action === 'calculate') {
      if (operatorForAdvanced) {
        if (previousKey === 'number') {
          previousNum = Number(display.textContent);
        }
        if (previousKey === 'operator') {
          previousNum = Number(display.textContent);
        }
        if (previousKey === 'calculate') {
          firstNum = Number(display.textContent);
        }
        display.textContent = calculate(
          firstNum,
          operatorForAdvanced,
          previousNum
        );
      }
      previousKey = 'calculate';
}

//Codestates 답안
//해결: 특이 케이스가 하나이므로 else로 조건 합침
//Codestates 답안의 문제점: 2, '.', = 입력하면 '2'가 나와야 하는데 '2.'이 나옴, 어디에선가 자꾸 오류가 남(테스트를 다 통과하지 못함)
if (action === 'calculate') {
      if (firstNum) {
        if (previousKey === 'calculate') {
          display.textContent = calculate(
            display.textContent,
            operatorForAdvanced,
            previousNum
          );
        } else {
          previousNum = display.textContent;
          display.textContent = calculate(
            firstNum,
            operatorForAdvanced,
            display.textContent
          );
        }
      }
      previousKey = 'calculate';
}

//Codestates 답안 개선
//해결: 내 코드에서 수정, parseInt()로 정수만 출력
if (action === 'calculate') {
      if (operatorForAdvanced) {
        if (previousKey === 'calculate') {
          firstNum = Number(display.textContent);
        } else {
          previousNum = Number(display.textContent);
        }
        if (!firstNum & !previousNum & (previousKey === 'decimal')) {
          display.textContent = parseInt(display.textContent);
        }
        previousKey = 'calculate';
        display.textContent = calculate(
          firstNum,
          operatorForAdvanced,
          previousNum
        );
      }
      previousKey = 'calculate';
    }

깃허브: https://github.com/qwerty00ui88/practice/blob/ead6ffd0504f43d8dbdb7d0652ae59274adac290/script.js