[💻 코드스테이츠 FE 44기] 부트캠프 - 계산기 구현하기

✔️ 시작

이번 시간에는 계산기를 구현해 보았다.
총 3단계 까지 이루어져 있고 단계가 올라갈 수록 어려워 졌다.
1단계만 해도 과제 제출 할 수 있었다.
그래도 내가 할 수 있는 단계 만큼 도전해 보았다.

생각보다 어려웠다...

📍 계산기 구현

✔️ 1단계

0 + 0 = 0

0 + 0 = 0 화면이 표시 되어 있을 때
첫번째 자리, 연산기호, 두번째 자리에 textContent를 이용해 추가해 주었다.

결과 값의 경우 함수를 선언해 작업했다.

• 연산기호가 Number가 아닌 String으로 인식이 돼 조건문으로 연산 기호가 -,+,/,* 일 경우 각 기호에 맞게 작업했다.

//조건문 예시
if (operator === '+') {
    result = Number(n1) + Number(n2);
  } else if (operator === '-') {
    result = Number(n1) - Number(n2);
  } ...(생략)

• textContent는 String으로 출력되기 떄문에 Number()를 감싸 주었다.

String(result);

• 출력 할 땐 String으로 나와야하기 때문에 String()으로 감싸 주었다.

✔️ 2단계

2단계는 좀 더 계산기 느낌이 날 수 있도록 구현하는 단계이다.

숫자를 한 자리만 표시하는 건 간단했다.
두자릿 수 이상을 표시하는데 생각 보다 오래 걸렸다.

• 0부터 시작되는 계산기로 처음에 들어가 있는 string이 0 인 경우 입력한 숫자로 표시한다.

  1

  (ex - 0에서 1를 입력한 경우)

• 다음 숫자를 추가하고 싶을 경우 else if를 사용해 0이 아닌 경우
  기존에 작성된 textContent에 입력한 숫자를 넣어준다.

  12

  (ex - 1이 화면에 표시된 상태에서 2를 입력한 경우)

// 혼자 작성한 코드
if(display.textContent === '0'){ //첫 숫자가 0인 경우
  display.textContent = buttonContent;
}else if(display.textContent !== '0'){ //숫자가 0이 아닌 경우
  display.textContent = display.textContent + buttonContent;
}

//강의를 통해 작성된 코드
if(display.textContent === '0' || previousKey === 'operator'){ //첫 숫자가 0인 경우
	display.textContent = buttonContent;
}else{ //숫자가 0이 아닌 경우
	display.textContent = display.textContent + buttonContent;// 첫 번째 숫자 이후 계속  나오게 하도록
}

previousKey = 'number'; // 재할당

혼자 열심히 머리 굴려서 작성한 코드를
이렇게 간결하게 표현할 수 있다는게 신기 하다.

코딩의 세계는 아직 멀었다.

계산기 구현하기 작업을 통해 배웠던 점은

• 변수에 정보를 재할당해서 사용하는 것
• 함수(인자, 인자, 인자)생각하는 방법
• 조건문을 좀 더 간략하게 사용하는 방법

등을 배우게 된 거 같다.

✔️ 3단계

아쉽게도 3단계 까지 가지 못했다.
숫자, 연산기호를 나열하는데 까지 성공했지만
두번째 들어가는 숫자가 하나만 나오고 결과 값이 자꾸 이상하게 나왔다.
시간도 애매해서 3단계 까지 가지 못했다...

✏️ 마치며

이번 학습부터 다른 페어분과 활동한다.
페어 분의 컴퓨터 와이파이가 잘 안터져서 그런지 자꾸 버벅거리셨다.
인사를 제대로 못 한거 같아 아쉽다.

페어분께 내가 어느 정도 작업을 했고
이 부분은 조금 어려워서 다른 방법으로 시도했다 등을 설명드렸다.

내가 작업한 부분을 이해하면서 설명까지 하니
페어분에게도 나에게 이해하는데 많은 도움이 됐을 것 같다.

계산기 구현을 하면서 재밌기도 했고
어떻게 조건문을 작성해야 구현될까? 내가 작성했는데 왜 이렇게 작동되는거지?
등 여러 생각을 가지며 작업했다.

비록 3단계 중 2단계 반절까지 마무리 지었지만
실시간 강의를 보면서 어느 정도 이해할 수 있었다.

다음엔 내가 HTML/CSS까지만 작업한 계산기를 구현해 봐야겠다.