274 자동차 경주 게임 미션 step2 시작, 피드백 반영, 첫번째 merge

Today I Learned

PR 피드백 반영

함께 페어프로그래밍을 진행한 하루의 PR에도 리뷰가 등록됐다. 많은 부분을 함께 작업한만큼 리뷰를 통해 배울 점이 많았다. 나와 페어의 리뷰어가 다른 분으로 배정돼서 다른 시각에서 코드를 두 번 체크받을 수 있어 굉장히 좋다.

1. 네이밍

해당 부분은 들어오는 값이 valid한지 검증하기 위한 값들이라 저렇게 이름을 지었는데 VALIDATOR가 리뷰어 분이 말씀하신 것처럼 함수나 객체의 이름으로 많이 쓰이는지 몰랐다. 해당 부분을 원래 있던 GAME에 합쳐서 다음과 같이 수정했다.

export const GAME = {
  MAX_NAME_LENGTH: 5,
  MIN_NAME_LENGTH: 1,
  MIN_COUNT_VALUE: 1,
  MIN_SCORE: 0,
  MAX_SCORE: 9,
  EFFECTIVE_SCORE: 4,
};

리뷰어 분의 말처럼 key값이 조금 길어지더라도 이름만 보고 명확히 알 수 있도록 변경했다.

export const ERR_MESSAGE = {
  NAME_TOO_LONG: `이름은 ${GAME.MAX_NAME_LENGTH}글자 이하로 입력해 주세요.`,
  NAME_CANNOT_BE_BLANK: '공백만으로는 이름을 구성할 수 없습니다.',
  COUNT_TOO_SMALL: `${GAME.MIN_COUNT} 이상의 숫자를 입력해주세요.`,
};

네이밍에 대한 부분은 항상 고민이 많은데 피드백을 통해 네이밍 할 이름들에 대한 머리 속 라이브러리가 늘어나고 있는거 같다. 열심히 흡수하자!

2. 불필요한 return

리뷰어 분의 코멘트처럼 실제로 저 부분은 함수를 한 줄 짧게 줄이기 위해 작성했다. 피드백을 받고 한번 더 생각을 해보니 저 값을 return 받아서 사용하지 않는데 불필요하게 return하게 되면 코드를 볼 때 혼란을 줄 수 있는 여지가 있다고 느꼈다. 해당 부분을 피드백 내용대로 수정했다.

3. Obejct Literal

Object Literal을 사용해 switch - case, if - else 문으로 처리해야 할 부분을 보다 가독성 있고 보기 좋게 표현하려는 의도였다. 하지만 sectionList라는 변수명에 대한 고민이 없었고 리뷰어 분의 피드백처럼 예외처리 부분도 빠져있었다.

이 피드백은 아직 반영하지 못 했는데 리뷰어 분의 말처럼 toggle이 아닌 set의 역할을 할 수 있도록 전체적인 구조를 고쳐야겠다.

Thanks To Pair : 하루

자동차 경주 step2 시작

자동차 경주 게임 미션 2단계를 시작했다. 2단계에서 추가 된 요구사항은 다음과 같다.

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

기존에 구현한 기능에 setInterval, setTimeout, requestAnimationFrame 을 사용해서 의도된 delay를 구현하는게 주된 목표이다. 새롭게 만들고 작성해야 할 코드가 많지 않지만 앞서 얘기한 세가지 메서드 모두 처음 사용해 보는 메서드들이라는 문제가 있었다.

그래도 컴포트 존을 벗어나서 도전하는게 중요한만큼 매번 미션을 진행할 때마다 떨리고 설렌다.

자동차 경주 step2 테스트 코드 작성

1. 자동차 경주가 진행 중 매 턴마다 1초의 지연시간이 생기는지 테스트 한다.

it('자동차 경주 진행 중 때 매 턴마다 1초의 지연시간이 생기는지 테스트 한다.', () => {
    typeCarNameAndClickToSubmitButton(['yujo']);
    typeRacingCountAndClickToSubmitButton(3);

    cy.clock();
    cy.tick(500);
    cy.get('.car-player').should('have.data', 'fowardCount', 0);
  });

아이디어가 안 떠올라 현재 간단하게만 작성한 상태다. 500ms 가 지났을 때 forwardCount는 차가 전진하는 경우, 멈추는 경우 모두 상관없이 무조건 0이라서 문제가 있는 테스트다.

현재 떠오르는 아이디어는 아래와 같다.

1. 게임이 진행되는 화면 전체를 감싸고 있는 <div> 태그에 data-set을 부여해서 매 턴마다 count를 증가시켜서 체크한다.
2. 자동차를 하나 생성해 무조건 전진하도록 값을 부여해서 테스트 한다.

어떤 방법으로 진행할지 조금 더 고민해보고 내일 코드에 적용해야겠다.

2. 자동차 경주 진행 중 지연시간마다 Anmiation이 출력되는지 테스트 한다.

  it('자동차 경주 진행 중 지연시간마다 Anmiation이 출력되는지 테스트 한다.', () => {
    typeCarNameAndClickToSubmitButton(['yujo']);
    typeRacingCountAndClickToSubmitButton(2);

    cy.clock();
    cy.tick(500);
    cy.get('.spinner-container')
      .its('length')
      .then((len) => {
        len.equal(1);
      });
    cy.tick(1000);
    cy.get('.spinner-container')
      .its('length')
      .then((len) => {
        len.equal(1);
      });
    cy.tick(1000);
    cy.get('.spinner-container')
      .its('length')
      .then((len) => {
        len.equal(1);
      });
  });

위 테스트와 비교했을 때 비교적 간단했다. 경주가 1000ms마다 진행되기 때문에 500, 1500, 2500ms 가 지났을 때 스크린 안에 애니메이션이 들어간 .spinner-container가 존재하는지 확인하고 중복으로 애니메이션이 출력되는지 확인하는 코드를 작성했다.

3. 자동차 경주가 모두 끝났을 때, 2초 후 축하의 alert메세지가 출력되는지 테스트 한다.

  it('자동차 경주가 모두 끝났을 때, 2초 후 축하의 alert메세지가 출력되는지 테스트 한다.', () => {
    cy.clock();

    typeCarNameAndClickToSubmitButton(['yujo']);
    typeRacingCountAndClickToSubmitButton();

    // 자동차 경주 진행시간 5000ms + alert 출력 대기시간 2000ms
    cy.tick(7000);

    cy.on('window:alert', (txt) => {
      expect(txt).to.equal('🎉 축하드립니다! 우승자는 yujo입니다! 🎉');
    });
  });

이 부분도 불만이 많다. 기존에 했던 것처럼 stub를 사용해서 alert를 받아야 alert가 발생했는지까지 체크할 수 있는데 현재 테스트 코드는 alert가 발생하지 않을 경우 cy.on을 지나치기 때문에 성공한 테스트로 출력된다.

stub를 사용하면 null to spy 에러가 발생하는데 기존과 똑같은 코드인데 cy.clock()과 충돌하는 부분이라도 있는건지 하루종일 잡고 있었지만 문제를 해결하지 못 했다. 내일은 이 문제를 꼭 해결하고 싶다.

Today Commit Review

• woowacourse-projects
  • 자동차 미션 step1 PR에서 피드백 받고 반영한 내용을 어제 TIL에 적었는데 해당 링크를 추가했다.
• you don`t know js
  • 우테코가 시작하기 전부터 꾸준히 진행하고 있는 스터디인데 평소처럼 미리 준비하지 못 하고 스터디 몇시간 전이 돼서야 부랴부랴 준비했다.
  • 정말 좋은 구성원들과 함께 진행하는 유익한 스터디지만 매주 나가는 진도가 꽤 많다. 만나는 시간은 1주일에 2시간 정도로 짧지만 스터디를 위해 준비해야 할 내용들이 있어서 우테코와 병행이 가능할지 모르겠다.
  • 고민을 좀 더 해봐야겠다.

Today Review

• 어제 올렸던 step1 PR이 merge 됐다! 앞으로 우테코를 진행하면서 많은 미션을 진행하고 많은 PR과 merge가 반복되겠지만 항상 '처음'이라는 단어가 들어가면 설레는 기분이다.
• 처음으로 미션이 merge됐는데 우테코 마지막 미션이 merge되는 그 날까지 지금 가지고있는 감사한 마음과 열정을 잃지 않았으면 좋겠다.