[jwon] typescript-racingcar

[jwon42]

🚗 자동차 경주 게임 (typescript-racingcar)

---

• 데모페이지
  https://jwon42.github.io/javascript-racingcar/

• 서브젝트
  https://github.com/jwon42/javascript-racingcar/blob/main/README.md

---

📗 과제 기본 요구사항

• 🎯 step1

  • 주어진 횟수 동안 n대의 자동차는 전진 또는 멈출 수 있다.
  • 자동차에 이름을 부여할 수 있다. 전진하는 자동차를 출력할 때 자동차 이름을 같이 출력한다.
  • 자동차 이름은 쉼표(,)를 기준으로 구분하며 이름은 5자 이하만 가능하다.
  • 사용자는 몇 번의 이동을 할 것인지를 입력할 수 있어야 한다.
  • 전진하는 조건은 0에서 9 사이에서 random 값을 구한 후 random 값이 4 이상일 경우 전진하고, 3 이하의 값이면 멈춘다.
  • 자동차 경주 게임을 완료한 후 누가 우승했는지를 알려준다. 우승자는 한 명 이상일 수 있다.
  • 우승자가 여러명일 경우 ,를 이용하여 구분한다.

• 🎯🎯 step2

  • 자동차 경주 게임의 턴이 진행 될 때마다 1초의 텀(progressive 재생)을 두고 진행한다.
    • 애니메이션 구현을 위해 setInterval, setTimeout, requestAnimationFrame 을 활용한다.
  • 정상적으로 게임의 턴이 다 동작된 후에는 결과를 보여주고, 2초 후에 축하의 alert 메세지를 띄운다.
  • 위 기능들이 정상적으로 동작하는지 Cypress를 이용해 테스트한다.

---

📝 과제를 진행하며

1. 특징

   • Model, View, Controller로 기능을 분리하여 구현하고자 노력했습니다.
     • Model 에는 입력 데이터를 저장을 위한 InputData 클래스, 게임 진행 데이터 저장을 위한 Car, Game 클래스가 위치합니다.
     • View 에는 템플릿과 템플릿을 렌더링 하는 함수가 위치합니다.
     • Controller 에는 이벤트와 리스너에 관련된 함수, 게임 진행 상황에 따라 Model과 View를 조작하는 함수가 위치합니다.
   • DOM 접근 시 querySelector(), querySelectorAll() 만을 사용했습니다.
   • 유지보수 및 코드 가독성 향상을 위해 상수를 정의하여 사용했습니다.
   • 모든 함수는 1가지 기능만을 수행하고, 함수 이름에서 그 기능을 유추할 수 있도록 만드려고 노력했습니다.

2. 템플릿 구조

   1. 템플릿은 div #app 내부에 3개의 section으로 구분되어 있고 조건을 만족하는 경우 section 순차적으로 렌더링합니다.
      • #input-section은 사용자에게 정보를 입력받는 파트입니다.
      • #progress-section은 게임 진행 과정 출력 파트입니다.
      • #result-section은 게임 결과 출력 파트입니다.
   

3. 코드 진행

   1. app()을 실행합니다.
   2. #input-section을 렌더링하고 이벤트와 리스너를 세팅합니다.
   3. 리스너 getCarName(), getTryCount() 에서 입력 데이터 유효성을 체크합니다.
   4. startGame() 에서 게임을 진행하며 그 과정을 #progress-section에 렌더링합니다.
   5. 게임이 끝나면 결과를 #result-section에 렌더링합니다.
   6. [다시 시작하기] 버튼에 이벤트와 리스너를 세팅합니다.
   7. [다시 시작하기] 버튼을 누르면 div #app의 childNode를 모두 삭제합니다.
   8. ii. 부터 다시 진행합니다.

---

💡 에러 처리 (정의되지 않은 동작에 대한 내용 포함)

• 자동차 이름 입력

  • 공백 입력 -> 경고창 -> 재입력 필요
  • 자동차 1대만 입력 -> 경고창 -> 2대 이상 입력 필요
  • 자동차 이름 중복 -> 경고창 -> 재입력 필요
  • 자동차 이름이 5글자 초과 -> 경고창 -> 재입력 필요
  • [이름1, 이름2 , , 이름3] 이 입력된 경우 -> 경고창 -> 재입력 필요

• 시도 횟수 입력

  • 공백 입력 -> 경고창 -> 재입력 필요
  • 음수 입력 -> 경고창 -> 50 이하 자연수 입력 필요
  • 51 이상 입력 -> 경고창 -> 50 이하 자연수 입력 필요
    (수십회 이상의 횟수 입력은 원활한 게임 진행을 위해 금지시켰습니다)

---

📚 Cypress 테스트 케이스 목록

• 초기화면 로딩 테스트

  • 자동차 경주 게임을 실행하면, 인풋 섹션이 보이고 자동차 이름 입력창이 활성화된다

• 자동차 이름 입력 테스트

  • 자동차 이름을 입력하지 않고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 자동차 이름을 1개만 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 비어있는 자동차 이름을 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 중복된 자동차 이름을 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 5글자가 넘는 자동차 이름을 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 자동차 이름을 정상적으로 입력하고 확인 버튼을 클릭하면, 자동차 이름 입력칸과 클릭 버튼을 비활성화 하고 시도 횟수 입력칸과 시도 횟수 버튼을 활성화한다
  • 자동차 이름을 정상적으로 입력하고 확인 버튼을 클릭하면, 진행상황 섹션이 로딩된다

• 시도 횟수 입력 테스트

  • 횟수를 입력하지 않고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 음수를 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다
  • 51 이상을 입력하고 확인 버튼을 클릭하면, 경고창을 띄운다

• 진행 상황 출력 테스트

  • 자동차 이름과 시도 횟수를 정상적으로 입력하고 확인 버튼을 클릭하면, 게임 진행 후 결과 섹션이 로딩된다
  • 게임이 끝나면, 결과를 출력하고 축하 메세지를 띄운다

• 게임 재시작 테스트

  • 다시 시작하기 버튼을 클릭하면, 진행 섹션과 결과 섹션이 사라지고, 자동차 이름 입력칸이 빈 상태로 게임 시작 대기상태가 된다