[프리코스] 숫자 야구 게임 ver.javascript - Cypress All Pass

구현을 위한 MEMO

index.html에 라이브러리 스크립트로 이미 포함되어 있기에 전역 객체로 추가되어 있음

- 따로 import 하지 않아도 사용 가능

// ex)
const randomNumber = Random.pickNumberInRange(1, 9);

import

모듈에서 여러 멤버를 가져올 수 있다. 아래의 import로 현재 범위 내에 foo, bar 멤버를 포함시킬 수 있다.

import { foo, bar } from "my-module.js";

commit message convention(Angular JS)

- 커밋 전에 확인하기!!

Subject line

Subject line contains succinct description of the change.

Allowed <type>

• feat (feature)
• fix (bug fix)
• docs (documentation)
• style (formatting, missing semi colons, …)
• refactor
• test (when adding missing tests)
• chore (maintain)

Allowed <scope>

Scope could be anything specifying place of the commit change. For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc...

 

<subject> text

• use imperative, present tense: “change” not “changed” nor “changes”
• don't capitalize first letter
• no dot (.) at the end

Message body

• just as in use imperative, present tense: “change” not “changed” nor “changes”
• includes motivation for the change and contrasts with previous behavior

---

구현사항

• index.html에서 숫자를 입력받고, 버튼을 누르면 xxx.js 파일에서 이 값이 처리되도록 해야 함
• id가 result인 div 태그에 힌트(1스트라이크, 1볼 1스트라이크, 낫싱)를 받아서 표시해야 함

index.js

export default class BaseballGame {
  play(computerInputNumbers, userInputNumbers) {
    return "결과 값 String";
  }
}

// 예시
play(123, 456); // '낫싱'
play(123, 345); // '1볼'
play(123, 432); // '2볼'
play(123, 312); // '3볼'
play(123, 145); // '1스트라이크'
play(123, 134); // '1볼 1스트라이크'
play(123, 132); // '2볼 1스트라이크'
play(123, 124); // '2스트라이크'

BaseballGame 클래스의 play 함수를 이용해서 return 값이 예시와 같이 나올 수 있게 내부 로직 조정

-> 결과 값을 스트링으로 리턴하고, alert가 나오도록 해야함.

---

기능 구현

함수의 여러 값 반환하기

여러 값들을 배열 혹은 객체로 묶어서 하나의 값으로 만든 후에 반환하거나, 배열, 객체를 분할 후 대입하여 반환이 필요하다.

• parseInputNumber() 함수의 return 값을 객체로 묶어서 반환
• 분할 대입 방법으로 변수에 할당

input number parsing 및 play method에 객체로 반환

'함수(또는 메소드)가 한 가지 일만 하도록 최대한 작게 만들며, indent depth가 3이 넘지 않도록 구현한다'는 공통 요구 사항에 따라 parsing 하는 함수와 parsing된 함수를 객체로 만들어 반환하는 함수로 나누어 구현한다.

import {parseInputNumber} from './calLogic.js';
class BaseballGame {
  play(computerInputNumbers, userInputNumbers) {
    let [comIn, userIN] = parseInputNumber(computerInputNumbers, userInputNumbers)
    console.log(comIn, userIN);
    return "결과 값 String";
  }
}

function generateObj (CIN_first, CIN_second, CIN_third,UIN_first, UIN_second, UIN_third){
    const comIN = new Object();
    comIN['first'] = CIN_first;
    comIN['second'] = CIN_second;
    comIN['third'] = CIN_third;

    const userIN = new Object();
    userIN['first'] = UIN_first;
    userIN['second'] = UIN_second;
    userIN['third'] = UIN_third;
    return [comIN, userIN];
}


export function parseInputNumber (computerInputNumbers, userInputNumbers){
    let CIN_first, CIN_second, CIN_third;
    let UIN_first, UIN_second, UIN_third;
    CIN_first = Math.floor(computerInputNumbers/100);
    CIN_second = Math.floor(computerInputNumbers%100/10);
    CIN_third = Math.floor(computerInputNumbers%10);
    UIN_first = Math.floor(userInputNumbers/100);
    UIN_second = Math.floor(userInputNumbers%100/10);
    UIN_third = Math.floor(userInputNumbers%10);
    console.log(CIN_first, CIN_second, CIN_third);
    console.log(UIN_first, UIN_second, UIN_third);
    return generateObj(CIN_first, CIN_second, CIN_third,UIN_first, UIN_second, UIN_third);
}

• parseInputNumber 함수: 컴퓨터에서 생성한 랜덤 숫자와 user로 부터 입력 받은 수를 자릿수에 따라 나누어 각각 관리한다.
• generateObj 함수: 이 함수에서 각각 관리되는 변수를 객체화하여 반환한다.

볼, 스트라이크 개수 세기

parsing 후 객체 형태로 관리 하고 있는 input number를 비교하여 볼의 개수와 스트라이크 개수를 세야한다. 이 함수도 구현 요구사항에 따라 볼의 개수를 세는 함수, 스트라이크의 개수를 세는 함수 나누어 구현한다.

// 두 객체를 전달 받아서 게임 결과를 리턴하는 main 함수
export function gamestart (comIN, userIN){
    // i = ballCheck
    let strike_cnt = strikeCheck(comIN, userIN);
    let ball_cnt = ballCheck(comIN, userIN);
    return [ball_cnt, strike_cnt];
}
// ball 개수 세기
function ballCheck(comIN, userIN){
    let com_arr = Object.values(comIN);
    let user_arr = Object.values(userIN);
    let temp_ball_cnt = 0;
    for (let i = 0; i<3; i++){
        if (user_arr.includes(com_arr[i])){
            console.log(com_arr[i]);
            console.log(user_arr);
            temp_ball_cnt += 1
        }
    }
    return temp_ball_cnt;
}
// strike 개수 세기
function strikeCheck(comIN, userIN){
    let temp_strike_cnt = 0;
    if (comIN['first'] == userIN['first']){
        userIN['first'] = 10;
        temp_strike_cnt += 1;
    }
    if (comIN['second'] == userIN['second']){
        userIN['second'] = 10;
        temp_strike_cnt += 1;
    }
    if (comIN['third'] == userIN['third']){
        userIN['third'] = 10;
        temp_strike_cnt += 1;
    }
    return temp_strike_cnt;


}

• export function () ~ : export를 통해 index.js 파일에서 이 함수를 사용할 수 있게 된다.
• gamestart : 본격적으로 game이 시작되는 함수로 game의 결과로 볼의 개수(ball_cnt), 스트라이크의 개수(strike_cnt)를 return한다.
• strikeCheck : 반드시 ballCheck 전에 strikeCheck가 수행되어야 한다. 왜냐하면, strike는 ball로 카운팅되지 않도록 strike에 해당하는 value를 수정해버리기 때문이다.

컴퓨터의 랜덤값 생성

index.html이 최초 로딩될 때, 랜덤 넘버를 생성하여 user가 맞출 수 있도록 구현한다. 유의할 점은 form tag의 button을 클릭하여도 이 랜덤 값은 변경되면 안 된다는 점이다. 이를 고려하면, ./index.js 파일에서 script가 파싱될 때 최초 호출되도록 하는 것이 좋아 보인다.

// src/index.js

function generateRandom(){
  const randomNumber1 = MissionUtils.Random.pickNumberInRange(1, 9);
  const randomNumber2 = MissionUtils.Random.pickNumberInRange(1, 9);
  while (randomNumber1 == randomNumber2){
    randomNumber2 = MissionUtils.Random.pickNumberInRange(1, 9);
  }
  const randomNumber3 = MissionUtils.Random.pickNumberInRange(1, 9);
  while (randomNumber1 == randomNumber3 | randomNumber2 == randomNumber3){
    randomNumber3 = MissionUtils.Random.pickNumberInRange(1, 9);
  }
  return randomNumber1 * 100 + randomNumber2 * 10 + randomNumber3;
}
...
const randomNumber = generateRandom();
const form = document.querySelector("form");
form.addEventListener('submit', function(event) {
  ...
  let result_str = game.play(userInput, randomNumber);
  ...
});

• generateRandom : 중복되는 숫자가 생성되면 안 되기에 생성 시 확인하여 중복될 경우 재생성될 수 있도록 while 문을 구성한다.

결과 문자열 출력 및 표시

볼, 스트라이크의 개수를 받았으므로 이에 따른 결과를 출력하는 함수를 구현한다. 이는 기능 요구사항에 따라 출력되도록 한다.

export function resultStr (ball_cnt, strike_cnt){
    let result;
    if (ball_cnt == 0 & strike_cnt == 0){
        result = '낫싱';
        return result;
    }
    if (ball_cnt == 0){
        result = strike_cnt + "스트라이크"
        return result;
    }
    if (strike_cnt == 0){
        result = ball_cnt + "볼"
        return result;
    }
    result = ball_cnt + "볼" + " " + strike_cnt + "스트라이크";
    return result;
}

export function displayResult(str){
    document.getElementById("result").innerText=str;
}

• resultStr : 볼, 스트라이크 개수에 따라서 result에 알맞는 문자열을 할당하여 return 한다.
• displayResult : 반환 받은 문자열을 Element ID가 "result"인 태그의 내부 text 값으로 할당한다. text 값에는 앞서 생성한 문자열이 할당된다.

유효하지 않은 입력창 alert 처리

//src/util.js
export function isInputValid(input_str){
    if (122 < input_str & input_str < 977){
        return true;
    }
    return false;
}

//src/index.js
form.addEventListener('submit', function(event) {
  ...
  if (isInputValid(userInput)){
    let game = new BaseballGame;
    let result_str = game.play(userInput, randomNumber);
    displayResult(result_str);
  }
  else{
    window.alert("invalid input");
  }

• isInputValid : input 값이 123부터 987까지 입력되므로 위와 같이 범위를 주었다. 중복값에 대한 처리가 미흡하여 보완 예정이다.
• 유효 하지 않은 경우 window.alert() 함수로 안내 창을 pop-up 한다.

---

npm run test를 통해 cypress를 실행시켜 test가 통과하는지 확인할 수 있다. 다만, 이는 app.spec.js 내의 테스트 케이스를 통과하는지 여부만 확인 가능하여 세부 기능 구현이 완료되었다는 보장을 할 수 없다.

언제 보아도 보기 좋은 초록 글씨 PASS