[holee] typescript-racingcar

[hochan222]

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

• Demo page

• Subject

구현 사항

구현 사항

디렉토리 구조

.
├── LICENSE
├── README.md
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── racingcar.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── dist
│   ├── css
│   │   ├── index.css
│   │   ├── shared
│   │   │   ├── button.css
│   │   │   ├── layout.css
│   │   │   ├── sizing.css
│   │   │   └── typhography.css
│   │   └── ui
│   │       └── spinner.css
│   └── js
│       ├── index.js
│       └── modules
│           ├── @share
│           │   ├── constants.js
│           │   ├── controller.js
│           │   ├── dom-dataset.js
│           │   ├── init.js
│           │   ├── message.js
│           │   ├── spinner.js
│           │   ├── utils.js
│           │   └── view.js
│           ├── CarName.js
│           ├── CarNameComponent.js
│           ├── Game.js
│           ├── Race.js
│           ├── Winner.js
│           └── utils.js
├── docs
│   └── README.md
├── index.html
├── package.json
├── src
│   └── js
│       ├── index.ts
│       └── modules
│           ├── @share
│           │   ├── constants.ts
│           │   ├── controller.ts
│           │   ├── dom-dataset.ts
│           │   ├── init.ts
│           │   ├── spinner.ts
│           │   ├── utils.ts
│           │   └── view.ts
│           ├── CarName.ts
│           ├── Game.ts
│           ├── Race.ts
│           └── Winner.ts
├── tsconfig.json
└── yarn.lock

컴포넌트

컴포넌트 방식으로 문제에 접근했습니다. 복잡한 문제를 작은 단위의 문제로 분리하여 단순화 시켜서 문제를 해결하는게 큰 장점이라고 생각합니다.

• 컴포넌트 안에 render, controller, init 구조 존재.

• Game 컴포넌트: 기본 화면을 렌더링하고, 이벤트 등록 및 자식 컴포넌트를 관리합니다.
• CarName 컴포넌트: Game으로 부터 전달받은 자동차 이름을 검증하고 파싱하여, 화면에 렌더링합니다.
• Race 컴포넌트: Game으로 부터 전달받은 횟수를 검증하고 경주 현황을 렌더링합니다.
• Winner 컴포넌트: 전체 자동차 중에서 우승자를 찾아서 다시하기 버튼과 같이 렌더링하고, alert를 2초 후에 출력합니다.

cypress

먼저 수정이 있을 때마다, 수동으로 확인하지않고 자동으로 검사해준다는 점이 너무 편했습니다.

BDD방식으로 기능 구현을 하기전에 테스트 코드를 작성했는데, Given, When, Then 으로 작성하려고 했습니다. 동작을 중심으로 먼저 정해놓고 코드를 작성하기 때문에, 한번 테스트 코드를 만들어 놓으면 추가적인 생각없이 정해진 범위 안에서 필요한 기능만 만드는게 큰 장점이라고 생각합니다. 하지만... 쉽지 않았습니다.. 작성하면서 어려움이 있었는데, cypress를 사용하면서 다음과 같은 어려움이 있었습니다.

• 문법에 익숙하지 않았다.
• 처음 부터 너무 세부적으로 나누려다보니 테스트 코드를 작성하는데 시간이 오래 걸렸다.

cypress 문법을 몰라서 반나절을 공식문서를 보며 코드 작성 시작조차 못했는데 이건 경험이 쌓이면 해결될 문제라 생각합니다. 결국 테스트코드를 몰아서 작성했습니다.. 또, 너무 세부적으로 접근해서 방향성을 잃었는데, 앞으로는 describe('racing-game base behavior'... 와 같이 전체 큰 주제를 정해놓고 it('자동차 이름 입력 했을 때, car name input/button 비활성화' 와 같이 테스트 코드를 작성하지 않고 행동만 정의만한 다음 하나씩 테스트 코드 작성 후 실제 코드를 작성하면 전체 주기를 줄일 수 있다고 생각합니다. 좋은 경험이었습니다.

고민

1. 아래와 같은 DOM요소는 HTMLInputElement | null을 반환할 수 있는데, DOM 요소를 가져올때 다음과 같이 강제형변환을 했습니다. DOM을 조작하다보면 null을 반환할 경우도 생길 수 있어서 위험해보입니다. if 문으로 if(carNamesInput) null 체크를 해주는 패턴도 있는데 어떤 패턴이 좋은 케이스인지 고민됩니다.

const carNamesInput: HTMLInputElement = $('input[type="text"]') as HTMLInputElement;

2. 큰 규모의 앱에서 페이지별로 컴포넌트를 나눈다고 했을때, 각각의 페이지 별로 하위 컴포넌트를 갖게됩니다. 이때 하나의 하위 컴포넌트가 여러 페이지에 쓰인다고하면, 따로 util 파일을 만들어야할지 중복되더라도 페이지별로 중복 코드를 작성할지 고민이 됩니다.