[Front-End] 우테코 프리코스 1주차 회고 (숫자 야구 게임)

2023. 10. 26. 11:39우아한 테크 코스/프리코스

나의 PR

가장 먼저 기능 목록 README.md를 아래와 같이 작성했었다.

6번의 게임 재시작 또는 종료 선택 부분에도 예외처리에 대한 기능을 명시했어야 됐을 것 같다.

 

기능목록을 작성한 뒤에 가장 먼저 했던건 미션 리포지토리를 fork하여 받은 템플릿 코드의 package.json 파일을 읽어봤다.

 

그리고 Jest 프레임워크를 사용하요 테스팅하는 법을 처음 접해봐서.

아니 사실은 테스팅 자체가 처음이였다. 그래서 사용법을 찾아보고, node 버전도 최신으로 업데이트 했다.

 

그리고 다른 분들의 PR을 살펴보니 단순히 기능 목록 뿐만 아니라, 구현할 클래스를 기능 별로 자세하게 기술해놓으신 분들도 많이 계셨었다.

 

그리고 아래는 기능 목록에 따라 구현한 전체 코드이다.

import { MissionUtils } from "@woowacourse/mission-utils";

class App {
  constructor() {
    /*
    생성자 생성 - 게임 초기화
    (게임이 진행중인지의 상태)
    */
    this.isGameRunning = true;
  }

  async play() {
    /*
    입력을 받을때까지 기다린 후 받은 입력 값으로 실행해야 하니 함수명에 async 키워드 사용,
    후에 입력 받는 로직에 await 키워드 사용
    */
    while (this.isGameRunning) {
      const answer = this.generateAnswer();
      MissionUtils.Console.print("숫자 야구 게임을 시작합니다.");

      let result;
      while (result !== "3스트라이크") {
        const input = await MissionUtils.Console.readLineAsync(
          "숫자를 입력해 해주세요 : "
        );
        if (
          //사용자로부터의 입력 처리
          input.length !== 3 ||
          new Set(input).size !== 3 ||
          [...input].some((item) => Number(item) < 1 || Number(item) > 9)
        ) {
          throw new Error("[ERROR] 잘못된 값을 입력하였습니다.");
        }
        result = this.checkAnswer(input, answer); // checkTarget 메소드는 판정결과를 return한다 ex) "3스트라이크"
        MissionUtils.Console.print(result);
      }

      /*
      게임 종료 조건을 충족하면 while문을 빠져나온다.
      test 파일에서 "2"에 대한 예측값으로 "게임 종료"로  설정해두었기 때문에 "게임 종료"라는 문구가 포함되어 있어야함.
      */
      MissionUtils.Console.print("3개의 숫자를 모두 맞히셨습니다! 게임 종료");

      const replay = await MissionUtils.Console.readLineAsync(
        "게임을 다시 시작하려면 1, 종료하려면 2를 입력하세요."
      );
       

      if (replay === "2") {
        this.isGameRunning = false;
      }
      /*
        relplay === "1" 의 조건과 그외 부분들에 대한 예외처리를 했어야 되는데!!!!!!!!!!!!!! ㅠㅠㅠㅠㅠ
      */
    }
  }

  generateAnswer() {
    /*
    랜덤한 정답을 생성하는 함수
    객체가 생성될 때 뿐만 아니라 사용자가 게임을 다시 시작할때도 정답을 다시 만들어줘야한다.
    */
    const answer = [];
    while (answer.length < 3) {
      const randomNum = MissionUtils.Random.pickNumberInRange(1, 9);
      if (!answer.includes(randomNum)) answer.push(randomNum); //중복 검사
    }

    return [...answer];
  }

  checkAnswer(target, answer) {
    //스트라이크, 볼, 낫싱 판정 메소드, 판정결과를 return해야 한다. ex) "3스트라이크"
    let balls = 0;
    let strikes = 0;

    for (let i = 0; i < 3; i++) {
      if (target[i] == answer[i]) {
        strikes++;
      } else if (answer.includes(Number(target[i]))) {
        balls++;
      }
    }

    if (strikes === 0 && balls === 0) return "낫싱";

    return `${balls ? balls + "볼" : ""} ${
      strikes ? strikes + "스트라이크" : ""
    }`.trim();
  }
}

export default App;

 

1주차 미션을 통해 내가 얻은 것들
1주차 미션을 진행하며 얻은 것들 미션이 끝난 뒤(코드 리뷰를 통해) 얻게 된 것들
바닐라 js로 구현하며 얻게된 Javascript의 기본지식들 기능 목록 작성의 중요성
양질의 내용을 얻기위해 찾아봐야할 곳들 매직 넘버란
Jest 프레임워크를 사용한 테스팅 방법 README.md 의 중요성
기능 목록 작성의 중요 다양한 테스트 샘플의 중요성
자바스크립트의 실행 컨텍스트에 대한 지식  

 

 

회고(회개)

저번주 목요일에 미션을 받아서 일주일동안 진행하고 어제는 소감문을 쓰는데 하루를 전부 쓰고 제출했다.

 

그리고 오늘 새벽에 코드 리뷰를 부탁하며 올라온 동기들의 PR 코드들을 하나씩 읽어봤다.

미션이 끝난 뒤 다른 분들의 PR을 보며 얻게 된 것들은 대부분이 나의 안일함에서 비롯된 것이다.

 

동기분들의 훌륭한 코드들을 보며 나의 모자람이 생생하게 느껴졌다.

 

특히 사용자가 게임이 종료된 뒤 게임을 재시작하려면 1, 종료하려면 2를 입력하도록 유도하는 부분이 있는데,

내가 이 부분에 1과 2가 아닌 다른 수들이 들어오는 것에 대한 예외처리를 하지 않았다는 것을 깨달았다.

 

템플릿으로 제공된 기본 테스트 파일을 통과했다고 안일해졌던 것과 기능 목록을 더 자세히 작성하지 않았던 것이

문제였던 것 같다.

 

그래도 이런 나의 부족함을 뼈저리게 느낄 수 있었던 것 자체로 큰 수확이었다고 생각한다.

 

1주차 미션에서 얻은 지식들과 나의 부족함을 기반으로 성장한 모습을 보여줄 수 있도록 노력해야겠다.