[Day 9] 계산기 구현

꽤 힘든 하루

오늘은 계산기에 실제 기능을 구현하는 작업을 페어와 같이 진행했다. 초반부는 괜찮았는데, 요구사항이 복잡해지니까 코드도 스파게티 코드가 되는 것 같고 헷갈려서 힘들었다. 머리에서는 이해했다고 하는데 말로 설명하려는 순간 말문이 턱 막히는 현상을 경험했다. ㅋㅋ 오늘 벌써 저녁먹고 과제 마무리하니까 이 시간이 되었는데, 앞으로는 시간이 훨!씬! 더 부족해질거라는 생각이 팍팍 든다. 주말을 정말 잘 활용해야지.

오늘은 라이브세션 이후에 그룹회고를 진행했다. 나름 용기내서 모더레이터에 도전했는데 이런 진행은 처음이라 엄청 버벅댄 것 같다. 그래도 참여하신 다른 분들이 맞장구도 잘 쳐주시고 답변도 잘 하셔서 그나마 덜 어색하지 않았나 싶다. 기억에 남는 것을 꼽자면, 어떤 분이 나에게 잘하는 것이 무엇이냐고 질문을 주셨는데 거기에 적극적으로 도전하는걸 잘한다고 답변한 부분이다. 잘하는지는 모르겠지만 적당히 많이 도전해봐야지!

오늘 배운 것

• 가장 힘들었던 부분은 소수점을 눌렀을 때 추가되는 기능 구현과 연산자 키를 눌렀을 때 이전 값을 계산한 결과를 표시하는 기능이었다.
• 아무리 봐도 스파게티 코드이지만 페어님과 서로 의견을 존중하며 진행해야하기 때문에, 페어와 내가 서로 코드를 충분히 이해할 시간을 가져야 하고 또 원활한 커뮤니케이션을 위해서 코드를 작성하기 전에 이 코드를 작성하는 의도를 명확히 해야함을 절실하게 느꼈다.
• 가장 도움이 되었던 것은, 내가 하고자 하는 바를 의사코드로 작성하는 것이었다. 어려웠지만 하나하나 작성하다보니 어떤 점이 문제인지도 빠르게 파악할 수 있어서 큰 도움이 되었다.
• classList를 활용해 특정 상태일 때 특정 class를 추가하여 스타일이 변화하도록 코드를 수정했다.
  1. class를 추가할 전체 버튼을 .querySeleoctorAll로 특정했다.
  2. querySelectorAll로 가져온 element는 nodeList의 형태로 반환되고, 이는 반복문으로 하나씩 순회할 수 있다.
  3. 클릭했을 때 class를 추가하는 것 / 먼저 클릭해서 class가 추가된 요소가 있다면 해당 요소의 class 삭제
  4. 즉 1회 클릭에 1개의 요소에만 특정 class가 적용되는 것이다. 
  5. nodeList를 반복문을 돌아 하나씩 확인하며 class의 존재 여부를 확인하였다.

for (let i = 0; i < btnOperator.length; i++) {
    if (btnOperator[i].classList.contains('isPressed')) {
      btnOperator[i].classList.remove('isPressed');
    }
}