S1 unit7 회고 | 대충 작동하는 웹 계산기 만들기 (기초)

🤔모르는 게 뭔지 인식하자

unit7은 그동안 배웠던 지식을 총집합시키는 기분이었다.
강의를 보면서 문제를 푸는데 전혀 알 수가 없었다.
설명이 의도적으로 많이 빠져있어서 혼자서 낑낑대면서 알아내야 했다.
이것저것 건드려보기도 하고 이건가 하고 적었다가 이해를 하기도 했다.

딱 파일을 열었을 땐 너무 막막했다.
이게 내가 배웠던 게 맞나...?
querySelector 는 뭐고 event는 뭐고... 😵

Document.querySelector(selector)
: 문서에서 ()안의 선택자와 일치하는 첫번째 요소를 반환한다.

알고보니까 운도님께서 한번 보여주신 적 있던 녀석이었다.
이게 복습의 중요성이군아 ㅠㅠ😥

우선 모르는 게 뭔지 알기 위해 천천히 코드를 읽어내려갔다.
위에 선언문은 복잡하니까 패스하고, 내려가다보니 처음으로 아는 게 나왔다.

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

그리고 해야하는 일이 적혀있었다.

🤓calculate 함수 만들기

전에 코플릿에서 풀었던 문제랑 거의 똑같아서 쉽게 풀 수 있었다.

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

Number, parseFloat, parseInt 차이점보기
나는 이렇게 풀었는데 parseFloat을 어디에서 검색해서 주워듣곤 쓴 결과이다.
운도님은 parseFloat을 안써도 되기 때문에 쓰지 않는다고 하셨다.
나도 그냥 Number를 써야겠다.

😯 계산기 버튼 작동시키기

함수를 만들고, 내려가니까 이젠 계산기를 작동시킬 수 있게 하라는 문제가 나왔다.
내 머리로는 어떻게 그걸 연결시키지...? 부터 나왔지만 주석과 코드를 잘 읽어보니 따로 내가 연결시킬 필요 없이 이미 연결이 되어있었다.

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

버튼을 눌러서 그걸 화면에 띄우려면 어떻게 해야할지 고민했다.
읽지 않고 넘어간 윗부분에 답이 있었다.
첫번째 숫자가 들어가는 화면은 firstOperend에 할당되어 있었다.

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

그래서 이렇게 textContent를 사용해서 해결할 수 있었다. textContent도 검색을 통해서 찾게 되었다.
내가 이해하기로는 어떤 요소의 텍스트 부분만 빼오는? 느낌이다. 이건 따로 글을 써야겠다.
buttonContent는 미리 적혀있던 console.log에서 보고 뭔가 쓸 수 있을 것 같아서 쓰게 되었다.

 if (action === 'operator') {
   console.log('연산자 ' + buttonContent + ' 버튼');
   operator.textContent = buttonContent;
 }
 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);
 }
 

내가 적은 코드인데 operator도 마찬가지로 이미 html요소가 할당되어 있던 변수 operator에 textContent를 사용하여 buttonContent를 할당했다.

clear 버튼은 내가 할당했던 문자열을 초기화한다고 생각하고 textContent로 재할당했다.
원래 화면에 0이 떠있어야 해서 '0'으로 초기화했다.

calculate는 아까 만들었던 calculate 함수를 사용했다.
그리고 그동안 누른 버튼, 즉 변수들을 함수에 넣었다.
그리고 calculatedResult.textContent에 할당했다.

여기까지 하면 bare minimum test 통과...!
이젠 advanced test다!