기능 구현 설명

기능은 딱히 설명할 게 없을 정도로 간단하다. 우리가 모두 아는 흔한 계산기이다. 처음에 설명에 앞뒤에 숫자를 계산하라고 해서 곱셈이나 나눗셈을 먼저하는 게 아니라 그냥 앞뒤 숫자만 계산하면 되나? 싶었지만 예시를 보니 일반적으로 우리가 아는 계산순서로 되어있는 것을 보고 그대로 구현했다. 그래도 차근차근 설명해보겠다.

1. 일반적인 연산

   • 우리가 아는 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산까지 모두 가능하다.
   • 곱셈, 나눗셈, 나머지 계산이 덧셈, 뺄셈보다 먼저 수행된다.

2. AC / C 버튼

   • AC 버튼을 누르면 기존의 눌렀던 모든 숫자와 연산자가 삭제된다.
   • C 버튼을 누르면 마지막에 입력됐던 숫자나 연산자가 사라진다.

3. 연산자 뒤에 "="을 입력하면 alert로 알려준다.
   

4. 계산이 10자리를 넘어가면 Infinity로 표시한다.
   

5. "0/0"같이 계산이 이상한 경우 숫자 아님을 표시한다.
   

참여 소감

처음에 코육대를 한다고 들었을 때 마침 이번 연휴에 시골도 안가게 되었는데 재밌겠다는 마음으로 참가하였다. 그리고 과제가 발표되던 날 세뱃돈 계산기를 보고 이거는 3시간이면 하겠네 싶었다. 하지만 왠걸 초기 생각을 조금만 하고 작업에 들어가니 뭔가를 진행하다보면 어? 이거 추가해야하는데 하면서 함수를 다시 다 짜는 상황이 많이 발생했다. 이래서 초기에 시작하기 전에 충분한 생각과 설계가 필요하다고 느꼈다.

기술 스택 선정이유

처음에는 토이 프로젝트 느낌으로 한번도 사용해보지 않은 기술들을 사용해볼려고 했다. astro, sveletkit 둘 중 하나를 사용해볼려고 했는데 생각보다 집안행사에 불려가서 시간을 많이 뺏겨 결국 가장 익숙한 Nextjs를 사용했다. 사실 router기능도 필요없고 단순하게 한페이지만 필요해서 굳이 Nextjs까지도 필요없었는데 vercel에 간편하게 배포하기 위해 Nextjs를 사용했다.

그래도 뭐라도 연습해보자라는 생각으로 jest를 사용하는 법을 익혔다. 계산기에서 가장 중요한 로직인 계산하는 로직에 대해서 테스트 코드를 작성했다. 막연하게 테스트 코드에 대한 궁금증과 두려움이 있었는데 확실히 나중에 리팩토링이나 함수를 다시 작성해야 하는 일이 있을 때 테스트 코드가 있으면 함수가 정상적으로 작동한다는 검증을 할 수 있어서 왜 테스트 코드 작성을 중요하게 생각하는 지 알 수 있었다.

어려웠던 점

처음에는 만만하게 보고 시작했다. 그냥 뭐 배열에 담아서 계산하면 되겠지~ 했는데 곱셈과 나눗셈, 나머지 계산을 먼저 해야하고 입력을 키보드가 아닌 버튼을 클릭하는 형식으로 받아야하기 때문에 연속된 숫자는 어떻게 처리하지? 라는 생각에 처음부터 설계를 잘하고 시작했으면 이렇게까지 오래 걸리지 않았을텐데 하는 아쉬움이 남았다.

항해 플러스 코육대 이벤트 페이지

세뱃돈 계산기: https://calculate-money-two.vercel.app/