오늘은 자바스크립트로 실제로 작동하는 웹 앱인 계산기를 구현하는 시간을 가졌다.

100% 처음부터 끝까지 구현하지는 않았지만 (어느정도 뼈대가 잡혀있었다.)
부분적으로 계산기를 작동시키기 위해 필요한 코드를 작성하고 결과를 직접 확인해보면서
문제를 해결하기 위해서 어떤 식으로 코드를 작성해야 하는지 좀 더 깊게 생각해보는 경험이었다.

1. 숫자 버튼 동작시키기

---

// 숫자 버튼을 누른 경우 (0, 1, 2, 3, ...)
if (action === 'number') {
  // 직전에 operator를 눌렀을 때, 새로운 숫자 입력
  if (display.textContent === '0' || previousKey === 'operator') {
    display.textContent = buttonContent;
  } else {
    display.textContent += buttonContent;
  }
  previousKey = 'number';
}

2. 연산자 버튼 동작시키기

---

// 연산자 버튼을 누른 경우 (+, -, *, /)
if (action === 'operator') {
  // 연산자를 눌렀을 때 calculate 함수 호출!
  if (firstNum && operatorForAdvanced && previousKey !== 'operator' && previousKey !== 'calculate') {
    previousNum = display.textContent;
    display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
  }
  operatorForAdvanced = buttonContent;
  // 첫번째 숫자를 기억해주어야 한다.
  firstNum = display.textContent;
  previousKey = 'operator'; // // 방금 어떤 유형의 버튼을 눌렀는지
}

3. 소수점 버튼 동작시키기

---

// 소수점 버튼을 누른 경우 (.)
if (action === 'decimal') {
  // 화면에 소수점이 없을 때만 소수점 찍히게 하기
  if (!display.textContent.includes('.') && previousKey !== 'operator') {
    display.textContent = display.textContent + '.';
  } else if (previousKey === 'operator') { 	// 방금 연산자 기호를 누른 후에 소수점을 누르면 
    display.textContent = '0.'			    // 새롭게 '0.'을 입력
  }
  previousKey = 'decimal'
 
}

4. Enter로 버튼으로 계산하기

---

// Enter 버튼을 누른 경우 (Enter)
if (action === 'calculate') {
  // firstNum이 할당되어 있을 때, (undefined가 아닐 때) truthy 할 때
  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';
}

5. AC 버튼으로 초기화하기

---

// AC 버튼을 누른 경우 (AC)
if (action === 'clear') {
  display.textContent = '0';		// 화면 초기화
  firstNum = undefined;				// 계산기에 입력되었던 첫 번째 값 초기화
  operatorForAdvanced = undefined;	// 연산자 초기화
  previousNum = undefined;			// 계산기에 입력되었던 두 번째 값 초기화
  previousKey = 'clear';
}

---

이번 과제를 진행하면서 가장 도움이 되었던 것은
무작정 바로 생각나는 대로 코드를 작성하기보다는
의사코드로 생각을 한 번 글로써 정리를 한 다음 그 글을 토대로 코드를 작성하는 것이었다.

오늘은 계산기를 구현하기 위해 튜토리얼 형식으로 진행이 되어
이전에 내가 만들었던 계산기에 자바스크립트 기능을 추가하지는 못했지만
오늘 구현했던 부분을 다시 복습하는 과정을 거쳐서
주말에 css를 수정하여 더 매력있는 계산기를 만들어보아야겠다!