본문 바로가기
창고

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

by KimHarry 2021. 11. 9.

# 우테코 1차 발표 까지의 공백

 - 1차 합격 발표까지 2주의 공백동안 나는 무엇을 할까?

 

# 오늘 구현한 것

 - 자동차 이름 받아오기

  - 예외처리: 빈칸, 5글자 초과할 경우

 

# 이후에 구현 할 것

 - step02.게임 횟수 입력 받기

 - step03.입력값(이름, 횟수)에 따라 게임 실행

 - step03.게임 실행 이후 결과 출력

 

# 고민 한 것과 고민 할 것.

 - 컨벤션은 지켰는가?

 - 클린코딩(가독성이 좋은가)

 - docs와 친해지기

 - 의미 있는 commit 메세지 작성하기

 

 

# 우테코 1차 발표 까지의 공백

 

저번주 우아한테크코스 4기 프론트엔드 부분에 지원하였다. 거의 1달 가량 자소서 작성과 코딩테스트를 바라만 보고 지내다가 막상 코딩테스트까지 마치고 나니 그 다음 할 것이 없었다.

 

1차 발표 까지 2주간의 공백기간에 무엇을 해야 효율적이고 의미있는 개발을 할 수 있을까 고민하다가 바닐라JS에 아직 부족함을 느껴 지난 우테코 기수들이 진행했던 프리코스 과정들을 fork하여 1주일에 1개씩 총 2개를 스스로 진행해 보기로 했다. 아마 합격 유무와는 상관없이 굉장히 의미있는 시간이 될 것으로 생각된다.

젭라 1차 합격 시켜주세요

 

그래서 이번주 부터 '자동차 경주 게임'을 구현하기 시작했다.

https://github.com/woowacourse/javascript-racingcar-precourse

 

 

# 오늘 구현한 것

 

 - index.js

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

const $nameForm = $('#car-name-form');
const $nameInput = $('#car-name');
const $nameSubmit = $('#car-name-submit-button');
const $countForm = $('#game-count-form');
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) {
    $countForm.style.display = 'block';
    inputCount();
    return;
  }
  else {
    window.alert("이름은 1자 이상 5자 이하만 가능합니다.");
    $nameInput.value = "";
    return;
  }
}

function inputCount() {
  
}

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

init();

 

 

 - nameAvaliable: 원래는 for문을 활용하여 구현을 하였다가 코드가 지저분해저서 Array관련 Method들을 docs에서 찾아 보다가 array.every() 라는 것을 찾게 되었다. 기존에 작성했던 for문 보다 훨씬 가독성이 좋아서 뿌듯했다.

하지만 avaliable이라는 단어가 '허용되지 않는' 이라는 뜻이라서 변수명의 수정이 필요해 보인다.

 

 - inputCount(): 내가 설정한 커리큘럼 step02에 구현할 함수이다. 성공적으로 inputName()이 실행되었다면 inputCount()가 그 다음으로 실행되어 올바른 카운트 횟수를 받아 step03로 넘어 갈 수 있도록 구현할 것 이다.

 

 

- index.html

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <title>자동차 경주 게임</title>
  </head>
  <body>
    <div id="app">
      <h1>🏎️ 자동차 경주 게임</h1>
      <p>
        자동차 이름을 <strong>5자 이하로</strong> 콤마로 구분하여 입력해주세요.
        <br />
        올바른 예) east,west,south,north <br />
      </p>
      <div class="car-game-container">
        <form id="car-name-form">
          <input
                    type="text" 
                    id="car-name"
          />
          <button
                    type="button"
                    id="car-name-submit-button"
          >
            확인
          </button>
        </form>
        <form id="game-count-form">
          <h4>시도할 횟수를 입력해주세요.</h4>
          <input
                    type="number" 
                    id="game-count"
          />
          <button
                    type="button"
                    id="game-count-submit-button"
          >
            확인
          </button>
        </form>
      </div>
      <form id="racing-result-form">
        <h4>📄 실행 결과</h4>
      </form>
    </div>
    <script type="module" src="src/index.js"></script>
  </body>
</html>

 

index.html 에서도 약간의 수정 작업을 하였다.

 

 - 기존에 있었던 div태그 -> form태그 로 수정. 및 id값 추가

 - <form id="game-count-form"> 안의 <button>의 type을 text -> number 로 수정

 

 

# 이후에 구현 할 것

 

이후에는 'step01: 자동차 이름 받아오기' 이 정상적으로 실행 된 이후에 'step02: 시도할 횟수 받아오기 ' 가 실핼 될 수 있도록 inputCount()를 구현한다.

 

=== 추가 ===

 

큰일났다 README.md를 끝까지 안 본 내 잘못이다.

- 자동차의 이름을 입력하는 input 태그는 `#car-names-input` id값을 가진다.
- 자동차의 이름을 제출하는 button 태그는 `#car-names-submit` id값을 가진다.
- 레이싱 횟수를 입력하는 input 태그는 `#racing-count-input` id값을 가진다.
- 레이싱 횟수을 제출하는 button 태그는 `#racing-count-submit` id값을 가진다.

- 최종 우승자를 출력하는 span 태그는 racing-winners id를 가진다.

    예) <span id="racing-winners">poco,park,jun</span> 형태로 작성해주세요.


- 다음 Car 객체를 만들고, new 를 이용해 인스턴스를 만든다.

```javascript
function Car(name) {
  this.name = name;
}

class Car {
  constructor(name) {
    this.name = name;
  }
}
```

 

- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)

 

- **기능을 구현하기 전에 javascript-racingcar-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.

 

==========

 

고민할게 많이 생겼다 ㅎ...

 

 

 

사실 클론 코딩을 고민하고 있었던 때에 instagram의 광고에 udemy 클린코드 강의가 떠있는걸 보았다. 강의 시간도 그렇게 길지 않으니 2주 동안 봐보는것도 좋을것같다는 생각을 하던때에 README.md를 끝까지 읽어보던 도중... 수정해야 할게 많이 생겼다 ㅎ...

 

내일 당장은 수강신청을 하지 못하여도 빠른 시일내에 프리코스 과정에 적응하고 다른 것에도 집중해서 좋은 결과를 낳을 수 있도록 노력해야겠다.

 

그러니까 잠좀 그만 처 자고 일좀하자.

'창고' 카테고리의 다른 글

[바닐라JS] 우테코 프리코스: 자동차 경주 게임[step03]  (0) 2021.11.25
[일상] 21.11.22 끄적끄적  (0) 2021.11.23
[일상] 21.11.15 끄적끄적  (0) 2021.11.15
[바닐라JS] 우테코 프리코스: 자동차 경주 게임[step02]  (0) 2021.11.11
[일상] 21.11.08 끄적끄적  (0) 2021.11.08

관련글

티스토리툴바