Conversation
| <h3>📄 결과</h3> | ||
| <div id="result"></div> | ||
| <button id="game-restart-button">재시작</button> | ||
| <button id="game-restart-button" hidden>재시작</button> |
There was a problem hiding this comment.
[제안]
저는 hidden 말고 style="display: none" 으로 재시작 버튼 숨김 처리를 했는데 두 가지 방식의 차이점에 대해서 같이 알아볼까요?
There was a problem hiding this comment.
좋은 공부가 될 것 같습니다. 관련 내용은 마찬가지로 레포 README에 정리해두었습니다.
| } | ||
|
|
||
| /* | ||
| 문자열 변환은 Controller의 역할 |
There was a problem hiding this comment.
[질문]
문자열 변환을 Controller의 역할이라고 생각하신 이유가 궁금해요!
There was a problem hiding this comment.
1차로 숫자 야구 게임의 기능을 구현할 때는 play 메서드에서 문자열 변환을 한 번에 처리했는데, MVC 패턴을 적용할 때 Model의 기능을 더 엄밀하게 잡는 과정에서 Controller로 역할을 넘겨주었습니다. 숫자 야구 게임의 핵심 로직이 ball과 strike의 값을 계산해 넘겨주는 것까지이고, 문자열 계산은 데이터 가공의 영역이라는 생각 때문입니다.
그런데 말씀해주신 내용을 검토하다보니 미션의 프로그래밍 요구사항이 _play 메서드는 Stirng으로 결과값을 return 한다._라고 정의되어 있는 것을 다시 확인했습니다. 요구사항에 맞춰 다시 Model로 해당 로직을 옮겨오도록 하겠습니다.
| this.userInputNum = document.querySelector("#user-input"); | ||
| this.submitButton = document.querySelector("#submit"); | ||
| this.resultDiv = document.querySelector("#result"); | ||
| this.reStartButton = document.querySelector("#game-restart-button"); |
There was a problem hiding this comment.
[제안]
자바스크립트에서 HTML 요소를 담는 변수 이름 앞에 $를 붙이는 것은 자주 쓰이는 관례로 알고 있습니다! $가 붙어 있다면 이 변수에는 HTML 요소가 들어있다는 것을 시각적으로 빠르게 파악할 수 있어서 붙여 보면 어떨까요?
There was a problem hiding this comment.
말씀해주신 부분을 알아보니 HTML 요소를 담는 변수 이름 $접두사를 붙이면 해당 변수에 DOM 요소가 할당되어 있다는 것을 코드 상에서 직관적으로 보여줄 수 있다는 장점이 있다는 것을 알 수 있었습니다. 코드 가독성을 높일 수 있는 좋은 방법인 것 같아서 적용해보겠습니다. 감사합니다!
| this.userInputNum.value = ""; // 입력창 비우기 | ||
| this.userInputNum.focus(); // 커서 깜빡임 |
There was a problem hiding this comment.
[배움]
저는 에러 처리 시, alert만 띄우고 입력창을 비우고 포커싱을 주는 코드를 구현하지 않았는데 이 부분이 있다면 사용자가 다시 입력할 수 있게 유도할 수 있을 것 같습니다!
|
|
||
| // 컨트롤러가 넘겨준 결과(3스트라이크)를 화면에 그리기 | ||
| this.renderResult = function (resultString) { | ||
| if (resultString === "3스트라이크") { |
There was a problem hiding this comment.
[제안]
"3스트라이크"와 같은 게임 규칙은 Model에 들어가는 것이 더 바람직한 것 같아요.
There was a problem hiding this comment.
말씀해주신대로 3스트라이크와 같이 정답을 판별하는 기능은 바람직한 View의 역할과 맞지 않을 뿐더러 게임의 규칙에 해당하기 때문에 Model로 이동하는 것이 좋은 것 같습니다. 수정해보겠습니다.
| // 콜백 함수 | ||
| this.bindSubmitEvent = function (handler) { | ||
| this.submitButton.addEventListener("click", (event) => { | ||
| event.preventDefault(); |
There was a problem hiding this comment.
[논의]
저는 버튼 태그에 type="button"을 추가해서 해결했습니다.
스터디 세션 때 두 방법을 같이 정리하고 더 알아보면 좋을 것 같습니다!
There was a problem hiding this comment.
유성님 코드를 보니 button에 type 속성을 추가해서 해결할 수 있다는 것을 새롭게 알게 되었습니다. 두 방식의 차이점이나 장단점에 대해서는 레포 README에 작성하겠습니다.
| } */ | ||
|
|
||
| // js에서는 return A,B 형태 사용 불가 - , 마지막 값만 평가 -> 객체로 묶어줘야 함. | ||
| return { strike: strikeCnt, ball: ballCnt }; |
There was a problem hiding this comment.
[제안]
요구사항을 보면 play 메서드가 string을 반환하는 것으로 나와 있습니다. 객체가 아닌 실제 결과인 string을 반환하도록 수정하면 어떨까요?
There was a problem hiding this comment.
위의 답변과 같은 내용이라 참고해주시면 감사하겠습니다.
|
|
||
| **`play` 메서드 반환값 변경** | ||
|
|
||
| 문자열 조립이 Model의 역할인지 Controller의 역할인지 고민했다. 문자열 조립은 표현 로직이므로 Controller에서 담당하는 것이 적절하다고 판단하여, `play` 메서드는 `{ strike, ball }` 객체를 반환하도록 수정하고 문자열 조립은 Controller에서 처리하도록 분리했다. |
There was a problem hiding this comment.
[제안]
이 부분도 같이 수정 필요할 것 같아요!
변수명 통일성 수정 Co-authored-by: Yooseong Nam <102887277+meteorqz6@users.noreply.github.com>
meteorqz6
changed the title
2 participants
개인 목표 달성 여부
리뷰어에게
play메서드가{ strike, ball }객체를 반환하고 문자열 조립은 Controller에서 담당하도록 분리한 부분이 고민이었습니다.