feat: 11-DiceRoller 과제 구현(조인영)

[join0life]

📝 과제 요약

• 과제명: DiceRoller
• 소요 시간: 2시간

💡 설계 및 고민한 부분

AI 없이 스스로 설계하며 가장 신경 쓴 핵심 로직이나 아키텍처(컴포넌트 구조, 상태 관리 등), 혹은 사용자 경험(UX) 개선 사항을 적어주세요.

• 구현에 앞서 필요한 데이터와 컴포넌트 역할을 먼저 정리한 뒤 개발을 진행했습니다.
• DiceController와 Dices를 분리하여 입력(Form)과 화면 표시(UI)의 역할을 분리했습니다.
• DiceController는 form으로 구현해 값을 제출하는 의미를 명확히 했습니다.

📖 학습한 내용 및 어려웠던 점 (선택)

문제를 풀며 새롭게 알게 된 개념이나, 구현 중 막혔던 부분이 있다면 공유해 주세요.

• 입력값과 실제 렌더링되는 주사위 상태를 분리하는 방향을 생각해내지 못해서 처음에 헤맸습니다. 처음에는 inputCount와 diceCount를 분리하는 방법을 생각했다가, 추후 랜덤한 주사위 값을 렌더링해야 하는 점을 고려하여 상태를 아래 값으로 나눴습니다.

  • inputCount : 사용자가 입력 중인 값
  • dices : Roll 버튼을 눌렀을 때 생성되는 실제 주사위 배열

• 해당 방식은 Roll 버튼을 눌렀을 때만 새로운 배열을 생성하도록 하여 입력값이 변경될 때마다 화면이 즉시 변경되지 않습니다.

• input box의 min/max 속성으로 브라우저 유효성 검사를 구현했습니다. 해당 속성은 폼 제출시만 검사한다면 활용하기 좋지만, 입력 중에도 값을 제한하고 싶다면 JavaScript로 조작해야 한다는 점을 배웠습니다.

❓ 질문 사항 (선택)

라이브 리뷰 때 팀원들과 함께 토론하고 싶거나 의견이 궁금한 부분이 있다면 남겨주세요.

📸 스크린샷 (선택)

UI 관련 과제인 경우 결과 화면 캡처나 GIF를 첨부해 주세요.

[SanginJeong]

고생하셨습니다

[SanginJeong]

아니 이런 방법이....

[le2yunji]

DiceRoller 구현한 사람들 모두 같은 고민을 했네요 ! 🤣
고생하셨습니다 !