📝 우테코 프리코스 프론트엔드 과제 2주차

미션 - 자동차 경주

🔍 진행 방식

• 미션은 기능 요구 사항, 프로그래밍 요구 사항, 과제 진행 요구 사항 세 가지로 구성되어 있다.
• 세 개의 요구 사항을 만족하기 위해 노력한다. 특히 기능을 구현하기 전에 기능 목록을 만들고, 기능 단위로 커밋 하는 방식으로 진행한다.
• 기능 요구 사항에 기재되지 않은 내용은 스스로 판단하여 구현한다.

📮 미션 제출 방법

• 미션 구현을 완료한 후 GitHub을 통해 제출해야 한다.
  • GitHub을 활용한 제출 방법은 프리코스 과제 제출 문서를 참고해 제출한다.
• GitHub에 미션을 제출한 후 우아한테크코스 지원 사이트에 접속하여 프리코스 과제를 제출한다.
  • 자세한 방법은 제출 가이드 참고
  • Pull Request만 보내고 지원 플랫폼에서 과제를 제출하지 않으면 최종 제출하지 않은 것으로 처리되니 주의한다.

🚨 과제 제출 전 체크 리스트 - 0점 방지

• 기능 구현을 모두 정상적으로 했더라도 요구 사항에 명시된 출력값 형식을 지키지 않을 경우 0점으로 처리한다.
• 기능 구현을 완료한 뒤 아래 가이드에 따라 테스트를 실행했을 때 모든 테스트가 성공하는지 확인한다.
• 테스트가 실패할 경우 0점으로 처리되므로, 반드시 확인 후 제출한다.

테스트 실행 가이드

• 테스트 패키지 설치를 위해 Node.js 버전 18.17.1 이상이 필요하다.
• 다음 명령어를 입력해 패키지를 설치한다.

npm install

• 설치가 완료되었다면, 다음 명령어를 입력해 테스트를 실행한다.

npm test

---

🚀 기능 요구 사항

초간단 자동차 경주 게임을 구현한다.

• 주어진 횟수 동안 n대의 자동차는 전진 또는 멈출 수 있다.
• 각 자동차에 이름을 부여할 수 있다. 전진하는 자동차를 출력할 때 자동차 이름을 같이 출력한다.
• 자동차 이름은 쉼표(,)를 기준으로 구분하며 이름은 5자 이하만 가능하다.
• 사용자는 몇 번의 이동을 할 것인지를 입력할 수 있어야 한다.
• 전진하는 조건은 0에서 9 사이에서 무작위 값을 구한 후 무작위 값이 4 이상일 경우이다.
• 자동차 경주 게임을 완료한 후 누가 우승했는지를 알려준다. 우승자는 한 명 이상일 수 있다.
• 우승자가 여러 명일 경우 쉼표(,)를 이용하여 구분한다.
• 사용자가 잘못된 값을 입력한 경우 throw문을 사용해 "[ERROR]"로 시작하는 메시지를 가지는 예외를 발생시킨 후, 애플리케이션은 종료되어야 한다.

  예시) [ERROR] 숫자가 잘못된 형식입니다.

입출력 요구 사항

입력

• 경주 할 자동차 이름(이름은 쉼표(,) 기준으로 구분)

pobi,woni,jun

• 시도할 횟수

5

출력

• 각 차수별 실행 결과

pobi : --
woni : ----
jun : ---

• 단독 우승자 안내 문구

최종 우승자 : pobi

• 공동 우승자 안내 문구

최종 우승자 : pobi, jun

실행 결과 예시

경주할 자동차 이름을 입력하세요.(이름은 쉼표(,) 기준으로 구분)
pobi,woni,jun
시도할 횟수는 몇 회인가요?
5

실행 결과
pobi : -
woni :
jun : -

pobi : --
woni : -
jun : --

pobi : ---
woni : --
jun : ---

pobi : ----
woni : ---
jun : ----

pobi : -----
woni : ----
jun : -----

최종 우승자 : pobi, jun

---

🎯 프로그래밍 요구 사항

• 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점 처리한다.
• 프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 이름을 수정하거나 이동하지 않는다.

추가된 요구 사항

• indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
  • 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
  • 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
• Jest를 이용하여 본인이 정리한 기능 목록이 정상 동작함을 테스트 코드로 확인한다.
  • 테스트 도구 사용법이 익숙하지 않다면 __tests__/StringTest.js를 참고하여 학습한 후 테스트를 구현한다.

라이브러리

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

사용 예시

• 0에서 9까지의 정수 중 한 개의 정수 반환

MissionUtils.Random.pickNumberInRange(0, 9);

✏️ 과제 진행 요구 사항

• 미션은 javascript-racingcar-6 저장소를 Fork & Clone해 시작한다.
• 기능을 구현하기 전 docs/README.md에 구현할 기능 목록을 정리해 추가한다.
• Git의 커밋 단위는 앞 단계에서 docs/README.md에 정리한 기능 목록 단위로 추가한다.
  • 커밋 메시지 컨벤션 가이드를 참고해 커밋 메시지를 작성한다.
• 과제 진행 및 제출 방법은 프리코스 과제 제출 문서를 참고한다.

📝 기능 목록

1. 자동차 이름 입력받기
   • 자동차 이름은 쉼표로 구분한다.
   • 자동차 이름은 5자 이하여야 한다.
   • 이름은 중복되지 않아야 한다.
   • 잘못된 값을 입력할 경우 에러 메세지를 출력한다.
2. 이동 횟수 입력받기
   • 이동 횟수는 숫자여야 한다.
   • 이동 횟수는 0보다 커야 한다.
   • 잘못된 값을 입력할 경우 에러 메세지를 출력한다.
3. 자동차 이동시키기
   • 이동 횟수만큼 시행을 반복한다.
   • 각 자동차에서 0~9 사이의 무작위 값을 뽑는다.
   • 뽑은 값이 4 이상이면 전진한다.
   • 뽑은 값이 4 미만이면 전진하지 않는다.
   • 모든 실행 과정을 출력한다.
4. 결과 출력하기
   • 전진을 가장 많이 한 자동차가 최종 우승자가 된다.
   • 최종 우승한 자동차의 이름을 출력한다.
   • 우승자가 다수일 경우 쉼표를 이용하여 구분한다.

처음 짠 코드

import { Console, Random } from "@woowacourse/mission-utils";

class App {
  constructor() {
    this.carList = [];
    this.tryNum = 0;
  }

  async getInput() {
    Console.print(
      "경주할 자동차 이름을 입력하세요.(이름은 쉼표(,) 기준으로 구분)"
    );
    const input = await Console.readLineAsync("");
    if (!input.split(",")) {
      throw new Error("[ERROR] 입력값이 비어 있습니다.");
    } else if (input.split(",").filter((el) => el.length > 5).length > 0) {
      throw new Error("[ERROR] 입력값의 길이가 5보다 큽니다.");
    } else if (input.split(",").filter((el) => !isNaN(+el)).length > 0) {
      throw new Error("[ERROR] 입력값의 형식이 잘못 되었습니다.");
    }
    // 이름 중복되는 경우도 예외처리하기
    input.split(",").map((el) => this.carList.push({ name: el, score: 0 }));
    await this.getTryNum();
  }

  async getTryNum() {
    Console.print("시도할 횟수는 몇 회인가요?");
    const input = await Console.readLineAsync("");
    if (!isNaN(input)) {
      Console.print("\n실행 결과");
      while (this.tryNum < input) {
        this.action();
        this.tryNum++;
      }
      this.calcWinner();
    } else {
      throw new Error("[ERROR] 입력값의 형식이 잘못 되었습니다.");
    }
  }

  action() {
    this.carList = this.carList.map(({ name, score }) => ({
      name: name,
      score: score + +this.randomNumGenerator(),
    }));
    this.carList.map(({ name, score }) =>
      Console.print(`${name} : ${"-".repeat(score)}`)
    );
    Console.print("\n");
  }

  randomNumGenerator() {
    const num = Random.pickNumberInRange(0, 9);
    return num >= 4 ? true : false;
  }

  calcWinner() {
    const scoreList = this.carList.map((el) => el.score);
    const max = Math.max(...scoreList);
    const maxList = this.carList.filter((el) => el.score === max);

    Console.print(`최송 우승자 : ${maxList.map((el) => el.name).join(", ")}`);
  }

  async play() {
    await this.getInput();
  }
}

export default App;

♻️ 리팩토링

App.js

import { Console } from "@woowacourse/mission-utils";
import { validateCarNames } from "./ValidateCarNames";
import { addCarNames } from "./AddCarNames";
import { validateTrialNumbers } from "./ValidateTrialNumbers";
import { playGame } from "./PlayGame";
class App {
  constructor() {
    this.carNames = [];
    this.trialNumbers = 0;
  }

  async getCarNames() {
    Console.print(
      "경주할 자동차 이름을 입력하세요.(이름은잗 쉼표(,) 기준으로 구분)"
    );
    const INPUT = await Console.readLineAsync("");
    const IS_VALID = validateCarNames(INPUT);

    if (IS_VALID) {
      addCarNames(INPUT, this.carNames);
      await this.getTrialNumbers();
    }
  }

  async getTrialNumbers() {
    Console.print("시도할 횟수는 몇 회인가요?");
    const INPUT = await Console.readLineAsync("");
    const IS_VALID = validateTrialNumbers(INPUT);

    if (IS_VALID) {
      playGame(this.trialNumbers, INPUT, this.carNames);
      this.printWinner();
    }
  }

  printWinner() {
    const SCORE_LIST = this.carNames.map((el) => el.score);
    const MAX_SCORE = Math.max(...SCORE_LIST);
    const MAX_SCORE_LIST = this.carNames.filter((el) => el.score === MAX_SCORE);

    Console.print(
      `최송 우승자 : ${MAX_SCORE_LIST.map((el) => el.name).join(", ")}`
    );
  }

  async play() {
    await this.getCarNames();
  }
}

export default App;

AddCarNames

export const addCarNames = (input, carNames) => {
  const CAR_NAME = input.split(",");

  CAR_NAME.forEach((el) => carNames.push({ name: el, score: 0 }));
};

MoveCar

import { Console } from "@woowacourse/mission-utils";
import { randomNumberGenerator } from "./RandomNumberGenerator";

export const moveCar = (carNames) => {
  carNames = carNames.map(({ name, score }) => ({
    name: name,
    score: score + +randomNumberGenerator(),
  }));
  carNames.map(({ name, score }) =>
    Console.print(`${name} : ${"-".repeat(score)}`)
  );
  Console.print("\n");
};

playGame

import { Console } from "@woowacourse/mission-utils";
import { moveCar } from "./MoveCar";

export const playGame = (trialNumbers, input, carNames) => {
  Console.print("\n실행 결과");

  while (trialNumbers < input) {
    moveCar(carNames);
    trialNumbers = trialNumbers + 1;
  }
};

RandomNumberGenerator

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

export const randomNumberGenerator = () => {
  const RANDOM_NUMBER = Random.pickNumberInRange(0, 9);
  if (RANDOM_NUMBER >= 4) {
    return true;
  } else {
    return false;
  }
};

validateCarNames

export const validateCarNames = (input) => {
  const CAR_NAME = input.split(",");

  if (!CAR_NAME) {
    throw new Error("[ERROR] 입력값이 비어 있습니다.");
  } else if (CAR_NAME.length < 2) {
    throw new Error("[ERROR] 입력값이 쉼표로 구분되어 있지 않습니다.");
  } else if (CAR_NAME.filter((el) => el.length > 5).length > 0) {
    throw new Error("[ERROR] 입력값의 길이가 5보다 큽니다.");
  } else if (CAR_NAME.filter((el) => !isNaN(+el)).length > 0) {
    throw new Error("[ERROR] 입력값의 형식이 잘못 되었습니다.");
  } else if (new Set(CAR_NAME).size !== CAR_NAME.length) {
    throw new Error("[ERROR] 입력값이 중복됩니다.");
  }

  return true;
};

validateTrialNumbers

export const validateTrialNumbers = (input) => {
  if (input === 0) {
    throw new Error("[ERROR] 입력값은 0보다 커야 합니다.");
  } else if (isNaN(input)) {
    throw new Error("[ERROR] 입력값의 형식이 잘못 되었습니다.");
  }
  return true;
};

🔍 테스트 코드 작성

자동차 이름 유효성 검사 테스트

import { validateCarNames } from "../src/ValidateCarNames";

test("입력값이 비어있을 경우", () => {
  expect(() => validateCarNames("")).toThrow("[ERROR]");
});

test("입력값이 쉼표로 구분되어 있지 않을 경우", () => {
  expect(() => validateCarNames("pobiwoni")).toThrow("[ERROR]");
});

test("입력값의 길이가 5보다 큰 경우", () => {
  expect(() => validateCarNames("pobi,woni,stella")).toThrow("[ERROR]");
});

test("입력값 형식이 잘못된 경우", () => {
  expect(() => validateCarNames("123,456")).toThrow("[ERROR]");
});

test("입력값이 중복된 경우", () => {
  expect(() => validateCarNames("pobi,pobi,woni")).toThrow("[ERROR]");
});

시행 횟수 유효성 검사 테스트

import { validateTrialNumbers } from "../src/ValidateTrialNumbers";

test("입력값이 0인 경우", () => {
  expect(() => validateTrialNumbers(0)).toThrow("[ERROR]");
});

test("입력값 형식이 잘못된 경우", () => {
  expect(() => validateTrialNumbers("abc")).toThrow("[ERROR]");
});

우승자 출력 테스트

import App from "../src/App";

test("우승자 다수일 때 테스트", () => {
  const app = new App();

  app.carNames = [
    { name: "Car1", score: 2 },
    { name: "Car2", score: 4 },
    { name: "Car3", score: 4 },
  ];

  const message = app.printWinner();

  expect(message).toBe("최송 우승자 : Car2, Car3");
});

test("우승자 1명일 때 테스트", () => {
  const app = new App();

  app.carNames = [
    { name: "Car1", score: 2 },
    { name: "Car2", score: 5 },
    { name: "Car3", score: 4 },
  ];

  const message = app.printWinner();

  expect(message).toBe("최송 우승자 : Car2");
});

👀 개선한 점

• 공통 피드백 사항을 참고하고 다른 분들의 코드를 학습하며 코드를 개선했습니다.
• 기능 목록을 단계별로 상세히 나누어 작성하고, 이에 따라 기능을 구현하도록 노력했습니다.
• 가능한 예외 케이스를 최대한 고려하여 입력값 유효성 검사를 진행했습니다.
• 이전에는 한 파일에 모두 작성하여 코드 길이가 길어지고 depth가 깊어지는 문제가 발생했었는데, 이번에는 함수를 모듈로 분리하여 depth 낮추도록 개선했습니다.
• 변수나 함수 이름을 축약하지 않고 최대한 정확하게 전달하도록 개선했습니다.
• 커밋 메세지에 이모지와 커밋 메세지 헤더를 함께 작성해 커밋 컨벤션을 지키고자 했습니다.
• 테스트 코드를 처음 작성해보며 테스트 작성법을 배웠습니다.

✌️ 2주차 과제 완료

참고자료

커밋 되돌리기
https://wooono.tistory.com/667
테스트 코드 작성법
https://codiving.kr/115
https://velog.io/@velopert/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EA%B8%B0%EC%B4%88