[ 수빈 ]

[binllionaire]

🌮 무엇을:

• input 검증
• 계산 결과 값 출력

🌮 어떻게:

• 🧺 htmlElements.ts 에는 querySelector를 통해 가져온 html element들을 모아놨어요

export const input1: HTMLInputElement = document.querySelector(
  "body > main > section > input[type=number]:nth-child(1)"
) as HTMLInputElement;

TypeScript 로 코딩이 처음이라 HTMLElement 라는 타입이 있는 것도 신기했어요 🤓

• 💉 checkInput() 과 isEmpty() 를 통해 입력값을 검증했어요

/* 입력 필드 검증 함수 */
function checkInput() {
  const isInputEmpty: boolean = isEmpty(input1.value, input2.value);
  if (isInputEmpty) {
    alert("뭐 잊은거 없어?");
    return false;
  }
  return true;
}

/* 입력 필드가 비었는지 확인하는 함수 */
function isEmpty(num1: string, num2: string): boolean {
  return num1 === "" || num2 === "";
}

함수로 분리해보면서 함수의 인자와 반환값의 타입선언을 확실히 이해하게 됐어요 🤓

• 🧮 calculate() 를 통해 결과를 계산했어요

function calculate(num1: number, num2: number, sign: string): number {
  switch (sign) {
    case "sum":
      return num1 + num2;
    case "sub":
      return num1 - num2;
    case "mul":
      return num1 * num2;
    case "divide":
      return num1 / num2;
    default:
      return 0;
  }
}

switch 문을 사용하여 선택된 연산 부호에 따라 계산을 해줬어요 🤓

🌮 얼마나:

• ⏰ 얼마나 걸렸나요?
  1시간

• 🤔 어떤 부분이 어려웠나요?
  변수, 함수 매개변수, 함수 반환 값 등의 타입을 명확하게 정의하는 것을 처음해봐서 신기했습니다!!

🌮 구현 사항:

calculator.mov

[moondda]

간단한 기능에 맞게 간결하고 깔끔하게 잘 구현하셨네용
에러 처리만 추가적으로 구현해주시면 될 거 같아요(ex. 숫자가 아닌 다른 값이 들어와서 NaN이 리턴되는 경우)
수고하셨습니다~!

[moondda]

모듈화 좋아용

[hae2ni]

역시 구조 나누기 장인이야! 넘 꼼꼼해 너무 고생해써 😄

[hae2ni]

역시 나누기 장인 황수빈,,, ❤️

[hae2ni]

호옥시 그냥 id값으로 만들고 박는거?를 지양하고 다 하나하나 선택자를 이용하신 이유가 있을까요?

[hae2ni]

굳굳! 너무 깔끔하다!! 진짜 분리 === 황수빈

[hae2ni]

요거 화살표 함수말고 따로 명명하면 조금 더 가독성있지 않을까 싶어!

[hae2ni]

귀여웤ㅋㅋㅋㅋ

[hae2ni]

요오거 interface로 바꾸면!!

Suggested change

	function calculate(num1: number, num2: number, sign: string): number {
	interface CalculatorInput {
	num1: number;
	num2: number;
	sign: string;
	}
	function calculate({num1, num2, sign}: CalculatorInput): number {

[hae2ni]

num2가 0일때 예외사항으로 빼면 좋을 것 같아요!