🎯 목표

프리코스 4주차까지의 피드백 사항 모두 반영하기

📝 기능 목록 작성

처음 숫자 야구 미션을 수행할 때는 기능 목록 작성에 정말 많은 노력을 들였었다. 기능 목록 뿐만 아니라 구체적인 구현 방향성도 설정하는 등 추후 수정 가능할 내용 마저도 모두 작성했었다.

변경 가능한 내용을 적는 것을 최대한 줄이고 순수하게 기능 목록과 예외 사항만을 적도록 노력했다.

기능 목록으로 처음 작성했던 내용이다. 숫자 야구 프로그램의 흐름을 보고 가장 필요할 것 같은 목록을 작성했다. 프로그램을 작성하던 중 계속해서 추가적인 기능들이 필요함을 느꼈고, 여러번의 목록 추가를 거쳐 다음과 같은 기능 목록으로 변화하게 되었다.

🧩 MVC 패턴 적용

4주차 미션을 수행할 때 비즈니스 로직과 UI 로직을 분리하고, 객체를 객체답게 사용해보기 위해 MVC 패턴을 적용했었다. 모델을 통해 값을 관리하고, 뷰를 통해 UI를 구성했다.

📊 모델

먼저 숫자 야구에 사용되는 값들을 정리해보았다.

• 컴퓨터가 생성하는 랜덤 숫자 (정답 값)
• 유저가 입력하는 숫자
• 볼, 스트라이크 개수
• 힌트 문구
  - ex) "1스트라이크", "2볼", "1볼 2스트라이크"
• 유저가 입력하는 재시작 여부

❗컴퓨터가 생성하는 랜덤 숫자 (정답 값)

유저가 정답을 맞추기 전까지 그 값은 변경되지 않고 기억 되어야 한다. 또, 유저가 정답을 맞췄을 때 재시작을 원한다면 새로운 값으로 변경되어야 한다. 이 값을 따로 저장하지 않고 필요할 때마다 생성해서 사용한다면 로직이 복잡해질 것 같아 모델에서 관리하도록 했다.

---

❗유저가 입력하는 숫자

유저가 정답을 맞추기 전까지 유저가 입력하는 숫자는 계속해서 변경될 것이다. 따라서 이 값을 저장하여 필요한 값들을 계산하기보다 입력이 발생할 때마다 그 값을 통해 필요한 값들을 계산하도록 했다.

---

❗볼, 스트라이크 개수

이 또한 유저의 입력값이 변경됨에 따라 계속해서 변경되는 값이다. 따라서 이 값도 저장하지 않고 유저의 입력이 발생할 때마다 계산하도록 했다.

---

❗힌트 문구

힌트 문구 또한 앞선 볼, 스트라이크 개수와 같은 이유로 유저의 입력이 발생할 때마다 계산하도록 했다.

---

❗유저가 입력하는 재시작 여부

유저의 재시작 여부는 게임이 종료되었을 시점에 단 한번만 사용되는 값이다. 따라서 이를 저장하지 않고, 입력이 발생했을 때 재시작을 판단하는 게임 로직이 실행되도록 했다.

최종적으로 모델에 저장할 값은 컴퓨터가 생성하는 랜덤 숫자 하나로 결정했다.

🖥️ 뷰

먼저 주어진 숫자 야구의 예시를 보자.

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

예시를 통해 필요한 UI 로직을 정리해보았다.

• 유저 숫자 입력 기능
• 재시작 여부 입력 기능
• 힌트 출력 기능
• 시작, 종료 문구 출력 기능

⌨️ 입력 기능

입력 기능 두 가지는 콜백 함수를 이용하여 InputView 객체에서 처리하도록 했다.

function readUserNumber(callback) {
  Console.readLine(GuideString.INPUT_NUMBER, (input) => {
    InputView.validateUserNumber(input);
    callback(input);
  });
},

function readRestartCommand(callback) {
  Console.readLine(GuideString.RESTART, (input) => {
    InputView.validateRestartCommand(input);
    callback(input);
  });
}

🖨️ 출력 기능

출력기능 중 힌트를 출력하는 기능은 다음과 같은 경우의 수가 존재한다.

1. 볼만 있는 경우
2. 스트라이크만 있는 경우
3. 볼, 스트라이크 모두 있는 경우
4. 볼, 스트라이크 모두 없는 경우

Output객체에서 볼, 스트라이크 개수를 인자로 받아 위 4가지 경우에 따라 힌트를 출력하는 함수를 추가했다.

4가지 경우 중 3번의 경우엔 볼, 스트라이크 힌트 사이에 공백을 추가하여 출력해야 하므로 다른 3가지 경우와 출력 방식이 달라지게 된다.

이를 join 메서드를 활용하여 다음과 같이 해결했다.

printHintString(strikeCount, ballCount) {
    const hint = [];
    if (ballCount !== 0) hint.push(`${ballCount}볼`);
    if (strikeCount !== 0) hint.push(`${strikeCount}스트라이크`);
    if (ballCount === 0 && strikeCount === 0) hint.push(`낫싱`);

    Console.print(hint.join(" "));
  },

🎛️ 컨트롤러

모델은 정답 값 필드, 볼 개수와 스트라이크 개수를 각각 반환해주는 메서드, 정답 값을 교체하는 메서드를 가지고 있다. 컨트롤러에서는 이를 이용해 다음의 로직을 수행한다.

• 정답 값 생성
• 유저 입력에 따른 힌트 출력
  1. 뷰의 유저 입력 메서드 호출
  2. 모델의 볼 스트라이크 개수 산출 메서드 호출
  3. 뷰의 힌트 출력 메서드 호출
• 스트라이크 개수에 따라 메서드 호출
  1. 3스트라이크 => 뷰의 재시작 여부 입력 메서드 호출
  2. !3스트라이크 => 뷰의 유저 입력 메서드 호출
• 재시작 여부에 따라 메서드 호출
  1. 1 입력 (재시작) => 모델의 정답 교체 메서드 호출, 뷰의 유저 입력 메서드 호출
  2. 2 입력 (종료) => Console 모듈의 close 메서드 호출

위에서 보는 것과 같이 컨트롤러는 모델과 뷰의 메서드를 로직에 맞게 호출하여 게임을 진행하는 역할을 수행하도록 작성했다.

🤙 상수 사용

피드백 사항에 포함되어 있었지만 최근까지 나는 상수 사용의 이유를 명확히 설명할 수 없었다. 그러다 우테코 크루들이 학습한 내용을 정리, 공유하는 Tecoble의 하드 코딩을 피해라을 읽고 그 해답을 얻을 수 있었다.

간단히 말하자면 상수를 사용하면 해당 수치의 의미를 쉽게 파악할 수 있고, 변경에 유연하게 대처할 수 있게 된다. 따라서 이번에 숫자야구에서 이를 적용해보고자 했다.

🧐 숫자 야구에서 변경될 수 있는 값?

프리코스 미션에서 숫자 야구는 3개의 숫자를 맞추는 게임이었다. 이때 이 3개의 숫자를 결정하는 3이란 숫자를 변경하면 3개 이상의 여러가지 숫자를 맞추는 숫자 야구로 게임이 바뀔 수 있다.

🔧 적용

이를 적용해보고자 /constants/Constant.js에 numberSize라는 상수를 선언해두고, 이를 사용하도록 코드를 작성했다.

// 랜덤 값 생성 함수
function generateRandomNumber(size) {
  const randomNumbers = [];

  while (randomNumbers.length < size) {
    const newRandomNumber = Random.pickNumberInRange(1, 9);
    if (!randomNumbers.includes(newRandomNumber))
      randomNumbers.push(newRandomNumber);
  }

  return randomNumbers;
}

// 랜덤 값 생성 함수 사용
generateRandomNumber(numberSize);

위 함수는 랜덤 숫자를 생성하는 함수이다. size를 입력 받아 그 개수 만큼의 랜덤한 숫자를 생성해주는 역할을 수행한다. 이를 호출할 때 numberSize를 사용하도록 했다.

// 상수 변경에 따라 출력 문구 변경
const numberSize = 3;

const GuideString = Object.freeze({
  START: "숫자 야구 게임을 시작합니다.",
  INPUT_NUMBER: "숫자를 입력해주세요 : ",
  RESTART: "게임을 새로 시작하려면 1, 종료하려면 2를 입력하세요.\n",
  END: `${numberSize}개의 숫자를 모두 맞히셨습니다! 게임 종료`,
});

const ErrorString = Object.freeze({
  USER_NUMBER_LENGTH_ERROR: `입력값의 개수가 유효하지 않습니다. ${numberSize}개의 숫자를 입력해주세요.`,
  USER_NUMBER_NOT_NUMBER_ERROR: `입력값에 숫자가 아닌 다른 값이 포함돼있습니다. 숫자만 입력해주세요.`,
  USER_NUMBER_DUPLICATE_ERROR: `입력값에 중복이 포함돼있습니다. 중복되지 않는 숫자를 입력해주세요.`,
  RESTART_COMMAND_NOT_COMMAND_ERROR: `입력값에 1, 2가 아닌 다른 값이 포함돼있습니다. 1과 2중 하나를 선택해 입력해주세요.`,
  RESTART_COMMAND_LENGTH_ERROR: `입력값의 개수가 유효하지 않습니다. 1과 2중 하나를 선택해 입력해주세요.`,
});

위 객체들은 출력 문구를 모아놓은 객체이다. numberSize에 따라 정답 값의 개수가 달라지므로 그에 따른 출력 문구를 저장하게 된다.

if (input.length !== numberSize)
  throw new Error(ErrorString.USER_NUMBER_LENGTH_ERROR);

위 함수는 사용자의 입력값의 유효성을 검사하는 함수의 조건 일부이다. 이 함수는 입력값이 numberSize와 같지 않다면 에러를 발생시키는 역할을 수행한다.

function handleInputOrEnd(strikeCount, ballCount) {
  printHintString(strikeCount, ballCount);

  if (strikeCount === numberSize) {
    printEndString();
    return this.inputRestartCommand();
  }
  return this.inputUserNumber();
}

위 함수는 컨트롤러의 게임 진행을 결정하는 메서드이다. 이 메서드는 스트라이크 개수가 numberSize와 같아지면 뷰의 재시작 여부 입력 메서드를 호출하는 역할을 수행한다.

❗상수를 사용하는 이유는 좀 더 학습한 뒤에 나만의 언어로 자세히 정리해 볼 계획이다.

👋 마무리

숫자 야구는 지난 프리코스 2주차에 이미 완성했던 미션이어서 솔직히 다시 시작할 때 이게 얼마나 도움이 될까 의심을 했었다. 하지만 지난 피드백을 모두 반영하여 코드를 작성하며 이전에 수행했던 것들이 진짜 내 것이 되는 과정을 경험했다. 또 혹시 모를 최종 테스트를 대비하여 수행해본 만큼 최종 테스트에 가게 된다면 이번 경험을 통해 조금 더 자신있게 테스트를 수행할 수 있을 것 같다.

전체 코드는 다음 링크를 통해 확인해볼 수 있다.

• 프리코스 2주차 코드
• 프리코스 이후 코드