[프론트엔드] 1주차 숫자야구 회고

ckxo·2023년 10월 26일
0

woowacourse-precourse-6

목록 보기
1/1

📄 미션 및 요구사항

🚀 기능 요구 사항

기본적으로 1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임이다.

같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의 수를 맞추면 승리한다.

예) 상대방(컴퓨터)의 수가 425일 때
123을 제시한 경우 : 1스트라이크
456을 제시한 경우 : 1볼 1스트라이크
789를 제시한 경우 : 낫싱

위 숫자 야구 게임에서 상대방의 역할을 컴퓨터가 한다. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 서로 다른 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.

이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료된다.
게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다.
사용자가 잘못된 값을 입력한 경우 throw문을 사용해 예외를 발생시킨후 애플리케이션은 종료되어야 한다.

✅ 입출력 요구 사항

입력

서로 다른 3자리의 수
게임이 끝난 경우 재시작/종료를 구분하는 1과 2 중 하나의 수

출력

  • 입력한 수에 대한 결과를 볼, 스트라이크 개수로 표시
    1볼 1스트라이크

  • 하나도 없는 경우
    낫싱

  • 3개의 숫자를 모두 맞힐 경우
    3스트라이크

3개의 숫자를 모두 맞히셨습니다! 게임 종료
게임 시작 문구 출력
숫자 야구 게임을 시작합니다.
실행 결과 예시
숫자 야구 게임을 시작합니다.
숫자를 입력해주세요 : 123
1볼 1스트라이크
숫자를 입력해주세요 : 145
1볼
숫자를 입력해주세요 : 671
2볼
숫자를 입력해주세요 : 216
1스트라이크
숫자를 입력해주세요 : 713
3스트라이크
3개의 숫자를 모두 맞히셨습니다! 게임 종료
게임을 새로 시작하려면 1, 종료하려면 2를 입력하세요.
1
숫자를 입력해주세요 : 123
1볼

🎯 프로그래밍 요구 사항

Node.js 18.17.1 버전에서 실행 가능해야 한다. Node.js 18.17.1에서 정상적으로 동작하지 않을 경우 0점 처리한다.
프로그램 실행의 시작점은 App.js의 play 메서드이다. 아래와 같이 프로그램을 실행시킬 수 있어야 한다.

예시

const app = new App();
app.play();

package.json을 변경할 수 없고 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않는다. 순수 Vanilla JS로만 구현한다.
JavaScript 코드 컨벤션을 지키면서 프로그래밍 한다
프로그램 종료 시 process.exit()를 호출하지 않는다.
프로그램 구현이 완료되면 ApplicationTest의 모든 테스트가 성공해야 한다. 테스트가 실패할 경우 0점 처리한다.
프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 이름을 수정하거나 이동하지 않는다.

라이브러리

@woowacourse/mission-utils의 Random 및 Console API를 사용하여 구현해야 한다.
Random 값 추출은 Random.pickNumberInRange()를 활용한다.
사용자의 값을 입력 받고 출력하기 위해서는 Console.readLineAsync, Console.print를 활용한다.

사용 예시

const computer = [];
while (computer.length < 3) {
  const number = MissionUtils.Random.pickNumberInRange(1, 9);
  if (!computer.includes(number)) {
    computer.push(number);
  }
}

💡 미션 해결과정

1. 구현 기능 목록 정리

  1. 게임 시작 알림
  2. 컴퓨터: 1~9 중 서로 다른 세자리 수 입력
  3. 유저: 1~9 중 서로 다른 세자리 수 입력
  4. 컴퓨터와 유저의 수 비교
  5. 힌트(볼/스트라이크/낫싱) 출력
  6. 숫자를 맞출 때까지 위 2~4 과정 반복
  7. 유저: 게임 재시작/종료 선택

2. 기능 구현

아직은 class와 function의 큰 차이를 몰라서 우선 function으로 작성했다.

  1. startGame(): 게임 시작 함수
  2. getComputerNum(): 컴퓨터의 랜덤 숫자를 받아 줄 함수
  3. getUserNum(): 유저의 세 자리 수 입력을 받아 줄 함수
  4. compareNum(): 컴퓨터 숫자와 유저의 숫자를 비교해 줄 함수
  5. getHint(): 숫자 비교 후 힌트를 출력해 줄 함수
  6. reStartOrNot(): 게임 재시작/종료를 선택할 함수
  7. endGame(): 게임 종료 함수

이 외에 validation을 확인해 줄 함수가 있다.

3. 리팩토링

구현 코드에 대해 고칠 부분이 있으면 고치고, 기능별로 코드를 구분하거나 코드리뷰를 통해 받은 내용을 입히는 등의 과정을 거쳤다.

🫠 지키지 못 한 것들

우테코 6기 프론트엔드 프리코스에서는 Airbnb 자바스크립트 스타일 가이드를 기준으로 한다.
일단 기본적으로 상수명은 SNAKE_CASE로 한다고 적혀있었다.
그래서 맨 처음에 아래와 같이 상수명을 정했었다.

const USER_INPUT = ~~
const USER_NUMBER = ~~

그러나 후반부에 가서는 모두 소문자로 변경해버렸고, 코드리뷰에서 자바스크립트는 camel_case를 사용해야 한다는 의견을 받았다.

또한 템플릿 문자열을 사용하지 못했다.
아래가 그에 대한 예시이다.

// bad
var str = "Hello, " + name + "!";

// good
var str = `Hello, ${name}!`;

물론 제출을 마치고 나서 이러한 부분을 확인했기에 현재는 코드가 고쳐졌지만 이런 기본적인 것을 확인하지 못 한 내 자신이 너무 바보같다..

이번 미션에서는 여러 방면에서 실수를 많이 했던 것 같다.
다음 미션에서는 이러한 부분을 고쳐볼 수 있도록 리팩토링에 더 많은 시간을 투자해 볼 예정이다.

profile
ckxo

0개의 댓글