계산기 구현 로직 생각해보기 🔨

코드스테이츠 2주차 일정을 보니 이틀 뒤에 계산기 기능을 구현하는 시간이 있어 혼자서 미리 생각해보는 시간을 가져보았다.

💬 계산기 기능 분석하기

계산기에는 어떤 기능들이 있어야 할까?

1. 숫자는 0부터 시작한다.
2. +/- 버튼을 누르면 숫자가 양수인 경우 -로 변환하고, 음수인 경우 +로 변환한다.
3. % 버튼을 누르면? 👉🏻 숫자를 퍼센트로 변환한다. (0인 경우 무시한다.)
4. 숫자를 입력하면 숫자가 표시되어야 하는 부분이 나타난다.
    a. 숫자를 입력하면 AC 버튼이 C로 바뀌어야 한다.
    b. C 버튼을 누르면 0으로 초기화한다.
    c. 숫자는 3자리마다 ‘,’ 표시를 해줘야 한다.
    d. 이 들어오면 그 이후부터는 ‘,’ 표시하지 않는다.
    e. 연산 기호를 누르기 전까지는 하나의 숫자로 계속해서 연결해야 한다.
5. 연산 기호를 누르면? 👉🏻 CSS를 변경시킨다. (배경색, 글자 색 반전) class 동적 추가
6. 숫자 → 연산 기호 → 숫자 → = 기호순으로 클릭하면 👉🏻 값을 계산 후 결과를 보여준다.
7. 숫자 → 연산 기호 → = 기호순으로 클릭하면 👉🏻 동일한 숫자를 연산하여 결과를 보여준다.

🙋🏻‍♂️ 저장해놔야 하는 값들이 있을까?

: 현재 값, 이전값, 연산자 그리고 화면에 출력되는 값을 변수로 선언해놓고 계속해서 변경해야 한다.

고민을 하고 있는 부분 🤔

상태가 변경되면 re-rendering을 한다 라는 생각을 가지고 프로그래밍하고 싶은데 어떤 것을 상태로 관리해야 할 지 고민이 되었다. 저장해놔야 하는 값들이 모두 상태라면 너무 많은 리렌더링을 하는 것은 아닌가 싶고, 리렌더링을 해야 하는 시점이 결과를 연산한 값이라면 상태는 화면에 출력될 값밖에 없다는 뜻인데 그렇다면 이것을 상태로 관리해야 할까? 라는 생각이 들었다.

또 하나 고민을 해야 할 부분은 함수는 하나의 역할만 해야 한다 라는 것이다. 함수를 어떻게 분리할 것인지도 고민을 해야할 것 같다. 현재로서는

// 화면에 출력되는 값을 업데이트하는 함수
// AC 버튼을 눌렀을 때 모든 것을 초기화하는 함수
// operation을 설정하는 함수
// operation을 해제하는 함수
// 연산자와 피연산자를 받아서 결과를 계산하는 함수

이렇게 만들어야하지 않을까 미리 생각해보았다. (물론 코드를 짜기 시작하면 많은 것들이 변할테지만..🥲)

🧮 생각해보면서 느꼈던 점

알고리즘에서 의사코드를 작성하듯이 프로그래밍을 하기 전에 미리 큰 틀을 생각해보는 것도 좋은 것 같다. 당장 생각나는 것들부터 작성하기 시작하면 이후에 수정해야 할 부분들이 한 두가지가 아니라는 것을 경험했기 때문이다.

내일은 반복문과 조건문 연습문제를 페어와 함께 풀어야 하는 날이니까 계산기는 잠시 제쳐두고 페어에 집중해야지.