[클린코드 2기 정현수] 자동차 경주 미션 STEP2 #76
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- cypress-watch-and-reload 설치 - cypress 설치
- cypress 실행 스크립트 추가
- 자동차 이름 입력창과 버튼을 볼 수 있는지 실패하는 테스트 작성
- 시도 횟수 폼은 자동차 이름 입력 후 렌더링 할 예정
- 5글자 이하인지 확인 - 자동차 이름이 입력됐는지 확인
- 알맞은 자동차 이름들을 넣었을 때 시도 횟수 템플릿을 보여주도록 구현
- 0보다 큰지 확인
- 1보다 작을 경우 경고창 띄우기 구현
- 처음 render하는 template에 section tag들을 미리 작성
- 만약 시도 횟수가 잘 입력되었다면 게임 보드 위에 플레이어 수 만큼 children을 잘 가지고 있는지 확인
- Car 객체를 만들어서 이름을 부여
- 0에서 9까지 숫자를 랜덤으로 뽑는 함수 구현 - 3이 넘으면 전진 - 각 자동차마다 gameResult 배열로 stop인지 advance인지 담음
- 애플리케이션 전체 렌더링 함수 모듈화
- view/TryCount 파일에서 tryCountFormView로 모듈화
- RacingCarGame 컨트롤러를 생성해서 모든 게임 관련 로직들을 해당 컨트롤러에 삽입 - 게임 모델, 자동차 모델에 필요한 데이터들은 model 폴더에 따로 정의
- index.js -> number.js로 변경
- pickRandomNumberBetweenZeroToNine에서 조금 더 유틸스럽게 pickNumberInRange으로 변경하고 랜덤 시작 range, 끝 range를 지정하도록 변경
- i에서 조금 더 직관적인 carName으로 변경
- 검증에 통과하지 못하면 다시 input에 focus하도록 구현 - 엔터를 눌렀을 때, 버튼을 눌렀을 때 둘 다 submit 되도록 구현
- 없어도 똑같이 동작함 - visit가 reload와 똑같게 동작함
- constructor로 이동
- try-catch를 validation안에서 하는 것이 아니라 밖에서 진행 - alert & focus를 validation 함수안에서 진행하는 것이 아니라 밖에서 진행
- CAR_NAME_SPLITTER으로 생성 - ',' 기준으로 나누고 그 뒤에 자동차 객체 생성전에 trim()으로 공백 제거
- View를 인스턴스화 시켜서 focus, 또는 render 같은 역할을 하도록 분리
- index 파일에서 View suffix를 붙이도록 하고 파일명 자체는 suffix를 삭제
- util쪽에 가깝다고 생각해서 util, 상수와 같은 라인에 배치
- RacingCarGameResult에서 RacingCarGameProgressSection으로 변경
- 자동차들을 돌면서 advance의 수를 확인해 제일 많이 나간 자동차들의 이름을 뽑는 식으로 구현
- 모든 view에 reset 메서드를 만들어서 innerHTML을 초기화
junghyeonsu
commented
Apr 9, 2022
Comment on lines
105
to
+109
| this.progressRacingResult(); | ||
| this.racingCarGameResultView.renderRacingGameResultTemplate(this.racingCarGameModel.cars); | ||
| this.racingCarGameProgressSectionView.renderRacingGameResultTemplate( | ||
| this.racingCarGameModel.cars, | ||
| ); | ||
| this.racingCarGameEndView.renderEndSection(this.racingCarGameModel.winnerCars); |
There was a problem hiding this comment.
시도 횟수 입력시 racingCarGameEndView에서 renderEndSection메서드로 우승자를 결정해서 렌더링하게 됩니다.
Comment on lines
+128
to
134
| restartGame() { | ||
| this.racingCarGameEndView.reset(); | ||
| this.racingCarGameProgressSectionView.reset(); | ||
| this.tryCountFormView.reset(); | ||
| this.racingCarGameView.reset(); | ||
| } | ||
| } |
Comment on lines
+12
to
+14
| get advanceCount() { | ||
| return this.gameResult.filter(oneRoundResult => oneRoundResult === GAME.ADVANCE).length; | ||
| } |
There was a problem hiding this comment.
Car 인스턴스에 gameResult 가 ['advance', 'stop', 'advance'] 이런식으로 담겨져있습니다. (tryCount가 3일 때)
그래서 advanceCount 메서드를 호출하면 advance가 몇 개 인지 확인할 수 있도록 했습니다.
Comment on lines
+10
to
+13
| get winnerCars() { | ||
| const maxAdvance = Math.max(...this.cars.map(car => car.advanceCount)); | ||
| return this.cars.filter(car => car.advanceCount === maxAdvance).map(car => car.name); | ||
| } |
There was a problem hiding this comment.
RacingCarGame 인스턴스에서 winnerCars 메서드를 호출하면
각각의 Car 인스턴스에서 advanceCount 가져와서 가장 높은 advanceCount를 판단하고
가장 높은 advanceCount를 가진 Car 인스턴스를 반환하는 메서드입니다.
| @@ -0,0 +1,34 @@ | |||
| import { DOM, GAME } from '../constants.js'; | |||
There was a problem hiding this comment.
RacingCarGameResultView에서 RacingCarGameProgressSectionView으로 이름을 바꿨습니다.
Comment on lines
+8
to
+11
| reset() { | ||
| this.$target.innerHTML = null; | ||
| } | ||
|
|
Comment on lines
+23
to
+26
| reset() { | ||
| this.$target.innerHTML = null; | ||
| } | ||
|
|
Comment on lines
+23
to
+27
| reset() { | ||
| this.$carNamesInput.value = ''; | ||
| this.$carNamesInput.focus(); | ||
| } | ||
|
|
Comment on lines
+8
to
+11
| reset() { | ||
| this.$target.innerHTML = null; | ||
| } | ||
|
|
| @@ -0,0 +1,34 @@ | |||
| import { DOM } from '../constants.js'; | |||
There was a problem hiding this comment.
RacingCarGameEndSectionView 자동차 게임의 끝 부분이라서 이렇게 이름을 지었습니다.
jho2301
approved these changes
Apr 10, 2022
| @@ -45,6 +56,13 @@ class RacingCarGame { | |||
| } | |||
| } | |||
|
|
|||
| onClickRacingGame(target) { | |||
| if (target === $(`#${DOM.GAME_RESTART_BUTTON_ID}`)) { | |||
There was a problem hiding this comment.
querySelect를 하지않고 target.id 프로퍼티로 검증하거나,
핸들러를 직접 등록해준 것이기때문에 굳이 검증이 필요할까 싶어요
| @@ -0,0 +1,34 @@ | |||
| import { DOM } from '../constants.js'; | |||
Comment on lines
+10
to
+13
| get winnerCars() { | ||
| const maxAdvance = Math.max(...this.cars.map(car => car.advanceCount)); | ||
| return this.cars.filter(car => car.advanceCount === maxAdvance).map(car => car.name); | ||
| } |
Comment on lines
+128
to
134
| restartGame() { | ||
| this.racingCarGameEndView.reset(); | ||
| this.racingCarGameProgressSectionView.reset(); | ||
| this.tryCountFormView.reset(); | ||
| this.racingCarGameView.reset(); | ||
| } | ||
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
안녕하세요 리뷰어님!
STEP2 기능을 완료해서 리뷰요청드립니다!
데모 링크
🎯 2단계 요구사항
바뀐부분에 대해서 코멘트를 남겨놓겠습니다!
참고해서 리뷰해주시면 감사하겠습니다!