[코드스테이츠/9DAY] Unit6 - 간단한 웹앱 만들기

오은비·2023년 2월 23일
0

코드스테이츠

목록 보기
9/18
post-thumbnail

계산기 만들기

오늘은 페어프로그래밍으로 계산기를 만들었다. 부트캠프에선 3단계로 나뉘어 구현할 것을 지정해주었는데 나는 그중 Nightmare 단계의 마지막 문제만 해결하지 못 하였다.
그 점이 조금 아쉬었다. 재도전을 해야할 것 같다.

헤맸던 점

의외로 부트캠프에서 제안한 조건이 아닌 엉뚱한 곳에서 발생하였다.

Nightmare 단계의 한 개를 제외하고 테스트를 모두 통과하였는데 숫자, 사칙연산자 , 엔터, 엔터를 누르면 NAN이 출력되었다.
내가 원하는 값은 엔터를 칠 때 마다 처음 입력한 숫자가 계속해서 사칙연산되길 바란 것이라 명백한 오류였다.

코드를 하나하나 뜯어본 후 알게 되었다.
변수에 undefined가 아닌 ''를 지정해두어 문자열로 연산이 되고 있던 것이었다.
그래서 해당 부분을 수정한 후 조건문을 추가하였다.

//기존 변수
previousNum = '';

//수정한 변수
 previousNum = undefined;

// 수정 전 계산 조건문

if (previousKey === "calculate") {
   display.textContent = calculate(
     display.textContent,
     operatorForAdvanced,
     previousNum
   );
 }else{
   display.textContent = calculate(
     firstNum,
     operatorForAdvanced,
     display.textContent
   );
 }

// 수정 후 계산 조건문

 if (previousKey === "calculate" && previousNum !== undefined) {
   display.textContent = calculate(
     display.textContent,
     operatorForAdvanced,
     previousNum
   );
 }else if(previousKey === "calculate" && previousNum === undefined){
   display.textContent = calculate(
     display.textContent,
     operatorForAdvanced,
     firstNum
   );
 }else{
   display.textContent = calculate(
     firstNum,
     operatorForAdvanced,
     display.textContent
   );
 }

조건을 추가하여 오류를 방지하고자 하였다.
조금 더 깔끔한 코드가 있을 거라 생각하지만 현재의 내겐 최선이었다..

그렇게 수정한 코드는 정상적으로 잘 작동하였고 이것을 해결했다는 것이 내게 큰 성취감을 안겨 주었다.
앞으로도 알고리즘 문제를 계속해서 풀어나갈텐데 이후에도 느낄 성취감이 설레기도 하다.

아쉬웠던 점

  1. Nightmare 단계 마지막 체크포인트를 통과하지 못하였다.
  2. 코드를 더욱 더 깔끔히 작성하지 못하였다.

과제를 하며 느낀 점

  1. 오늘 깃허브를 처음 사용해보았는데 별거 아닌 것에도 많이 헤맸다. 내일은 Git에 대해 공부하는데 더욱 익숙해지기 위해 노력해야겠다.
  2. 코드의 구조를 파악하는 것이 굉장히 중요한 것 같다.

과제 링크

https://github.com/dreamogu/fe-sprint-calculator

profile
드림오구

1개의 댓글

comment-user-thumbnail
2023년 2월 26일

고수~~~
만약 previousNum을 계속 빈 문자열로 두고 싶다면 previousNum = ''일 때 이 값이 falsy한 값이라는 성질을 이용해서 조건식을 짜주면 될거에요

답글 달기