CODE STATES 44

9일차. 계산기 구현

꼬드리 2023. 2. 23. 20:56

Git에 샘플로 주어진 코드를 받아 주어진 계산기 틀을 활용하여 JS기능들을 구현해보는 작업을 했다. (솔직히 초심자는 어려워서 이렇게 알아서 풀어보라고 던져줘도 되나 싶다? 어떻게든 하고는 있는데) 코플릿에 문제 풀이로 주어질 때보다 훨씬 헷갈렸다. 어쩌다보니 다른 팀에서 잘 하는 분의 힌트를 들으면서 같이 과제를 하기 시작...

 

위와 같이 생긴 계산기 위쪽 칸마다 '처음 입력 수' '두번째 입력 수' '연산자' '연산결과'가 나오게 구현하는 것이 오늘 과제의 목표였다. 

 

 

기본 과제 조건: 

1. 숫자 클릭할 때 첫번째 칸에 숫자 나타내기.

2. 첫번째 숫자가 0이 아닌 경우에만 두번째 숫자 나타내기.

3. Enter 을 누를 때 두 숫자의 연산 결괏값을 우측에 나타내기.

4. AC를 누르면 전부 0이 되게 하기.

 

 

 

조건1과 2- 처음부터 헤맸는데 textContent가 해당 노드의 텍스트를 전부 가지고 온다는 것을 몰랐다. 자바스크립트를 이용하면 HTML 요소에 접근할 수 있다는 사실!!! 

if (action === "number") {
      // 그리고 버튼의 클래스가 number이면
      // 아래 코드가 작동됩니다.
      if (firstOperend.textContent !== "0") {
        secondOperend.textContent = buttonContent;
        //firstOperend가 0이 아니라면 secondOperend에 buttonContent가 뜬다.
      } else {
        firstOperend.textContent = buttonContent;
        //아니라면 firstOperend만 뜬다.
      }
      console.log("숫자 " + buttonContent + " 버튼");
    }

 

 

조건3- operator 바꾸는 건 뒤에서 하고 일단은 +만 하는 거라서 아래와 같이 구현해봤다. 우선 calculate함수를 짜서 n1 operator n2를 넣고 +가 operator에 들어오면 합이 리턴되게 만들었다. 이후 엔터 버튼이 눌릴 때 calculate함수를 사용해서 마지막 칸의 textContent가 계산되도록 하였다.

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

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

 

 

조건4- 이건 혼자서 간단하게 구현. 위에서 textContent의 원리를 알고 오니까 괜찮았다. 

if (action === "clear") {
      console.log("초기화 버튼");
      firstOperend.textContent = 0;
      secondOperend.textContent = 0;
      calculatedResult.textContent = 0;
      //clear버튼을 누를 때 셋 다 0으로 만들어준다.
    }

 

기본 조건은 다 통과했는데 추가 과제에서 좀 막혔다...음... 계산이 안 돼서 긁적...

 

 

Question

 

Git 관련: Fork와 Pull Request?

더보기

프로젝트를 소유한 A가 있고, 그 프로젝트를 협력하고자 하는 B가 있다고 하자. 여기서 B는 소유자가 아니기 때문에 수정할 권한이 없다. 그러니 원본 깃 페이지 우측 위에서 Fork를 클릭해서 자신의 저장소로 '통째로 복사해간 뒤' 여기서 수정을 해야 한다. 이것을 Fork한다고 한다. Fork는 프로젝트 원본을 건드려 쓸데없는 문제가 발생하는 것을 방지한다. 수정한 것은 원본에 영향을 주지 않으며, 내 저장소에 저장해둔 레포지토리에만 변경 사항을 반영한다. 
이후 B는 원하는 만큼 수정한 코드를 Pull request를 통해 다시 A에게 전달할 수 있다. 이때 저장한 파일을 Pull request 버튼을 클릭한 뒤 어떤 점을 수정했는지 comment를 써서 A측으로 전달한다.

이후 A가 이 수정사항을 보고 허락하면 merge로 받아들인다.

 

문자열(String)을 숫자(number)로 변환하는 방법 4가지 

더보기

문제를 풀면서 사용한 방법이다. 

1) Number()로 변환. 숫자가 아닌 문자나 undefined 등을 전달하면 NaN을 리턴한다.
2) parseInt()로 문자열을 정수의 Number로 변환한다. 다만 소수가 있다면 정수로 변환되며, 숫자가 아닌 문자나 undefined를 전달하면 NaN을 리턴한다. 
3) parseFloat()로 소수를 가진 실수를 문자열로 변환한다. 소수가 없는 실수는 소수가 없이 반환되며 숫자가 아닌 문자나 undefined를 전달하면 NaN을 리턴한다. 
4) Math의 ceil, round, floor 메소드들을 이용해서 문자열을 숫자로 변환한다. 다만 소수를 가진 실수는 소수 자리가 사라짐을 염두에 둔다. 

 

 

 

 

 

ERROR!

  • 조건1이 달성된 상태에서 조건2를 구현하려고 하던 중에, firstOperend의 수가 secondOperend까지 똑같이 나오는 에러 -> if와 else로 조건을 나누어 구현. 
  • firstOperend의 값이 0일 때만 secondOperend값이 나오게 하는 문에서 if (firstOperend.textContent !== 0)로 하니까 0이 숫자로 인식되어 결과가 나오지 않았다. -> "0"을 써서 spring타입으로 지정하고 나니 제대로 나옴. 
  • 계산 결과가 나와야 하는 곳에 n1 n2 두개가 붙어서 나오는 결과가 도출되었다. (ex 9+9=99) -> 다시 확인해본 결과, 함수 내에서 number로 바꾸지 않고 textContent 즉 string타입으로 받은 뒤 더하기를 시켜서 '문자열의 더하기'가 되고 있었던 것. 받아온 요소에 각각 Number()를 해준 뒤 더했더니 제대로 나왔다.