[우아한테크코스 4기] 최종 코딩테스트 준비

해당 글은 내가 프리코스를 진행하면서 신속하게 최종 코딩테스트를 진행하기 위해서 정리 해놓은 글

📌 코드 컨벤션 & 커밋 컨벤션

커밋 컨벤션

• feat (기능개발)
• fix (버그 수정)
• docs (문서 작업)
• style (코드 포맷팅, 세미콜론(;)을 빠트림, …)
• refactor (기능은 바뀌지 않지만 코드가 바뀔 때)
• test (테스트 코드 작성 시)
• chore (주석 또는 환경설정, 상수 파일 생성, 유지보수)

코드 컨벤션 (공식)

• 코드 컨벤션을 잘 지켰는가?
• 순수 바닐라 자바스크립트를 사용했는가?
• 모든 함수는 15줄 아래로 작성했는가?
• 모든 함수는 한 가지 일만 하는가?
• let, const만 사용했는가?
• import, export를 이용해 모듈화를 진행했는가?
• 코드의 깊이는 3을 넘지 않았는가? (2까지만)
• 재시작 버튼 아이디 값 game-restart-button을 넣었는가?
• 랜덤값 계산 라이브러리(mission util)를 적용했는가?

코드 컨벤션 (개인)

• MVC 컴포넌트들은 시작을 대문자로 시작
• validators, utils, templates 같은 경우는 함수이므로 소문자로 시작

📌 개발 진행 순서

1. node version 확인

• nvm use 14로 14버전의 노드를 사용하자. (eslint, cypress 관련해서 이슈가 있음)

2. 레파지토리 포크 후 클론 후 브랜치 생성

• 이메일로 받은 레파지토리 내 계정으로 포크
• 깃허브 데스크탑으로 클론
• 브랜치 생성 (이름으로 생성)

3. 요구사항 파악하기

• 요구사항을 파악하면서 구현해야하는 기능을 정리
• 기능 구현 리스트는 언제든 바뀔 수 있음 (수정 하면서 진행)
• 예외 처리까지 리스트에 포함이 되어야 함

기능 목록 문서 템플릿

// docs/README.md

<!-- 타이틀 입력 -->
<p align="middle" >
  <img width="200px;" src="https://github.com/woowacourse/javascript-racingcar-precourse/blob/main/images/racingcar_icon.png?raw=true"/>
</p>
<h1 align="middle">자동차 경주 게임</h1>

<!-- 내용 입력 -->

# 기능 목록

<!-- UI를 우선적으로 그린다. -->
### 📌 UI

- [ ] 헤더를 그리는 템플릿 생성한다.
- [ ] 자동차 이름을 입력 받는 form을 생성한다.
- [ ] 시도 횟수를 입력 받는 form을 생성한다.

<!-- 큼지막한 기능 아래 예외상황을 전부 적는다. -->
### 📌 기능

#### 자동차 등록

- [ ] 유저가 자동차 이름을 입력하고 확인 버튼 클릭 시 자동차 객체가 등록이 되도록 한다.
  - [ ] 자동차 이름은 5자 이하만 가능하도록 한다.
  - [ ] 5자가 넘는다면 `alert`로 경고 메세지를 띄운다.
  - [ ] 이름은 쉼표(`,`)를 기준으로 객체가 나누어진다.
  - [ ] 자동차 이름은 필수로 받도록 한다.
  - [ ] 위의 조건들이 맞지 않다면 `alert`로 경고 메세지를 띄운다.
  - [ ] 이름을 입력하면 시도 횟수를 입력하는 `form`이 뜨도록 한다.

#### 시도 횟수 등록

- [ ] 유저가 시도 횟수를 입력하고 확인 버튼을 클릭 시 시도 횟수가 등록이 된다.
  - [ ] 시도 횟수는 오직 숫자만 받도록 한다.
  - [ ] 0 또는 음수는 받지 않도록 한다.
  - [ ] 위의 조건들이 맞지 않다면 `alert`로 경고 메세지를 띄운다.
  - [ ] 시도 횟수를 입력하면 실행 결과가 뜨도록 한다.

#### 경주 시작 및 실행 결과 출력

- [ ] 자동차들이 시도 횟수 만큼 경기를 진행한다.
  - [ ] 전진하는 조건은 0에서 9사이에서 무작위 값을 구한 후 4 이상일 경우 전진한다.
  - [ ] 출력하는 메세지는 `${자동차 이름}: ${전진 횟수}`이다.
  - [ ] 출력은 매 시도마다 출력한다.
  - [ ] 최종 우승자를 맨 아래에 출력한다.
  - [ ] 최종 우승자는 여러 명이 될 수 있고 콤마(`,`)로 구분한다.

<!-- 리팩토링 내용들을 진행하면서 계속 넣는다. -->
### 📌 리팩토링

- [ ] 리팩토리 내용을 입력합니다.

<!-- 마지막으로 체크해야 할 것들을 넣는다. -->
### 📌 마지막 체크 사항들

- [ ] 요구사항 한번 더 확인
- [ ] 선택자를 알맞게 넣었는지 확인
- [ ] 예외 상황이 더 있는지 생각
- [ ] 함수가 15줄이 넘지 않는지 확인

4. eslint, prettier 설정

설치

npm install -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier prettier​

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'import/prefer-default-export': 'off',
    'import/extensions': ['off'],
    'class-methods-use-this': 'off',
    'no-alert': 'off',
    'no-undef': 'off',
    'no-new': 'off',
  },
};

// .prettierrc.js
module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 100,
  bracketSpacing: true,
  arrowParens: 'avoid',
};

후에 prettier onSaveFormat 옵션 확인하기.

5. Selector 상수 값 생성하기

• 맨 처음에는 constants.js 하나만 생성해서 진행

6. Utils 생성하기

• 로컬 스토리지 관련 유틸

// utils/store.js
const store = {
  setLocalStorage(key, menu) {
    localStorage.setItem(key, JSON.stringify(menu));
  },
  getLocalStorage(menu) {
    return JSON.parse(localStorage.getItem(menu));
  },
};

export default store;

• DOM 관련 유틸

// utils/dom.js
export const $ = selector => document.querySelector(selector);

7.  각각의 폴더와 해당하는 index.js 파일을 먼저 생성한다.

• index.js
• controller/index.js
• controller/validators/index.js
• model/index.js
• view/index.js
• view/templates/index.js
• constants.js

8.  템플릿 폴더를 만들어서 UI를 그린다.

우선 큼지막하게 부분으로 나눠서 컨테이너 DOM을 생성하고, id값을 부여한다.

그 아래로 일어나는 이벤트들은 이벤트 위임을 통해서 부여하도록 한다.

 

view에서는 처음에 initializeApp() 메소드를 통해서 타이틀과 아래의 컨테이너들을 전부 그린다.

controller에서는 initEventListener() 메소드를 통해서 이벤트 위임을 할 컨테이너에 클릭 이벤트를 붙인다.

 

참고1[자동차 경주 게임 내 코드]: 링크

참고2[자판기 제출 코드]: 링크

참고3[자판기 내 코드]: 링크

9. 열심히 로직 구현을 한다...

• validators 생성
• utils 생성

table style 상수

export const STYLE = Object.freeze({
  tableBodyData: 'border: 1px solid black;padding: 10px 50px;text-align: center;',
  tableHeadData: 'border: 1px solid black;padding: 10px 50px;font-weight: bold;text-align: center;',
  table: 'border: 1px solid black;border-collapse: collapse;',
});

10. 제출 시 주의사항

1. PR을 날린다.

2. 우테코 지원현황 페이지에도 올린다.