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

# 잡소리.

 - 재잘재잘

 

# Step03에 구현한 것

 - 모듈 적극 활용

   - 기능단위로 모듈을 나눔(display-utils / input-utils / race-utils / paint-utils)

   - 경주 기능 추가

   - 결과 표시 기능 추가

 

# 자동차 경주 게임 완성! (회고)

 - 부족하다고 생각하는 점

   - 아직 JavaScript와 친하지 않은것 같은 느낌

   - 조금더 좋은 코드를 만들어 나가고싶다.

     - this를 배우자!

     - 시인성 높이기

     - 체계적으로 구성하기

 

 

---

 

 

## 잡소리

 

 재잘재잘

 

완성을 하고 1주일이 지난 지금 블로그에 글을 끄적이기 시작한다.

정말 나란 인간... (절레절레)

 

취업이나 할 수 있을까...

 

 

## Step03에 구현한 것

 

 모듈 적극 활용

 

모듈을 활용하여 간단하게 구현된 모형을 나타내보면 다음과 같다.

 

ㄴ index

ㄴ utils

    ㄴ display-utils

    ㄴ input-utils

    ㄴ race-utils

    ㄴ paint-utils

 - index.js: init() 함수를 실행시키고 조건에 따라 모듈을 불러옵니다.

 - display-utils: 처음에 필요한 Form만 보여주며 이후에 조건이 성립하면 input, btn을 비활성화 및나머지 Form을 보여줍니다.

 - input-utils: 각 Form안에 있는 input들로 부터 입력받은 값이 조건에 성립하면 다음 Form을 보여줍니다, 반대로 조건에 부합하지 않다면 에러 메세지를 보여주고 새로운 값을 입력받도록 합니다. 자동차 이름들과 레이싱 횟수를 전달합니다.

 - race-utils: 앞에서 받은 input 값들이 조건들을 모두 만족하면 레이스를 시작하며 입력받은 횟수만큼 레이스 과정과 우승자(들)를 전달합니다.

 - paint-utils: 전달받은 레이스 과정과 우승자(들)를 시각적으로 표시합니다. 실행을 마칩니다.

 

 

## 자동차 경주 게임 완성! (회고)

 

 아직 JavaScript와 친하지 않은것 같은 느낌

 

구현을 하면서도 아직 자바스크립트와 친하지 않은것 같다는 느낌이 자주 들었다. 친해지려면은 그만큼 꾸준히 관심을 가지고 공부를 해야할탠데... 지금 이 글을 쓰면서 최근 몇일간 무책임하게 놀고만 있는 나를 돌아보니 반성할 수 밖에...

 

노력해야겠다. 열정! 열정! 열정!

 

 

 조금 더 좋은 코드를 만들어 나가고싶다.

 

다른 사람들의 코드를 보면서 가장 눈에 들어왔던게 바로 this 이다.

사실 읽다가 뭔소리인지 모르겠어서 제일눈에 들어오지 않았을까...

 

this가 무엇이고 어떤 역할을 하는지 알고 이를 활용한다면 훨씬 깔끔하고 쉽게 코드를 작성 할 수 있을것같다. this를 배우며 시인성을 높이고 체계적으로 코드를 구성하는 능력을 기르고 싶어 이전에 사놓았던 javascript 책과 클린코드 인강을 통해 한번더 성장해보려고 한다.

 

단기간의 계획과 목표가 지나간 이후라 그런지 순식간에 무기력해지는 나를 보며 몇일동안 한숨만 내쉰것같았다. 하지만 작년부터 'good vibes only'라는 말을 계속 뇌에 세기고 있던 터라 약간의 노력을 하다보니 그다음 목표를 세우고 기분전환이 된것같아 다행이다.