[1주차] 천동현 숫자 야구 게임 기능 구현 미션 제출합니다#41
Conversation
There was a problem hiding this comment.
Pull request overview
숫자 야구 게임을 브라우저에서 동작하도록 MVC 구조로 구성하고, 입력/출력(View), 게임 로직(Model), 이벤트 흐름(Controller)을 분리해 구현한 PR입니다.
Changes:
- Controller/View/Model로 역할을 분리해 게임 진행 및 UI 업데이트 흐름을 구성
- 입력값 유효성 검사 로직을
utils/validation.js로 분리 - HTML에서 결과 영역/재시작 버튼 초기 상태 및 submit 버튼 동작(type) 조정
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/OutputView.js | 결과 출력/에러 알림/재시작 버튼 노출 및 바인딩 처리 |
| src/views/InputView.js | 입력 제출 이벤트 바인딩 및 입력 초기화 |
| src/utils/validation.js | 입력값(숫자/길이/중복) 유효성 검사 유틸 추가 |
| src/model.js | 랜덤 숫자 생성 및 볼/스트라이크 계산 로직 구현 |
| src/controller.js | submit/restart 이벤트를 받아 model-view를 연결하는 제어 흐름 구현 |
| src/index.js | 컨트롤러 엔트리포인트 생성 |
| index.html | submit 버튼 type 지정, 결과 영역 초기화, 재시작 버튼 텍스트 조정 |
| docs/README.md | 구현 기능 목록 및 테스트 결과 문서화 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| onRestart() { | ||
| this.model.init(); |
| // 숫자가 아닌 경우 | ||
| for (let i = 0; i < inputNumber.length; i++) { | ||
| if ('0' > inputNumber[i] || inputNumber[i] > '9') { | ||
| throw new Error('숫자를 입력해 주세요.'); |
| ##📄구현 기능 목록 | ||
| ###1. 임의의 숫자 생성 | ||
| - 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. | ||
| - 컴퓨터의 랜덤 값은 반드시 JavaScript의 Math.random 대신 MissionUtils 라이브러리의 Random.pickNumberInRange를 사용해 구한다. | ||
|
|
||
| ###2. 유효한 값 입력받기 | ||
| - 1에서 9까지 서로 다른 수 3개 | ||
| - 사용자가 잘못된 값을 입력한 경우 alert으로 에러 메시지를 보여주고, 다시 입력할 수 있게 한다. | ||
|
|
||
| ###3. 정답 검사 | ||
| - 스트라이크: 같은 수가 같은 자리에 있을 때 | ||
| - 볼: 같은 수가 다른 자리에 있을 때 | ||
| - 낫싱: 같은 수가 전혀 없을 때 | ||
| - 정답 여부 바환 | ||
|
|
||
| ###4. 게임의 종료 | ||
| - 임의의 숫자 3개를 모두 맞출 경우 게임 종료 | ||
| - 게임 종료 시 재시작 버튼 노출 | ||
|
|
||
| ###5. 재시작 | ||
| - 재시작 버튼 클릭 시 게임 재시작 | ||
|
|
||
|
|
||
| ###📝테스트 결과 |
| import {isDuplicate, checkValidity} from './utils/validation.js'; | ||
|
|
||
| export default class BaseballGame { | ||
| constructor() { | ||
| this.randomNumber = this.getRandomNumber(); | ||
| } | ||
|
|
||
| getRandomNumber() { | ||
| const tempArr = []; | ||
|
|
||
| while (tempArr.length < 3) { | ||
| const tempNumber = MissionUtils.Random.pickNumberInRange(1, 9); | ||
| tempArr.push(tempNumber); | ||
|
|
||
| if(isDuplicate(tempArr)) { | ||
| tempArr.pop(); | ||
| } | ||
| } | ||
|
|
||
| console.log("RandomNumber: "+ tempArr) | ||
| return tempArr; | ||
| } | ||
|
|
||
| checkValidity(inputNumber) { | ||
| checkValidity(inputNumber); | ||
| } |
| onRestart() { | ||
| this.model.init(); | ||
| this.inputView.clearInput(); | ||
| this.outputView.clearResult(); | ||
| } |
realcdh
changed the title
|
안녕하세요, 동현님! Git을 다루는게 쉬운 일은 아니죠.. PR도 그렇고 커밋이 다 날아가는 경험을 했다니 마음이 아픕니다 ㅠㅠ
저는 의미를 충분히 전달할 수 있는 네이밍이 좋은 네이밍이라고 생각해요! const tempNumber = MissionUtils.Random.pickNumberInRange(1, 9); // 임시 숫자(직역)
const pickedNumber = MissionUtils.Random.pickNumberInRange(1, 9); // 뽑힌 숫자(좋은 예시일지 모르겠지만) 이런 식으로 의미가 있는 단어를 붙인다거나, showError(errorMessage){} // 모든 에러 메시지인가?
renderErrorMessage(errorMessage){} // 아, 랜더 과정에서의 에러 메시지인가보다좀 더 어떤 역할을 하는 변수/함수 인지 특정할 수 있도록 네이밍을 해주시면 좋을거 같아요. 조금 더 설명을 보태자면, 자신이 설계하고 작성한 코드는 스스로 알아보기 쉽지만, 동료가 읽게될 때에는 당연히 파악하기 어려워요. 코드를 읽는 사람의 입장에서 변수명이 의미를 파악하는데 도움을 준다면 길어도 환영할거라고 생각해요!! 이번에는 첫 미션인만큼 미션의 요구사항과 MVC 패턴을 위주로 살펴보고자 했어요. |
ChangwooJ
left a comment
ChangwooJ
left a comment
There was a problem hiding this comment.
수정되면 좋을 부분들을 전부 잘 반영해주셨네요!
마지막으로 ==만 생각하신대로 수정해보시고, createResultMessage에 성공 기준에 ball만 빼면 될거 같아요!
더 궁금하거나 의아한 점이 있다면 말씀해주세요~
일단 approve 하겠습니다:)
안녕하세요. 4기 FE 천동현(@realcdh)입니다.
작일 받은 피드백 반영하여 새로운 PR 제출합니다(작일 피드백 받은 PR은 제대로 된 위치가 아니라 생각하여 closed 했습니다..!)
먼저 기능 구현 부분입니다.
📄구현 기능
컴퓨터의 랜덤 값은 반드시 JavaScript의 Math.random 대신 MissionUtils 라이브러리의 Random.pickNumberInRange를 사용해 구한다.
♻️디자인패턴
##MVC 패턴
#MVC 디자인 패턴을 적용했습니다
MVC 패턴 커밋을 푸시하는 과정에서 전체 프로젝트가 다 날라가서 처음부터 다시 작성하는 슬픈 일이 있었습니다.. ㅠ
🙋질의사항
#변수 및 함수의 이름을 작명하며 많은 고민을 했습니다. 예를 들어, 볼의 개수를 ball 로만 할지 ballCount로 할지 부터 시작하여 에러 메시지를 띄워주는 함수를 **showError(error)**로 할지 renderErrorMessage(errorMessage) 등으로 할지... -> 리뷰어님께서는 이러한 고민을 어떻게 해결하시는지 궁금합니다!
긴 글 읽어주셔서 감사합니다.
요즘 꽃샘 추위가 기승을 부리는데 건강 잘 챙기셔서 좋은 봄 맞이하시기 바랍니다 :)