toy-project: 자동차 경주 게임 (3)

DOM 탐색

문서 내의 특정 element를 찾기 위해서 주로 document.querySelector()를 사용하고 있었다. 하지만 문서 구조가 커진다면 root부터 시작하여 DOM 탐색을 하기때문에 탐색에 대한 불필요한 비용이 증가된다는 단점이 있다. 또한 클래스의 경우에는 언제든 여러곳에 쓰일 수 있어 의도하지 않은 element가 반환될 수도 있다.

그래서 이러한 문제점을 해결하기위해 특정 element부터 탐색하여 DOM 탐색 범위를 줄이는 방식으로 수정하였다.

이전

function $(selector: string) {
  return document.querySelector<HTMLElement>(selector);
}

이후

function $(selector: string, scope = document) {
  return scope.querySelector<HTMLElement>(selector);
}

파일 분리

자동차 경주 게임에서는 사용자가 자동차의 이름을 올바르게 입력했는지와 사용자가 시도할 횟수를 올바르게 입력했는지에 대한 검증이 필요하다.

처음에는 아래와 같이 유틸폴더 내부에 각각에 대해 파일을 만들어 두고 사용을 했었다.

이전

그런데 검증코드를 작성하면서 null check와 같이 중복되는 코드들도 존재했고 재사용을 할 수 있는 코드들이 존재하여 하나의 파일 내부에서 함수를 공유하는 방식으로 수정하였다. 이렇게 분리 했을 때의 장점은 검증과 관련된 로직이 한 곳에 있다보니 하나의 목적을 가진 코드들이 응집되어 있어 흐름을 따라가기 쉬웠다.

이후

하지만 만약 어플리케이션이 커지고 검증에 대한 코드가 더 세세히 구현되어야 한다면 지금처럼 한 곳에서 관리하는 것이 맞을지, 중복되는 코드가 존재하더라도 분리되는 것이
맞을지에 대한 고민이 든다.

올바른 변수이름

아래의 함수는 사용자로부터 자동차의 이름을 입력받고 중복된 이름이 없는지 중복확인하는 함수이다.

function isValidUniqueCarNames(cars: string[]) {
  return carNames.length === new Set(carNames).size;
}

그런데 인자로 받는 cars라는 식별자가 너무 포괄적이라는 느낌을 받았다. 현재로써는 타입스크립트를 사용하고 있고 또, 작성한지 얼마 안된 상태라서 충분히 cars에는 자동차 이름의 목록들이 올 수 있겠다는 것을 유추할 수 있지만 이후에 코드를 다시 봤을 때, cars는 Car라는 객체들의 컬렉션이라는 생각이 들어 아래와 같이 cars[i].getName()라는 코드로 수정해야 맞는 것 같다는 생각이 들 수도 있을 것 같았다.

function isValidUniqueCarNames(cars) {
  const uniqueCarSet = new Set();

  for (let i = 0; i < cars.length; i += 1) {
    uniqueCarSet.add(cars[i].getName());
  }

  return cars.length === uniqueCarSet.size;
}

그래서 다음과 같이 어떤 인자가 전달되는지에 대해서 의미가 잘 전달될 수 있도록 carNames라는 식별자로 변경하였다.

function isValidUniqueCarNames(carNames: string[]) {
  return carNames.length === new Set(carNames).size;
}