[SEB FE 44] 간단한 웹앱 만들기

✍ 1차 과제물 구현

• 사칙연산을 하는 함수

function calculate(n1, operator, n2) {
  let result = 0;
  
  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);
}

• 숫자를 눌렀을 경우

if (action === 'number') {
      if(firstOperend.textContent === '0') {
        firstOperend.textContent = buttonContent;
      } else if(firstOperend.textContent !== '0') {
        secondOperend.textContent = buttonContent;
      }
    }

• 연산자를 눌렀을 경우

if (action === 'operator') {
      operator.textContent = buttonContent;
    }

• AC 버튼을 눌렀을 경우

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

• Enter 버튼을 눌렀을 경우

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

1차 과제물에서는 한자리 숫자 사칙연산을 구현하며 자바스크립트 기능 구현을 하기 위해서 의사코드를 작성한 뒤, 코드 작성을 이어나갔다.

🎯 2차 과제물 구현

2차 과제물은 좀 더 복잡한 계산기 기능을 구현했지만 1차 과제물을 바탕으로 하는거라서 수월하게 진행할 수 있었다.

🏁 회고

변수에 어떤 값이 들어가는지 모르겠으면 console.log를 찍어보자. console.log를 찍어보면서 코드를 작성하면 정확하게 이해하며 넘어갈 수 있고, 실수한 부분을 찾아낼 때도 도움이 되니까 console.log를 습관화?하자!