[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?)
- 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를 사용해서 조금 더 간소하게 작성할 수 있다.
반복되는 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을 남기게 되면, 언제 어떤 작업을 했는지 추적하기에도 용이.