우아한테크코스 프리코스 : 1주차 회고

m_ngyeong·2023년 10월 27일

목록 보기

1/2

⚾️ 숫자 야구

🖥 프로그래밍 요구 사항

☑️ Node.js version 18.17.1 이상(npm version 9.6.7 이상)
☑️ App.js의 play 메서드에서 프로그램 실행
☑️ ApplicationTest 의 모든 테스트 성공
☑️ @woowacourse/mission-utils에서 제공하는 Random 및 Console API를 사용하여 구현

노트북을 사용한 지 최소 5년 이상은 지났었다. 프로그래밍 요구사항을 충족하기 위해선 Node.js version 업데이트가 필요했다. terminal을 사용해 설치되어 있는 Node.js를 삭제하는 등 나와 있는 레퍼런스를 참고하여 시도해보았지만 Node.js 업데이트에 실패했다. 노트북을 사용하면서 storage를 한 번도 정리하지 않아 용량이 부족했고 개발 실력이 턱없이 부족했을 당시, 설치되는 경로를 생각하지 않아 경로 오류가 발생한 것 같다. 원초적인 방법으로 노트북 초기화를 진행하였고 우선 과제에 필요한 프로그램들(VS code, command line tools, Node.js)만 다운받았다.

이전 Javascript로 프로젝트를 진행할 때 class를 사용해본 경험이 없었다. 그래서 1주차 과제 코드를 처음 보았을 때 코드 3줄이 전부였지만 코딩을 어디에 해야 하는지 감이 오지 않았다. 프로그래밍 요구 사항을 다시 정독해보았고 코드가 읽혔다. App class 안에 코드를 작성하고 play 메소드에서 프로그램이 실행되도록 하면 되었다. 프로그래밍 요구 사항에 적힌 그대로였다. 작성된 글을 꼼꼼히 읽을 필요성에 대해 다시금 깨달았다.
ApplicationTest.js 파일 역시 처음 보는 메소드들로 코드가 짜여 있었다. 메소드 기능에 대해 하나하나 검색하다 보니 Jest(Javascript Testing Framework)에서 사용되는 메소들이라는 것을 알게 되었다. 이번 과제를 통해 Jest를 경험할 수 있었고 Jest와 단위 테스트에 관해 공부할 기회가 되었다.

📓 과제 진행 요구 사항

☑️ 저장소를 Fork & Clone
☑️ 구현할 기능 목록 정리

git 사용 방법에 대해 복습할 수 있었고 Commit Message Conventions에 대해 배울 수 있었다. 이전 프로젝트를 진행할 때 아무 규칙 없이 마음대로 커밋 메시지를 작성하였다. 이번 과제를 진행할 때는 구현할 기능 목록을 정리해 두고 기능 구현을 끝낸 후 한꺼번에 git의 commit를 했다. 이는 유지보수 측면에서 절대 좋은 커밋 메시지라고 볼 수 없다. 다음 과제를 진행할 때는 git의 커밋 단위를 docs/README.md에 정리한 기능 목록 단위로 추가해야겠다. Commit Message Conventions 가이드를 참고해 의미 있는 커밋 메시지를 작성하려고 노력해야겠다.

🕹 기능 요구 사항(구현할 기능 목록)

PR Address

import { MissionUtils } from "@woowacourse/mission-utils";
import { GAME, ERROR } from "./Message";

class App {
  constructor() {
    this.computerValue = this.generateRandomNumber();
    this.playGame = true;
  }
  async play() {
    MissionUtils.Console.print(GAME.START);

    while (this.playGame) {
      const userValue = await this.getUserValue();
      await this.reGame(userValue);
    }
  }
}
export default App;

export와 import 개념을 활용하여 게임을 진행할 때 필요한 메시와 Error 메시지를 따로 관리하였다.

💻 컴퓨터 랜덤 숫자 생성

☑️ 컴퓨터 : 서로 다른 3자리의 랜덤 숫자 생성 (1~9)

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

⌨️ 사용자 입력 받기

☑️ 사용자 : 서로 다른 3자리의 수 입력
☑️ 잘못 입력시 예외 발생

  isValidInput = (userInput) => {
    const inputRegex = /^[0-9]{3}$/.test(userInput);
    return inputRegex;
  };

  getUserValue = async () => {
    const userGuess = await MissionUtils.Console.readLineAsync(GAME.INPUT);
    if (!this.isValidInput(userGuess)) {
      throw new Error(ERROR.INPUT);
    }

    return [...userGuess].map((value) => Number(value));
  };

처음엔 if 문을 사용하여 사용자가 잘못 입력할 경우를 하나씩 나눠 그에 따른 예외 처리 코드를 작성하였다. 작성된 코드는 이해하기에는 쉬웠지만, 코드의 길이가 길었기에 단순하게 작성하는 방법을 찾아보았다. test() 메소드를 사용하여 입력받을 문자열이 만족하는지 안 하는지 판별하도록 코드를 수정하였다.

⚾️ 게임 판단하기

☑️ 입력된 숫자와 랜덤 숫자 비교
☑️ 입력한 수에 대한 결과를 낫싱 또는 볼, 스트라이크 개수로 표시
☑️ 컴퓨터가 선택한 숫자 맞추면 종료

  calculateResult = (userGuess) => {
    let strikes = 0;
    let balls = 0;

    for (let i = 0; i < 3; i++) {
      if (userGuess[i] === this.computerValue[i]) strikes++;
      else if (this.computerValue.includes(userGuess[i])) balls++;
    }

    if (strikes === 3) {
      MissionUtils.Console.print(GAME.END);
      return "restart";
    } else if (strikes && balls)
      MissionUtils.Console.print(`${balls}볼 ${strikes}스트라이크`);
    else if (strikes) MissionUtils.Console.print(`${strikes}스트라이크`);
    else if (balls) MissionUtils.Console.print(`${balls}볼`);
    else MissionUtils.Console.print("낫싱");
  };

사용자가 입력한 값과 컴퓨터의 값을 비교하여 그에 따른 strike 개수와 ball 개수를 계산하고 if 문을 통해 strike와 ball의 개수에 따라 다르게 출력하도록 코드를 작성하였다.

🎮 게임 종료

☑️ 게임이 끝난 경우 재시작(1)/종료(2) 구분
☑️ 잘못 입력시 예외 발생

  reGame = async (userValue) => {
    const result = this.calculateResult(userValue);

    if (result) {
      const restart = await MissionUtils.Console.readLineAsync(GAME.RESTART);
      if (restart === "1") this.computerValue = this.generateRandomNumber();
      else if (restart === "2") this.playGame = false;
      else {
        throw new Error(ERROR.RESTART);
      }
    }
  };

몰랐던 Javascript에서 메소드들에 관해 공부할 수 있었고 꾸준한 학습의 필요성을 깨달을 수 있었다. 기능 구현에만 초점을 두고 코드를 작성하였다. 다른 사람들이 작성한 코드 리뷰와 블로그를 통해 2주차 과제에는 지금보다 더 코드를 작성하기 위해 공부하고 고민하고 적용해 보아야겠다.

🍧 한 줄 느낌점

1주차 과제를 마치면서 진짜 정말 모르는 게 너무 많다는 것을 뼈저리게 느꼈다. 우아한테크코스에 지원하지 않았더라면 우물 안 개구리 마냥 무엇을 모르는지도 모르는 채 고민만 하다 시간을 보냈을 것 같다. 다음 과제를 진행할 때 이번에 느낀 것을 토대로 한 걸음 더 성장한 코드를 작성할 수 있도록 노력해야겠다.

다음 과제에 적용해 볼 것

네이밍을 통해 의도를 드러내기
변수 이름, 함수(메서드) 이름을 통해 어떤 의도인지가 드러난다면 굳이 주석 달지 않기
공백도 의미있게 사용하기
커밋 메시지 의미 있게 작성하기
eslint를 이용해 더욱 생산적으로 코드를 작성하기
EOL(End Of Line)설정 확인하기

m_ngyeong

ʚȉɞ

다음 포스트

우아한테크코스 프리코스 : 1주차 회고