[바닐라JS] 우테코 프리코스: 자동차 경주 게임[step02]

# 오늘 구현한 것

 - 요구사항에 맞게 id값 수정

 - 시도할 횟수 입력 기능 추가

   - 예외처리: 양수의 정수(자연수)가 아닌 0과 음수가 입력되었을경우

 

# 다음에 구현 할 것

 - step03. 중간정리

   - jQuery 관련 코드 삭제 및 수정

   - 함수를 기능별로 모듈화 하기

   - 변수명을 조금 더 구체적이고 한눈에 알아보기 쉽게 수정하기

   - DOM갯수가 너무 많은것 같아 갯수 줄이는 작업 시도해보기

   - README.md 적극 활용하여 구현 과정 상세하게 기록하기

 

# 고민 한 것과 고민 할 것

 - 이전 기수 분들의 PR을 보고 많은것을 느꼈다.

 - README.md 어떻게 상세하게 기록해갈지 고민해보기

 - 함수 모듈화 하는 방법은? (어떻게 모듈화 해야 더욱 알아보기 쉽고 체계적으로 코딩 할 수 있을까?)

 - commit 메세지는 앞으로 한글로 작성하기로 했다.

 

 

---

 

# 오늘 구현한 것

 

오늘은(11월 10일) 어제 README.md 를 좀 더 자세히 읽고 기능 요구사항과 프로그래밍 요구사항을 바탕으로 앞으로의 계획을 세우고 그에 맞게 태그의 id값 이름을 변경하였고 예외처리를 포함하여 '시도할 횟수 입력' 기능을 추가하였다.

 

import { $ } from './utils/DOM.js'

const $nameForm = $('#car-names-form');
const $nameInput = $('#car-names-input');
const $nameBtn = $('#car-names-submit');
const $countForm = $('#racing-count-form');
const $countInput = $('#racing-count-input');
const $countBtn = $('#racing-count-submit');
const $resultForm = $('#racing-result-form');

function inputName(e) {
  e.preventDefault();
  const nameObj = $nameInput.value.split(',');
  
  nameExecution(nameObj);
}

function nameExecution(obj) {
  const nameAvaliable = obj.every((item) => item.length < 5 && item.length > 0);

  if(nameAvaliable) {
    $nameInput.disabled = true;
    $nameBtn.disabled = true;
    $countForm.style.display = 'block';
    return;
  }
  else {
    window.alert("이름은 1자 이상 5자 이하만 가능합니다.");
    $nameInput.value = "";
    return;
  }
}

function inputCount(e) {
  e.preventDefault();
  const racingCount = $countInput.value;
  
  countExecution(racingCount);
}

function countExecution(racingCount) {
  if(racingCount < 1) {
    window.alert("1이상의 자연수를 입력해 주세요.")
    $countInput.value = "";
    return;
  }
  else {
    $countInput.disabled = true;
    $countBtn.disabled = true;
    $resultForm.style.display = 'block';
  }
}

function init() {
  $countForm.style.display = 'none';
  $resultForm.style.display = 'none';
  $nameForm.addEventListener('submit', inputName);
  $nameBtn.addEventListener('click', inputName);
  $countForm.addEventListener('submit', inputCount);
  $countBtn.addEventListener('click', inputCount);
}

init();

 

index.html에서 시도할 횟수 입력 input태그에 type을 number로 수정하여 이후 예외처리를 하는데 있어서 수월했던것 같다.

 

구현 이후에 이전 기수분들의 PR를 찾아보았는데 좋은 자극을 많이 받게 되었다. 그만큼 개선시켜야 할 부분이 많이 보였고 앞으로 구현 순서 및 방식을 계획하는데 큰 도움이 되었던것 같다.

 

사실 지금 코드도 잘 짜여져 있다고 생각하지 않고 있기 때문에 기능 구현을 하면서 중간중간에 한번씩 개선시키는 방향으로 이번주는 진행해 보려고한다.

 

 

# 다음에 구현 할 것

 

   - jQuery 관련 코드 삭제 및 수정

사실 코드 맨 윗줄 jQuery또한 블랙커피 스터디 lv1을 하면서 따라했던 부분인데 이는 jQuery인지 잘 모르고 사용했던 것이라 요구사항에 맞게 수정하는 작업이 필요해 보인다.

 

   - 함수를 기능별로 모듈화 하기

PR을 보면서 느낀건데 모듈화가 되었을때의 코드가 나같은 완전초보 개발자도 한눈에 코드를 알아보기가 가능했다는 점에서 굉장한 필요성과 당장 나도 모듈화를 배워 구현 시켜보아야겠다는 생각이 들었다.

 

   - 변수명을 조금 더 구체적이고 한눈에 알아보기 쉽게 수정하기

나의 코드에 있는 변수명을 보다가 PR들의 변수명을 보니 괜히 부끄러워졌다. 프로그래밍하는데 있어서 작명 센스도 굉장히 중요하다는것을 느끼게 되었다.

 

   - DOM갯수가 너무 많은것 같아 갯수 줄이는 작업 시도해보기

'enter'키를 눌렀을 때 함수가 실행되도록 index.html에 form에도 id값을 부여하여 DOM 선택자를 활용하였는데 이는 input태그만 사용해도 뭔가 되지 않을까 싶어 한번 수정을 해보도록하는 시간을 가져보려고한다.

 

   - README.md 적극 활용하여 구현 과정 상세하게 기록하기

다들 README.md를 굉장히 꼼꼼하게 작성되어있었는데 이를 보고 든 생각은 단 한가지! '저는 구현하는데 어떠한 과정을 거치면서 기능을 구현하게 되었어요!' 아니면 마치 우리가 영화를 보기전에 예고편 또는 줄거리를 보듯이, 코드를 직접 보기전에 REAMD가 예고편 역할을 해주었다는게 확실하게 보였다. 나도 이렇게 README를 잘 작성하고 싶다는 생각이 들었다.