2주차 과제 코드 리뷰

이소라·2021년 8월 12일

DOM (Document Object Model) 요소

DOM 요소 naming
- 이름 앞에 $을 붙이거나, 뒤에 Element를 붙임

// 내 코드
const board = document.querySelector(".board");
const turn = document.querySelector(".turn");

// 수정된 코드
const $board = document.querySelector(".board");
const $turn = document.querySelector(".turn");

Document.querySelectAll()
- 지정된 selector 그룹에 일치하는 document의 elementList를 나타내는 정적인 NodeList를 반환함
- querySelectorAll이 사용된 변수는 복수 형태로 naming

// 내 코드
const selectBox = document.querySelectAll(".box");

// 수정한 코드
const $selectBoxes = document.querySelectAll(".box");

참고 : querySelectorAll

삼항 조건 연산자

3개의 피연산자를 취할 수 있는 유일한 연산자
syntax - 조건문 ? 조건이 truthy일 때의 실행문 : 조건이 falsy일 때의 실행문

// 내 코드
if ($turn.textContent === "O") {
  $turn.textContent = "X";
} ele {
  $turn.textContent = "O"
}

// 수정한 코드
$turn.textContent = textContent === "O" ? "X" : "O";

동등 연산자 & 일치 연산자

동등 연산자 (==)

2개의 피연산자가 동일한지 확인하며 Boolean 값을 반환함
일치 연산자(===)와 다르게 타입 변환을 통해 다른 타입의 피연산자끼리 비교함
- 두 피연산자가 모두 객체일 때, 두 피연산자가 동일한 객체를 참조할 때만 true를 반환
- 한 피연산자가 null이고 다른 피연산자가 undefined일 때, true를 반환
- 두 피연산자의 타입이 다를 때, 비교하기 전 동일한 타입으로 변환
  - 숫자와 문자열을 비교하는 경우, 문자열을 숫자로 변환
  - 한 피연산자가 Boolean일 경우, true면 1로 false면 0으로 변환
  - 한 피연산자가 객체이고 다른 피연산자가 숫자나 문자열일 경우, 객체를 valueOf()나 toString()를 사용해 기본 데이터 타입으로 변환
- 두 피연산자의 타입이 같을 때, 다음과 같이 비교됨
  - String : 두 피연산자가 문자순서가 동일한 문자열인 경우, true를 반환
  - Number : 두 피연산자가 동일한 값을 가질 경우, true를 반환. +0과 -0은 동일한 값으로 취급. 둘 중 한 피연산자가 NaN인 경우, false를 반환
  - Boolean : 두 피연산자가 모두 true이거나 모두 false인 경우, true를 반환

일치 연산자

2개의 피연산자가 동일한지 확인하며 Boolean 값을 반환함
동등 연산자(==)와 다르게 타입 변환을 시도하지 않음
다른 타입의 피연산자는 다르다고 판단함

예상치 못한 버그를 발생시킬 수 있는 동등 연산자(==)보다 일치 연산자(===)를 사용하자!

// 내 코드
if (event.target.textContent == "") {
    event.target.textContent == $turn.textContent;
  ...
}

// 수정한 코드
if (event.target.textContent === "") {
    event.target.textContent === $turn.textContent;
  ...
}

참고 : 동등 연산자, 일치 연산자, 동치 비교와 동일성

classList를 사용하여 CSS Class style 변경하기 (직접적으로 style을 변경 X)

Javascript에서 style을 직접 변경하는 것을 지양하는 이유
1. 직접적으로 style을 부여하는 경우, inline style로 적용됨
  - inline 스타일의 우선순위가 높으므로 스타일 문제의 원인이 될 수 있음
  - CSS 우선순위 : !important > style of HTML > #id > class, :pseudo-class > tag > inherence
2. CSS와 Javascript의 로직 간 분리를 위해서임
Element.classList
- 요소의 클래스 속성값들의 집합인 DOMTokenList를 반환하는 읽기 전용 프로퍼티
- 메소드 : add(), remove(), toggle(), contains(), replace()

const div = document.createElement("div");
div.clasName = "foo";
// <div class="foo"></div>
console.log(div.outerHTML);

div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if "visible" is set remove it, otherwise add it
div.classList.toggle("visible");
// <div class="anotherclass visible"></div>
console.log(div.outerHTML);

// if "foo" is set return true, otherwise return false
console.log(div.classList.contains("foo")); // 

// replace class "anotherclass" to "bar"
div.classList.replace("anotherclass","bar");
// <div class="bar visible"></div>
console.log(div.outerHTML);

참고 : CSS 우선순위, Element.classList

판별값은 상수로 처리하기

판별값은 가독성 좋은 변수명으로 상수 처리하기

// 내 코드
if (!result && clickTime === 9) {
  $winner.textContent = 'Draw!';
  ...
}
// 수정한 코드
const TOTAL_BOXES_NUMBER = 9;
if (!result && clickTime === TOTAL_BOXES_NUMBER) {
  $winner.textContent = 'Draw!';
  ...
}

class명은 kebabcase를 사용하기

case style
- camelCase : 첫 단어는 소문자로 시작하고, 두번째 단어부터 대문자로 시작함
- kebab-case : 모든 단어가 소문자로 시작하고, 단어와 단어 사이는 "-"로 연결함
- PascalCase : 모든 단어가 대문자로 시작함
- snake_case : 모든 단어가 소문자로 시작하고, 단어와 단어 사이는 "__"로 연결함
class명은 kebabcase 사용을 권장함

// 내 코드
<button type="button" class="startButton"></button>

// 수정한 코드
<button type="button" class="start-button"></button>

참고 : casestyle

CSS 속성 순서

순위	의미	대표 속성
1	레이아웃	display, visibility, overflow, float, clear, position, top, right, bottom, left, z-index
2	BOX	width, height, margin, padding, border
3	배경	background
4	폰트	font, color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space
5	기타	위에 언급하지 않은 나머지 속성들, 기타 속성 내에서 선언 순서 무관함

/* 내코드 */
.border {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
/* 수정 후 코드 */
.border {
  display: grid;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}