🎯 목표

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

🧩 MVC 패턴 적용

4주차에 처음 사용해본 MVC 패턴을 연습하고자 지나온 모든 프리코스 미션에 MVC 패턴을 적용해보고 있다.

이전 미션이었던 숫자 야구에 적용한 내용은 🏃‍♀️프리코스 다시 풀기 - 숫자 야구에서 확인할 수 있다.

📊 모델

먼저 로또 게임에 사용되는 값들을 정리해보았다.

• 로또 구입 금액
• 구매한 각 로또들의 로또 번호
• 당첨 번호
• 보너스 번호
• 당첨 통계 (등수)
• 총 수익률

❗로또 구입 금액

로또 구입 금액은 구입할 로또의 개수를 정할 때 사용된다. 거꾸로 생각해보면 구입한 로또의 개수가 있다면 굳이 저장하지 않아도 되는 값인 것이다. 따라서 로또 구입 금액을 따로 저장하지 않기로 결정했다.

---

❗구매한 각 로또들의 로또 번호

로또 게임에는 #numbers 라는 필드를 가진 Lotto 객체가 주어져 있다. 입력된 구입 금액에 맞는 개수의 Lotto 인스턴스를 생성하여 구입한 로또들의 로또 번호를 관리하기로 결정했다.

---

❗당첨 번호

주어진 로또 게임에서는 구입한 로또들의 각 로또 번호와 당첨번호를 비교해 당첨 등수 통계, 수익률을 계산하기 때문에 당첨 번호는 따로 저장하여 관리하기로 결정했다.

---

❗보너스 번호

앞의 당첨 번호와 마찬가지로 당첨 등수 통계, 수익률을 계산할 때 보너스 번호가 쓰이므로 보너스 번호 또한 따로 저장하여 관리하기로 결정했다.

---

❗당첨 통계 (등수)

당첨 통계는 구입한 로또들의 로또 번호, 당첨 번호, 보너스 번호가 있으면 계산 가능한 값이기 때문에 따로 저장하지 않기로 결정했다.

---

❗총 수익률

앞의 당첨 통계와 마찬가지로 총 수익률도 다른 값들로 계산할 수 있는 값이기 때문에 따로 저장하지 않도록 결정했다.

최종적으로 모델에 저장할 값은 로또 번호, 당첨 번호, 보너스 번호로 결정했다.

🖥️ 뷰

먼저 주어진 로또 게임의 실행 예시를 보자

구입금액을 입력해 주세요.
8000

8개를 구매했습니다.
[8, 21, 23, 41, 42, 43]
[3, 5, 11, 16, 32, 38]
[7, 11, 16, 35, 36, 44]
[1, 8, 11, 31, 41, 42]
[13, 14, 16, 38, 42, 45]
[7, 11, 30, 40, 42, 43]
[2, 13, 22, 32, 38, 45]
[1, 3, 5, 14, 22, 45]

당첨 번호를 입력해 주세요.
1,2,3,4,5,6

보너스 번호를 입력해 주세요.
7

당첨 통계
---
3개 일치 (5,000원) - 1개
4개 일치 (50,000원) - 0개
5개 일치 (1,500,000원) - 0개
5개 일치, 보너스 볼 일치 (30,000,000원) - 0개
6개 일치 (2,000,000,000원) - 0개
총 수익률은 62.5%입니다.

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

• 구입 금액 입력 기능
• 당첨 번호 입력 기능
• 보너스 번호 입력 기능
• 구입한 로또 개수 출력 기능
• 구입한 로또 번호 출력 기능
• 당첨 통계 출력 기능

⌨️ 입력 기능

입력 기능 3가지는 InputView 객체에서 처리하도록 구현했다.

const InputView = {
  readPurchasePrice(callback) {
    this.getUserInput(GuideString.INPUT_PURCHASE_PRICE, callback);
  },

  readWinningNumber(callback) {
    this.getUserInput(GuideString.INPUT_WINNING_NUMBER, callback);
  },

  readBonusNumber(callback) {
    this.getUserInput(GuideString.INPUT_BONUS_NUMBER, callback);
  },

  getUserInput(guide, callback) {
    Console.readLine(guide, (input) => {
      callback(input);
    });
  },
};

세 입력 모두 구현 요구사항에 있던 Console.readLine을 통해 사용자의 입력을 받아온다는 공통 부분이 있었다. 이 부분을 getUserInput으로 묶어 처리했고, 외부 함수에서 콜백을 통해 입력값을 처리할 수 있도록 구현했다.

🖨️ 출력 기능

구입한 로또 개수와 번호를 출력하는 기능은 각각 개수, 로또 번호 배열을 입력 받아 주어진 형식에 맞는 문자열로 바꾸어 출력하도록 구현했다.

printPurchaseAmount(amount) {
  Console.print(`${amount}개를 구매했습니다.`);
},

printLottos(lottos) {
  for (let i = 0; i < lottos.length; i++) {
    Console.print(`[${lottos[i].getSortedLottoNumber().join(", ")}]`);
  }
},

당첨 통계를 출력하는 기능에서 당첨 등수를 출력하는 부분은 반복문을 사용해 미리 지정해둔 출력 문구에 당첨 등수 배열의 값을 추가하여 출력하도록 구현했다.

printRankStatistic(winningStatistic) {
  const raps = winningStatistic.length;

  for (let i = 0; i < raps; i++) {
    Console.print(
      StatisticString[i] +
      `${winningStatistic[StaticNumber.TOTAL_LOTTO_RANKS - 1 - i]}개`
    );
  }
},

총 수익률을 출력하는 부분은 총 수익률을 입력받아 주어진 출력 형식에 맞는 문자열을 만들어 출력하도록 했고, 프로그램의 종료 지점이기 때문에 Console.close를 호출해 콘솔을 종료 시켜주도록 구현했다.

printRevenueRate(revenueRate) {
  Console.print(`총 수익률은 ${revenueRate}%입니다.`);
  Console.close();
},

🎛️ 컨트롤러

모델은 구입한 로또 객체 배열, 당첨 번호, 보너스 번호를 저장하고 있다. 그리고 각각의 값들을 반환하는 메서드, 당첨 등수 배열 반환 메서드, 수익률 반환 메서드를 가지고 있다.

컨트롤러에서는 이를 활용하여 다음과 같이 동작하도록 구현했다.

1. InputView 구입 금액 입력 메서드 호출
   
   
2. 구입 금액에 맞는 개수의 Lotto 객체 생성
   - OutputView 구입한 로또 출력 메서드 호출
   
   
3. InputView 당첨 번호 입력 메서드 호출
   
   
4. InputView 보너스 번호 입력 메서드 호출
   
   
5. 당첨 통계 계산 메서드 호출
   - OutputView 당첨 통계 출력 메서드 호출
   
   
6. 총 수익률 계산 메서드 호출
   • OutputView 총 수익률 출력 메서드 호출

위에서 보이는 것과 같이 컨트롤러는 메서드 호출만을 수행하는 방식으로 게임 로직을 동작하게 한다.

🔧 피어 리뷰 사항 반영하기

프리코스 이후 작성한 코드에 대해 피어 리뷰를 신청했는데 감사하게도 리뷰를 남겨준 분들이 계셨다. 처음 내가 생각했던 방식의 문제점과 개선 방안을 친절히 남겨주어 이를 적용해보았다.

⛔ getter, setter의 무분별한 사용

피어 리뷰를 통해 이야기 해주신 것 중 가장 어려웠던 부분이 이 부분이었다. setter를 많이 사용할수록 저장되는 값의 변경 위험성이 높아지게 된다. 따라서 출력을 위한 getter 등과 같이 꼭 필요한 경우를 제외하고 getter와 setter의 사용은 지양하는 것이 좋다. 하지만 피어 리뷰 내용을 보고난 후 내 코드를 보니 그렇지 못한 부분이 너무 많았다.

먼저 피어 리뷰 사항을 적용하기 전 코드를 보자.

class LottoGame{
  #lottos = [];
  #winningNumber;
  #bonusNumber;
 
  constructor() {}

  getLottos(){
    return this.#lottos;
  }

  setWinningNumber(winningNumber){
    this.#winningNumber = winningNumber;
  }

  setBonusNumber(bonusNumber){
    this.#bonusNumber = bonusNumber;
  }
}

위 코드는 모델로 사용했던 LottoGame 클래스 코드 중 문제가 되었던 부분이다. 모델의 각 필드 값을 외부의 값을 가져와 채워주는 모습을 확인할 수 있다.

이런 방식을 사용하게 된다면 모델 내부의 모든 값을 외부에서 제어할 수 있게 된다. 그러므로 값의 변경 위험성이 높아지게 된다.

class LottoGameController{
  #lottoGame = new LottoGame();
  
  constructor() {}

  inputPurchasePrice(){
    InputView.readPurchasePrice((input)=>{
      const purchaseAmount = input / 1000;
      
      for(let i = 0; i < purchaseAmount; i++){
        this.#lottoGame.getLottos()
          .push(new Lotto(LottoNumberGenerator.generate()));
      }  
    })
  }
}

위 코드는 컨트롤러의 일부이다. 반복문 부분을 보면 컨트롤러에서 모델의 값에 접근해 직접적으로 Lotto 인스턴스를 push 해주는 모습을 확인할 수 있다. 앞선 예시와 같이 이러한 코드를 사용하면 모델 내부의 값에 언제든지 접근하여 수정할 수 있게 되므로 좋지 못한 코드이다.

✅ 개선 방법: 클래스 분리

앞에서 이야기 했던 setter, getter의 무분별한 사용을 나는 클래스를 분리하는 방식을 통해 개선해보고자 했다.

LottoGame => PurchasedLottos, WinningNumber, BonusNumber

큰 하나의 모델을 여러 모델로 나누었다. 구입된 로또들, 당첨 번호, 보너스 번호 각각은 사용자의 입력에 따라 생성되어 저장되는 값들이다. 컨트롤러에 필드만 선언해두었다가 사용자의 입력에 맞추어 인스턴스를 생생해 필드에 저장하는 방식으로 변경해보았다. 변경된 코드를 보자.

class LottoGameController{
  #lottos;
  #winningNumber;
  #bonusNumber;
  
  constructor() {}
  
  inputPurchasePrice(){
    InputView.readPurchasePrice((input)=>{
      this.#lottos = new PurchasedLottos(input);
    });
  }

  inputWinningNumber(){
    InputView.readWinningNumber((input)=>{
      this.#winningNumber = new WinningNumber(input);
    });
  }

  inputBonusNumber(){
    InputView.readBonusNumber((input)=>{
      this.#bonusNumber = new BonusNumber(input);
    });
  }
}

// 구입한 로또 객체 배열 저장 모델
class PurchasedLottos{
  #lottos = [];
  
  constructor(input){
    validate(input);
    
    for(let i = 0; i < input / 1000; i++){
      this.#lottos.push(new Lotto(LottoNumberGenerator.generate());
    }
  }

  validate(input){
    // 구입 금액 유효성 검사 로직
  }

  getLottos(){
    return this.#lottos;
  }
}

// 당첨 번호 저장 모델
class WinningNumber{
  #winnigNumber;
  
  constructor(input){
    validate(input);
    
    this.#winningNuber = input.split(",");
  }

  validate(input){
    // 당첨 번호 유효성 검사 로직
  }

  getWinningNumber(){
    return this.#winningNumber;
  }
}

// 보너스 번호 저장 모델
class BonusNumber{
  #bonusNumber;
  
  constructor(input){
    validate(input);
    
    this.#bonusNumber = input;
  }

  validate(input){
    // 보너스 번호 유효성 검사 로직
  }

  getBonusNumber(){
    return this.#bonusNumber;
  }
}

이제는 입력이 발생할 때마다 각 모델의 생성자를 호출해 입력값을 인자로 넘겨주는 방식으로 필요한 값을 저장하게 되었다. 이전 방식과 달라진 점은 각 값에 접근할 수 있는 수단이 없어 한번 생성된 인스턴스의 값을 변경할 수 없게 되었다는 것이다.

⛔ 하드 코딩

하드코딩된 값은 그 값의 의미를 알기 어려운 경우가 있을 수 있고, 변경점이 생겼을 때 대처하기 어렵다는 단점을 가지고 있다. 따라서 의미있는 값들은 모두 상수화하여 관리하는 것이 좋다. 하지만 피어 리뷰를 보니 이번 내 코드에서는 그렇지 못한 부분들이 몇가지 있었다.

먼저 피어 리뷰를 반영하기 전 코드를 보자.

class Lotto{
  validate(numbers){
    if (numbers.length !== 6) 
      throw new Error(ErrorString.LOTTO_COUNT_ERROR);
    if (numbers.filter((v) => v > 45 || v < 1).length > 0)
      throw new Error(ErrorString.LOTTO_OUT_OF_RANGE_ERROR);
  }
}

위 코드는 구입 금액에 따라 생성되는 로또 클래스의 일부이다. validate 함수를 보면 내부에 numbers.length를 6이라는 숫자와 비교하는 부분이 있다. 이때 다른 코드들을 보지 않고 6이라는 숫자를 보면 어떤 의미를 갖는 값인지 알 수 없다. 또, numbers 배열에 filter 메서드를 사용하는 부분에서 사용된 45, 1이라는 값의 의미를 알 수 없다.

validatePurchasePrice(input){
  if (input % 1000 !== 0 || Number(input) === 0)
    throw new Error(ErrorString.PURCHASE_PRICE_UNIT_ERROR);
}

위 코드는 구입 금액 입력값의 유효성을 검사하는 코드이다. 이때 input % 1000 !== 0이라는 조건을 확인할 때 1000이란 숫자의 의미를 알 수 없다. 또한 앞서서 이야기한 값들을 변경해야하는 상황이 온다면 이를 대처하기가 어렵다.

✅ 개선 방법: 상수화

const StaticNumber = Object.freeze({
  PRICE_FOR_ONE_LOTTO: 1_000,
  LOTTO_NUMBER_RANGE_START: 1,
  LOTTO_NUMBER_RANGE_END: 45,
  LOTTO_NUMBER_COUNT: 6,
  TOTAL_LOTTO_RANKS: 5,
  REVENUE_SIGNIFICANT_FIGURES: 1,
});

하드 코딩된 값들을 의미를 파악하기 쉽고, 값 변경에 대처하기 쉽도록 하기 위해 다음과 같은 상수 객체를 만들었다. 이렇게 되면 해당 값들을 사용할 때 직접적으로 숫자를 사용하지 않고 미리 선언해둔 상수값을 사용하게 되므로 변경에 대처하기 쉽고 (상수 값만 변경하면 변경 사항 적용이 가능해짐), 상수의 이름을 통해 의미를 파악하기도 쉬워지게 된다.

나름 상수화를 해본다고 했지만 미처 생각하지 못한 부분들이 하드코딩되고 있다는 사실을 알게 되었다. 이번 피어 리뷰를 통해 좀 더 세세한 부분까지 상수화 하는 연습의 시간을 가지게 되었다.

👋 마무리

숫자 야구를 다시 풀어보았을 때 느끼는 점이 많아 로또 게임 또한 다시 시도해 보았다. 이미 프리코스 재시도까지 경험해본 후라 이전 피드백 사항을 잘 지켰다고 생각했었다. 하지만 피어 리뷰를 신청한 후 결과를 보니 생각보다 잘 지키지 못한 부분들이 많이 남았다는 것을 알게 되었다.

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

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

프리코스가 끝나고도 피어 리뷰를 남겨주신 분들 정말 감사합니다!!