Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본)

---

Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본)

 

⭐️ 과제1. 계산기 구현하기

Bare Minimum Requirements

✓ clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다.

✓ 처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다.

✓ 숫자 버튼과 연산자 버튼을 눌렀을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 보여야 합니다.

✓ 숫자 버튼, 연산자 버튼, 숫자 버튼을 눌렀을 때, 화면에 숫자, 연산자, 순자의 순서로 보여야 합니다.

✓ 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 눌렀을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과의 순서로 보여야 합니다.

✓ 연산 시 script.js의 calculate 함수를 활용해야 합니다.

✓ clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다.

 

 

👩🏻‍💻 script.js

function calculate(n1, operator, n2) {
  let result = 0;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  
  n1 = Number(n1);
  n2 = Number(n2);

  // n1 = Number(n1.textContent);
  // n2 = Number(n2.textContent);
  // operator = operator.textContent;

  if (operator === "+") {
    result = n1 + n2
  } else if (operator === "-") {
    result = n1 - n2;
  } else if (operator === "*") {
    result = n1 * n2;
  } else if (operator === "/") {
    result = n1 / n2;
  }

  return String(result);
}

buttons.addEventListener('click', function (event) {

  const target = event.target;
  const action = target.classList[0]; 
  const buttonContent = target.textContent;
  
  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.

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

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

    if (action === 'clear') {
      firstOperend.textContent = "0";
      operator.textContent = "+";
      secondOperend.textContent = "0";
      calculatedResult.textContent = "0";
    }

    if (action === 'calculate') {
      let result = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent);
      // let result = calculate(firstOperend, operator, secondOperend);
      calculatedResult.textContent = result;
    }
  }  
});

 

 계산기 기능 구현을 하는데, 구현은 되는데 테스트 코드 통과를 못한 부분이 궁금해서 라이브 세션 때 질문을 했었다. (테스트 코드를 처음 봐서 너무 신기하고 재밌었는데, 읽을줄 몰라서 왜 통과가 안되는지 궁금했었다.) 너무 명확하게 답을 해주셔서 😊 속시원히 궁금증 해결!

---

Q. calculate 함수 호출할 때 calculate(firstOperend, operator, secondOperend); 이렇게 하고, 함수 내부에 n1 = Number(n1.textContent); n2 = Number(n2.textContent); operator = operator.textContent; 이런식으로 넣으면 구현은 되던데, 테스트코드 통과는 안되던데 이유

A. 이건 함수를 만들고 구현할 때의 룰같은 건데, 함수 내부에서는 함수 외부의 것을 건드리지 않는것을 선호한다. 따라서 애초에 함수의 전달인자로 불러올때 textContent를 붙이는걸 선호하고, 그렇기 때문에 테스트코드를 그런식으로 짰다. 위 코드처럼 하면 안되는건 아니지만 선호하는 방식은 아니다.

---

 마침 Javascript.info 사이트에서 함수 부분을 보고 있었는데, 이런 문구가 있었다.

 “깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋습니다. 개발자는 매개변수를 받아서 그 변수를 가지고 반환 값을 만들어 내는 함수를 더 쉽게 이해할 수 있습니다. 매개변수 없이 함수 내부에서 외부 변수를 수정해 반환 값을 만들어 내는 함수는 쉽게 이해하기 힘듭니다.”

 이게 비슷한 맥락인가? 헷갈리지만 여튼 함수 내부에서 외부의 변수를 사용하는 건 지양하는게 좋다는 말인것 같다.

 

 

⬇︎ 기본 기능만 넣어서 구현한 계산기

See the Pen Untitled by sowon (@hello_FAY) on CodePen.

 

---

🌙  오늘의 회고

 아침부터 계산기 만들기 과제로 페어활동을 했다. 지금까지 HTML, CSS, JS 기초는 이미 알았던 내용을 학습 자료에서 글로 읽으려니 이해도 빨랐고, 별로 어렵다고 생각되지 않았는데 이번 계산기 과제는 처음에는 글로만 문제를 보려니 너무 헷갈려서 진도가 나가지 않았다. 그래도 지금까지 자바스크립트 공부를 열심히 했다고 생각했는데, 간단한 문제도 막혀버리는게 답답하기도 했고 오기도 생겼던 것 같다. 글을 몇 번이나 읽고 나서야 무엇을 하라는지 이해를 했고, 처음 이해를 하고 나니 신기하게도 문제를 큰 어려움 없이 풀 수 있었던 것 같다. Bare Minimum Requirements를 완료하고 좀 더 User flow에 맞는 기능을 구현하는 과제2번도 재미있게 완료했다. 아직 optional 과제인 nightmare는 안했는데, 주말에 공부하면서 해봐야겠다.

 아, 그리고 계산기 만들기 과제를 하며 테스트코드도 처음 접했는데, 굉장히 재밌고 신선했다. 😊

 오늘은 평소보다 시간이 더 빨리가는 것 같아서 놀랐다. 금요일 수업이 끝나고 벌써 주말이라니. 벌써 2주가 지났다. 2주만에 HTML, CSS를 패스하고 JS까지 왔다니.. 엄청난 커리큘럼이다…ㅎㅎ