[민서]

[rachel5640]

🌮 무엇을:

• input 숫자 입력
• 사칙연산 기호 선택
• 결과 버튼
• 완료된 계산값 제공

🌮 어떻게:

• input1, input2, sign, result, resultBtn 에 요소가 존재한다는 걸 알리기 위해서 null 검사와 타입 단언을 사용
• input1?.value input2?.value 을 사용하여, 만약 input1 또는 input2가 null이라면 0을 기본값으로 사용하게 되며, 코드 실행 중 null 오류가 발생하지 않게

if (input1 && input2 && sign && result && resultBtn) {
  function displayResult() {
    const num1 = parseFloat(input1?.value || "0");
    const num2 = parseFloat(input2?.value || "0");
    const selectedOperator = sign.value as Operator;
    const resultValue = calculate(num1, num2, selectedOperator);
    result.textContent = resultValue.toString();
  }

  resultBtn.addEventListener("click", displayResult);
} else {
  console.error("돌아가! 계산안돼");
}

🌮 얼마나:

• 얼마나 걸렸나요? 4시간
• 어떤 부분이 어려웠나요?
  : 타입스크립트가 처음이었는데,정말 오류가 많이나더라구요...
  변수가 null일 가능성을 모두 빼느라고 시간을 조금 썼어요🥹

: 커밋을 완전히 깜빡하고 안남겼어요...다음에는 더 잘게 쪼개보겠습니다..

🌮 구현 사항:

2023-11-08.12.49.21.mov

[hae2ni]

굿굿 수고했어! 타스 첨이랑 많이 어려웠을텐데 왕왕 고생많이해떠!

[hae2ni]

NaN보단 확실히 '계산이 안된다"를 나타내는 표지 반영이 좋을 것 같아옹

[hae2ni]

왁 타스 넘넘 잘쓴다 👍

[hae2ni]

다 있을 때 처리해준 거 넘 좋아요! resultBtn같은 거는 이미 있는 거니까 없을 수도 있고 있을 수도 있는 값들만 체크해주는 건 어떨까 싶은데!!

[hae2ni]

혹시 여기에 0을 넣어줄 이유가 있었ㄴㅏ요?
그리구, 옵셔널 체이닝 참고하면 좋아!

[se0jinYoon]

나도 타스가 처음인지라 .... 민서 코드리뷰 하면서 저 헷갈렸던 부분들 정리할 수 있었어용 🧚🏻‍♀️
수고 많았어요오 💗💗

[se0jinYoon]

이번 주차 아티클 작성하고 와서 보니깐 눈에 보이는 코드 💡
유니언을 배우기 전에 사용했다니 멋져 ....

[se0jinYoon]

저도 이번에 하면서 알게 된 건데 ! 민서 코드에서도 보여서 생각난 김에 코드리뷰하면서 정리 한 번 하고 갈게요 히히

?. : optional chaining

input1 이 null 또는 undefined 이어도 오류가 발생하지 않고 undefined를 반환한다

|| : nullish coalescing

input1의 value가 falsy인 경우 0을 기본값으로 제공한다

[se0jinYoon]

여기 NaN보다는 에러 문구같은 걸 리턴하면 어떨까요?
예를들면 0으로 나눌 수 없습니다! 같은 것!

[se0jinYoon]

난 null 에러가 계속 나서 냅다 null일 수 없다! 라고 !연산자 통해서 제한하고 시작했는데 이렇게 핸들링할 수 있는 거였구나 ,,,,