[코드스테이츠 44기 프론트엔드 9일차 회고록] 계산기 구현하기-1

오늘부터는 새로운 페어분과 활동하게 되었다. 오늘의 활동으로는 계산기의 기능을 구현하는 활동이었다. 

처음부터 만드는 것이 아니라 틀은 잡혀있고 그 안의 기능들을 구현하는 것이었다. 

구현해볼 계산기는 위의 칸처럼 첫 번째 숫자칸, 연산자 칸 , 두 번째 숫자칸, 결과 칸 이렇게 나누어져있었고 버튼을 클릭할 시 칸에 적절한 버튼 텍스트가 뜨게 구현해야 했다. 

예전에 이와 비슷하게 버튼을 클릭했을 때 .innerHTML 을 활용하여 화면에 텍스트를 변경했던 기억이 있어 그렇게 해보았는데 코드를 다시 살펴보니 아래 처럼 사용할 수 있게 변수로 선언되어있었다.

const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

 

따라서 아래의 코드를 참고하여 첫번째 칸을 수정할 때엔 firstOperend.textContent 를 활용하여 수정하였다. 

const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.

 

결과 값을 눌렀을 땐 calculator 함수를 작성하여 연산자에 맞는 결과를 반환하게 하였고 = 버튼을 클릭했을 때 함수가 실행되게 하였다. 또한 함수 리턴 값으로 결과 값을 반환하므로 calculatedResult.textContent에 함수를 넣어주었다. 

 

추가적으로 innerText와 textContent의 차이점이 궁금하여 검색을해보았다. 

textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다.
반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
textContent는 노드의 모든 요소를 반환합니다.
그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)

innerText와 innerHTML 의 사용법만 알고있었는데 오늘 textContent의 사용법도 알게 되었다. 

---

계산기 js 파일

const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

function calculate(n1, operator, n2) {
  let result = 0;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  if(operator==='+'){
    result = Number(n1) + Number(n2);
  }
  else if(operator==='-'){
    result = Number(n1) - Number(n2);
  }
  else if(operator==='*'){
    result = Number(n1) * Number(n2);
  }
  else if(operator==='/'){
    result = Number(n1) /Number(n2);
  }
  return String(result);
}

buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.

  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.

  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      console.log('숫자 ' + buttonContent + ' 버튼');
      
     // firstOperend.textContent = buttonContent;
      if (firstOperend.textContent === '0'){
        firstOperend.textContent = buttonContent;
        
      }
      else if(firstOperend.textContent !== '0') {
        secondOperend.textContent = buttonContent;
        
      }
    }
   

    if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      operator.textContent = buttonContent;
    }

    if (action === 'decimal') {
      console.log('소수점 버튼');
    }

    if (action === 'clear') {
      console.log('초기화 버튼');
      firstOperend.textContent = 0;
      secondOperend.textContent = 0;
      operator.textContent ='+';
      calculatedResult.textContent = 0;
    }

    if (action === 'calculate') {
      console.log('계산 버튼');
      calculatedResult.textContent=calculate(firstOperend.textContent,operator.textContent,secondOperend.textContent);
    }
  }
});

 

기초적인 부분은 완성해보았다. 처음엔 버벅거렸지만 한 단계씩 문제를 해결해 나갈때마다 수월하게 문제를 풀 수 있었던 거같다. 첫번째숫자와 두번째숫자를 눌렀을 때 같은 숫자로 인식하는 오류를 없애기 위해 if, elseif문을 사용하여 0일때는 첫번째 숫자칸에 0이 아닐때는 두번째 숫자칸에 숫자를 입력할 수 있도록 만들어보았다. 

 

점심을 먹은 후 더 심화된 계산기를 만들어 볼 것이다.!!