Final: 클린 코드에서 배운 내용으로 코드 고치기

내가 가장 뼈맞은 것 같았던 진리 3가지는 다음과 같다.

진리1: (변수) "좋은 이름을 지으려면 시간이 걸리지만 좋은 이름으로 절약하는 시간이 훨씬 더 많다."
진리2: (함수) "함수는 한 가지를 해야한다. 그 한가지를 잘 해야 한다. 그 한 가지만을 해야 한다."
진리3: (형식) "빈 행은 새로운 개념을 시작한다는 시각적 단서다."

생각보다 각각의 예시를 찾기 어려워, 예전에 바닐라JS 수업 때 진행했던 랜덤 숫자 맞추기 게임 챌린지 과제를 가져와 각 진리들을 적용해 고쳐보기로 했다. (사용자가 숫자의 범위를 지정하고, 범위 안의 숫자를 기입하면, 그 값을 가져와 컴퓨터가 랜덤으로 내놓은 숫자와 일치하는 지 확인하는 프로그램이었다. 사용자 입력값과 컴퓨터 값이 일치하면 이겼다는 메세지를 보내도록 했었다.)

수정 사항은 다음과 같다.

수정1: print( ) 함수명을 함수의 기능을 이름만 봐도 알 수 있도록 더 명확히 수정하였다. - 예) printGuessedNumber( ).

수정2: print( ) 함수 하나가 여러 가지 기능을 수행하고 있었다: 1) 사용자 입력값 불러와 프린트 2) 컴퓨터의 랜덤 값을 불러와 프린트 3) 게임의 승패 여부 메세지 프린트. 클린 코드에 따르면 하나의 함수는 하나의 기능만을 수행하여야 하므로, 각 기능에 맞게 각각 3가지 함수로 쪼개 주었다. - 1) printGuessedNumber() 2) printRandomNumber() 3) printResult( )

수정3: 개념이 변하는 곳에 들여쓰기를 넣어 가독성을 높혀주었다.

수정은 아래와 같이 이루어졌다.

🔖 Variables

const userGuessForm = document.querySelector("#user-guess-form");
const userGuess = document.querySelector("#user-guess-input");
const rangeSet = document.querySelector("#range-set-input");
const divHidden = document.querySelector("#print");
const printGuess = document.querySelector("#print-guess-input");
const printRange = document.querySelector("#print-range-input");
const result = document.querySelector("#result span");

const USERGUESS__KEY = "guess-key";
const HIDDENCLASS__NAME = "hidden";

😵 Before

function onGuessSubmit(event) {
  event.preventDefault();
  localStorage.setItem(USERGUESS__KEY, userGuess.value);
  print();
}

function print() {
  const typedUserGuess = localStorage.getItem(USERGUESS__KEY);
  printGuess.innerText = `You chose ${typedUserGuess}`;
  const randomNum = parseInt(Math.ceil(Math.random() * rangeSet.value));
  printRange.innerText = `, and the machine chose ${randomNum}`;
  divHidden.classList.remove(HIDDENCLASS__NAME);
  if (typedUserGuess == randomNum) {
    result.innerText = `Woohoo!🥳 You won!`;
  } else if (typedUserGuess !== randomNum) {
    result.innerText = `Boohoo!😩 You losing!`;
  }
}

userGuessForm.addEventListener("submit", onGuessSubmit);

😁 After

function onGuessSubmit(event) {
  event.preventDefault();
  localStorage.setItem(USERGUESS__KEY, userGuess.value);
  print();
};

function printGuessedNumber() {
  const typedUserGuess = localStorage.getItem(USERGUESS__KEY);
  printGuess.innerText = `You chose ${typedUserGuess}`;
};

function printRandomNumber () {
  const randomNum = parseInt(Math.ceil(Math.random() * rangeSet.value));
  printRange.innerText = `, and the machine chose ${randomNum}`;
};

function printResult () {
  divHidden.classList.remove(HIDDENCLASS__NAME);
  if (typedUserGuess == randomNum) {
    result.innerText = `Woohoo!🥳 You won!`;
  } else if (typedUserGuess !== randomNum) {
    result.innerText = `Boohoo!😩 You losing!`;
  }
};

userGuessForm.addEventListener("submit", onGuessSubmit);

👀 느낀점:

고칠 코드를 찾기 생각보다 힘들었다. 왜일까 이유를 되짚어보다 뼈맞은 사실 하나는 '딱히 내 코드가 없다'는 것. 수업 내용을 듣고 따라가며 챌린지도 몇 번 참여했었지만, 기본적으로 이미 깔끔한 니코쌤이 짜준 코드에 약간의 변형만 더한 것이었다. 그러니 내 코드라기보단 니코쌤의 코드). 또 당시에 꽤 만족하며 썼던 코드들도 다시 보니 당연히도 부족한 점이 많았다.
➡️ 결론: 강의 한 번에 내 것이 됐다고 착각하지말고, 응용하면서 진짜 내 코드도 짜보자. + 자꾸 리팩토링하며 내 것으로 만들자.