221117 - 답정너 계산기 (React Native)

---

답정너 계산기 🔫

 

오늘은 Tech-Verse (https://tech-verse.me/)를 ASMR로 들으면서

 

간단한 계산기 게임(?)을 만들었다.

 

어제 있었던 코딩 테스트에서 작성했던 계산기 코드를 사용했다.

 

 

초등학교 1학년이 풀기 적합한 난이도!

 

정해진 답이 나오도록 숫자와 기호를 입력하면

 

마지막에 나타나는 결과 확인하기 버튼을 눌러서 정답을 확인하고,

 

연속 정답 횟수를 계속 쌓을 수 있다.

 

 

---

답정너 계산기의 기본 기능

UI 구상

• 예상 값을 랜덤 숫자로 정하고, 숫자 3개와 기호 2개를 번갈아서 입력 받도록 한다.
  • 숫자는 2자리 이상 받을 수 없다.
  • 숫자와 기호를 자연스럽게 번갈아서 입력 받도록 한다.
  • 숫자 또는 기호를 지우거나 수정할 수 없다.
  • 사칙 연산 순서에 상관 없이 앞에서부터 계산한다.(이거 수정하면 좋을 듯)

 

• 예상 값과 결괏값이 같다면 정답
  • 연속 정답 횟수를 카운팅 한다.
  • 한 문제라도 틀리면 연속 정답 횟수를 초기화한다.
  • 소수점 자리는 3자리까지 표시

 

• 스코어 초기화 버튼을 누르면, 연속 정답 횟수를 포함한 state를 전부 초기화한다.

 

---

추가할 만한 기능

일요일에 시간이 된다면 추가해보도록 하자!

 

1. 기호마다 사용할 수 있는 횟수를 정하기

 

  - 예를 들어 기호 50개를 랜덤으로 나눠줬을 때, 유저가 어느 스코어까지 올라갈 수 있을지?

 

 

2. 사용하는 기호에 따라 점수를 다르게 설정하기

 

  - "+", "-" 기호는 점수가 낮게

  - 스코어 기준과 계산이 필요!

 

 

3. 난이도가 높아지면 랜덤으로 사용할 수 없는 숫자, 기호를 설정

 

  - 3번째 이상일 때, 숫자 하나 사라짐

  - 6번째 이상일 때, 기호 하나 사라짐

  - 9번째 이상일 때, 숫자 하나 더 사라짐

 

 

4. 상태에 따라 버튼 활성화 표시

 

-  modeToggle / answerMode

- 두 가지 State에 맞게 색상으로 버튼 활성화 표현하기

- alert보다 친절한 UX 구현 필요

 

---

결론 🌾

 

코딩 테스트에서 작성했던 코드를 사용하기 때문에,

 

계산기 모양의 view만 그리면 구현이 쉬울 거라고 생각했다.

 

계산식에 사용할 state와, 일부 상태 관리만 있으면 된다고 생각했었는데

 

아니나 다를까, 시간이 오래 걸렸다.😅

 

 

아직 작업량 구분이 안 가는 레벨이라는 것이기 때문에

 

연습과 경험이 많이 필요한 것 같다.

 

---

상태 관리 내용

- modeToggle / true: 숫자, false: 기호

숫자일 때 (true)
숫자가 없을 때, 숫자를 누르면 모드가 변경되지 않음
숫자 길이가 1 일 때, 숫자를 누르면 모드가 변경되지 않음
숫자 길이가 2 이 되면 false로 모드 변경
숫자가 없을 때, 기호를 누르면 모드가 변경되지 않음
숫자가 있을 때, 기호를 누르면 false로 모드 변경

기호일 때 (false)
기호가 없을 때, 숫자를 누르면 모드가 변경되지 않음
기호가 있을 때, 숫자를 누르면 모드가 true로 변경됨
기호가 없을 때, 기호를 누르면 모드가 변경되지 않음
기호가 있을 때, 기호를 누르면 모드가 변경되지 않음(기호를 덮어씀)

숫자 배열 length가 3일 때, 모드가 false라면?
⇒ 결과를 연산하는 버튼 활성화

true일 때 숫자를 클릭하면, 숫자 입력
true일 때 기호를 클릭하면, nextSign 하고 false
false일 때, 숫자를 클릭하면, nextNumber 하고 true
false일 때, 기호를 클릭하면, 기호 변경

- answerMode : 결과 확인하기 활성화
마지막 단계(signs.length >= 2 && nums.length >= 3) 일 때 true
true일 때, 결과 보는 버튼 랜더링, 결과 버튼 누르면 answer state에 값 전달
다음 문제를 시작할 때 false