계산기

오늘은 너무 피곤해서 1. 내가 구현했던 것과 리뷰 때 이해한 것 비교 / 2. 새로 배운 점들 메모 정도하고 일찍 자야겠다😴 내일을 위해 ..

1. 계산기 구현하기

• 가장 큰 차이점은 input이 number일 때 작동하는 방식이다.
• A [연산] B 의 단순한 1회 연산에만 해당되는 무식한(?) 코드를 짰다.

 if (target.matches('button')) {
    if (action === 'number'){
      if(display.textContent === '0'){ // 가장 처음 입력되어있는 숫자가 0이라면(=제일 처음 누르는 값이라면) 0대신 새로운 숫자를 추가한다
        firstNum = ''; // 빈 문자열이라고 지정하지 않으면 아래아래 줄에 'undefined + 숫자' 형태로 저장되어서 우선 할당한다
        firstNum += buttonContent;
        display.textContent = buttonContent; 
      } else if(previousKey === 'operator'){ // A(연산)B 의 B에 해당하는 경우라면 바로 보여준다
        display.textContent = buttonContent;
      } else { // 그렇지 않다면 뒤에 이어서 붙인다.
        display.textContent += buttonContent;
        firstNum += buttonContent; 
      }
      previousKey = 'number';
    }
 }

전체적인 계산기의 흐름을 생각하지않다보니 변수를 적당하게 쓰지도 못하고 어거지로 우선 1회 곱셈 결과값을 받기 위해 firstNum = ''; 뭐 이런 뜬금없는 코드도 들어가있다.

if (target.matches('button')) {
    if (action === 'number') {
      // 연산자가 존재하면, 두번째 입력을 받아야 한다
      if (operatorForAdvanced) {
        if (previousKey === 'operator') {
          display.textContent = buttonContent
        }
        else if (previousKey === 'number') {
          display.textContent = display.textContent + buttonContent
        }

        console.log('첫번째 숫자', firstNum)
        console.log('두번째 숫자', display.textContent)

      }
      else {
        // 아니면 첫번째 입력을 받을거예요
        // 처음 등장하는 숫자가 0이면 그냥 채우고
        if (display.textContent === '0') {
          display.textContent = buttonContent
        }
        else {
          // 아니면 숫자를 덧붙인다
          display.textContent = display.textContent + buttonContent
        }

        firstNum = display.textContent
        console.log('첫번째 숫자', firstNum)
      }

      previousKey = 'number'
    }
  

무조건 짧다고 좋은게 아니다. 간결하되 가독성 있는 코드를 만들어야겠다.

KEYPOINT 사람은 인과관계를 알지만 컴퓨터는 명확한 기준이 있어야 연산을 한다!!!!

• firstNumber와 secondNumber를 '연산자가 언급된 적 있는지'를 기준으로 나눌 수 있다는 것, 그 와중에 '언급된적 있는데 이전 값이 숫자면 이어서 붙여준다는 것' ..
• 내 코드는 이 부분에서 막혀서 secondNumber는 한자리 수만 적용이 되었었다 😂

❗️이번 주 내로 할 것

1. 흐름을 이해했으니 위 코드를 참고해서 처음부터 스스로 다시 짜보고
2. 전체 레퍼런스 코드를 참고해 다른 방식도 알아보자 (nightmare는 제쳐두고!)
3. CSS로 계산기 가장 아래 row 정렬 방법 margin이랑 따져가며 어떻게 이루어지는건지 다시 한번 확인해보자
4. Bare 단계에서 0+7이 되도록 만드는 방법 다시 스스로 만들어보자

2. 새로 배운 것

1. 디버깅 팁

• 함수는 콘솔창에 쳐도 실행이 된다! 무슨 말인지 모르겠을 땐 테스트해보자.
• 함수 초입에 console.log()를 찍어서 그 부분이 제대로 실행되고 있는지 확인할 수 있다. 그렇게 조금씩 범위를 좁혀나가는 것!
• 조건문도 함수랑 동일하게 적용해볼 수 있다.

2. 로직 구현하기

• 굴러간다고 기뻐하지 말자. 남이 봐도 알아볼 수 있어야되고 빈틈이 있더라도 내가 할 수 있는 선에서 논리적으로 이루어져있어야 한다.
• 서순으로 생각해보자. 사람은 시간의 흐름에 따라 행동하고 이해하지만 컴퓨터는 저장된 것, 기준으로 삼을 수 있는 것을 통해 결과값을 낸다.

점점 100% 따라가기 버거워지는 중.. 정규 외 하루 2시간 더 공부한다고 될 일이 아닌 것 같다.
내일부터 생판 처음보는 내용일텐데, 겁내지말고 기초부터 꼭꼭 씹어먹자. 남과의 비교는 내 나태함을 경계할 때만 하기..