[Week3] Code Review Summary

unnecessary white space

3번째 매개변수 전달 후 불필요한 공백이 있는 것으로 확인. 과제 제출하기 전 확인!

// before (choiceItem ,)
createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem , textContent, i);
// after (choiceItem,)
createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem, textContent, i);

 

function naming

endGame이라는 함수명보다 내부의 로직을 더욱 명확히 설명할 수 있는 네이밍으로 변경하기.

// before
function endGame(correctCount) {
  $quizBoard.classList.remove(CSS_CLASSNAME.displayFlex);
  $resultBoard.classList.remove(CSS_CLASSNAME.displayNone);
  $resultBoard.classList.add(CSS_CLASSNAME.displayFlex);
  document.querySelector('.correct-count').textContent = `${correctCount} / ${QUESTIONS_COUNT}`;
}
// after
function showResultBoard(correctCount) {
  // logics...
}

• endGame이라는 함수명은 게임이 끝났을 때 즉 '언제' 쓰이는 함수인지를 알려주는 네이밍.
• 네이밍을 할 때 이벤트 리스너 함수가 아니라면, '언제' 사용하는 함수인지가 아닌 그 함수가 '무엇'을 하는지 즉 정확히 어떤 일을 하는지를 기준으로 함수명을 작성해야 함수명을 통해 '무엇'을 실행하는 지 이해할 수 있음.

 

variable naming

// before
const USER_ANSWERS = Array(QUESTIONS_COUNT).fill(null);
// after
const userAnswers = Array(QUESTIONS_COUNT).fill(null);

USER_ANSWERS 변수의 경우 소문자 + camelCase를 사용하는 것이 적절.

• 일반적으로 상수 같은 경우 값이 변동이 없이 사용되는 것. 위 값의 경우 유저가 각 문제에서 선택한 선택지를 담고 있는 배열을 의미하는 것이므로, 일반적인 변수 네이밍인 소문자 + camelCase 사용을 추천

 

img tag 의 alt

img tag를 사용할 때에는 사용자 접근성을 위해 alt를 사용하는 것을 권장

<!-- before -->
<img class="timer-img" src="images/stopwatch.svg" />

<!-- after -->
<img class="timer-img" src="images/stopwatch.svg" alt="timer image" />

• 설명 (Why?)
  • img Tag MDN
• alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.

---

그 외 더 나은 코드를 위한 방향

 

forEach, map, reduce

// before
for (let i = 0; i < choices.length; i++) {
    const textContent = `${String.fromCharCode(asciiNumber)}. ${choices[i]}`;
    createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem, textContent, i);
    asciiNumber++;
}
// after
choices.forEach((choice, index) => {
  const textContent = `${String.fromCharCode(asciiNumber)}. ${choice}`;
  createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem, textContent, index);
  asciiNumber++;
});

지금 작성된 코드도 문제는 없지만, for문 사용 시 forEach, map, reduce를 사용할 수 있는지를 고민해보면 좋다. 위 코드의 경우 forEach를 사용해서 조금 더 간소하게 작성할 수 있다.

• forEach
• map
• reduce

 

반복되는 logic은 함수로 처리

1️⃣ class remove & add

// before
if (code) {
  $exampleCode.textContent = code;
  $codeContainer.classList.remove(CSS_CLASSNAME.hideCodeExample);
  $codeContainer.classList.add(CSS_CLASSNAME.showCodeExample);
} else {
  $codeContainer.classList.remove(CSS_CLASSNAME.showCodeExample);
  $codeContainer.classList.add(CSS_CLASSNAME.hideCodeExample);
}

// after
function toggleDomElementClassName(domElement, classNameToAdd, classNameToRemove) {
  domElement.classList.remove(classNameToRemove);
  domElement.classList.add(classNameToAdd);
}

if (code) {
  $exampleCode.textContent = code;
  toggleDomElementClassName($codeContainer, CSS_CLASSNAME.showCodeExample, CSS_CLASSNAME.hideCodeExample);
} else {
  toggleDomElementClassName($codeContainer, CSS_CLASSNAME.hideCodeExample, CSS_CLASSNAME.showCodeExample);
}

$codeContainer DOM 요소의 class의 add, remove를 위한 로직을 자주 사용. 이 경우 함수를 통해 remove, add를 계속 작성하는 것보다 함수를 통해 더욱 간단하게 사용할 수 있도록 하는 편이 좋음.

 

commits convention

commit의 경우 작업의 단위 별로 남기는 것 추천. 예를 들면 checkAnswer 함수를 추가했다. (Add: checkAnswer function) commit의 제목을 통해 어떤 작업을 했는지 명확히 알 수 있고, 더불어 작업 단위 별로 commit을 남기게 되면, 언제 어떤 작업을 했는지 추적하기에도 용이.

• Conventional Commits