코드 개선사항

Vue

1. Props

• props 유효성 검사

before

문자열 배열 형태로만 작성

props: ['status']

after

props: {
	status: {
      	// 데이터 타입 확인
    	type: String,
        // 필요한 prop인지
        required: true,
        // 기본 값 설정
        default: "good",
        // 유효한 value인지 확인
        validator: (status) => ['sad', 'happy','bored', 'good'].indexOf(status) !== -1,
    }
}

모든 key,value에 맞는 prop의 유효성을 검사하고,
유효하지 않으면 개발자 도구 console로 warning이 출력된다.

2. Code Fomatting 관련

• trailing comma

prettier 설정 - trailing comma

before

person : {
	name: "Mike",
    	age: 25
}

after

person : {
	name: "Mike",
    	age: 25,
}

• bracket spacing

before

<template>
...
<div>{{변수}}</div>
...
<tamplate>

after

<template>
...
<div>{{ 변수 }}</div>
...
<tamplate>

3. prop에 따른 class명 명명시

prop으로 class명을 넣어서 스타일을 조정하는 경우,
클래스명을 단순하게 명명한다면 부모 페이지의 CSS와 충돌할 수 있으므로,
적절한 class명이 필요함.

before

<button class = "custom-button active">...</button>

after

<button class = "custom-button custom-button--active">...</button>

Javascript

• toLocateScaleString()

  Array.prototype.toLocaleString()
  

before

let number = 999999;
number = number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
console.log(number);
//999,999

after

let number = 999999;
number = number.toLocateScaleString();
console.log(number);
//999,999

HTML

• button attribute 관련

before

<button> ... </button>

after

<button type="button"> ... </button>

native button 사용시 반드시 type="button" 속성을 기재해야 한다.
만약 기재하지 않으면, 브라우저가 type 속성 없는 버튼은 기본적으로 submit 버튼으로 판단하기 때문에 form 태그 안에 Button이 존재할 경우 의도치않게 submit이 되어버린다.

CSS

• 고정 길이 사용 최소화

  유동적으로 길이가 변경 되어야 반응형에 대응하기가 쉬워진다.
  반드시 그 길이를 유지해야만 하는 경우에만 사용하자.