[Clean Code] 미션 5 - Day 22, 23

Clean Code 미션 5 Day 22, 23

클린 코드 읽으며 뼈맞았던 내용 중 3가지 진리 를 고르고, 진리를 따르는 예시 총 3가지를 만들기.

진리 1. try/catch 블록을 별도 함수로 뽑아내는 편이 좋다. (p.58)

무엇을 고쳤는가?

😂 Before

  const saveAsImageHandler = async () => {
    const target = document.getElementById('content');
    if (!target) return alert('결과 저장에 실패했습니다.');
    alert(
      '새로운 창이 열리면\nPC에서는 우클릭 -> 이미지 저장하기\n모바일은 이미지를 꾹 눌러주세요!\n*새로운 창이 안 열린다면 팝업을 해제해주세요*'
    );
    try {
      const canvas = await html2canvas(target);
      canvas.toBlob((blob) => {
        if (blob) {
          const uri = URL.createObjectURL(blob);
          window.open(uri);
        }
      });
    } catch (error) {
      alert('결과를 저장할 수 없습니다.');
    }
  };

페이지의 해당 영역을 캡처해서 이미지로 저장하게 하는 부분이다.

보다시피 한 함수 안에서 정상 동작과 오류 처리 동작을 뒤섞으면서 여러 동작을 수행하고 있다.

이러한 함수는 코드 구조에 혼란을 일으킬 수 있다.

어떻게 고쳤는가?

😍 After

  const saveImage = async () => {
    const target = document.getElementById('content');
    if (target) {
      alert(
        '새로운 창이 열리면\nPC에서는 우클릭 -> 이미지 저장하기\n모바일은 이미지를 꾹 눌러주세요!\n*새로운 창이 안 열린다면 팝업을 해제해주세요*'
      );
      const canvas = await html2canvas(target);
      canvas.toBlob((blob) => {
        if (blob) {
          const uri = URL.createObjectURL(blob);
          window.open(uri);
        }
      });
    }
  };

  const saveImageError = () => {
    return alert('결과를 저장할 수 없습니다.');
  };

  const onClick = () => {
    try {
      saveImage();
    } catch (error) {
      saveImageError();
    }
  };

버튼을 클릭 했을 때 동작하는 함수 onClick 함수에다가 try/catch문을 작성했다.

try/catch문 안에는 정상 동작을 처리하는 함수 saveImage를 생성해서 호출하게 했고,

오류 동작 처리를 하는 함수 saveImageError 함수를 생성해서 호출하게 했다.

이렇게 별도 함수로 뽑아냄으로써 구조가 한눈에 들어온다.

진리 2. 함수는 '한 가지' 작업만 해야 한다.(p.59)

무엇을 고쳤는가?

😂 Before

function increaseAudioTimer() {
  time++;
  let mins = Math.floor((time % 3600) / 60);
  let secs = (time % 3600) % 60;

  audioTime.innerHTML = `${mins < 10 ? `0${mins}` : mins}:${secs < 10 ? `0${secs}` : secs}`;
}

function resetAudioTimer() {
  clearInterval(timerInterval);
  time = START_TIME;
  audioTime.innerHTML = '00:00';
}

오디오의 시간을 증가시키고 초기화 하는 총두 개의 함수가 있다.

각 함수들에서 여러 기능을 중복되는 기능을 하고 있는 것을 볼 수 있다.

increaseAudioTimer 함수 안에서는 시간을 증가시키고 분, 초를 계산하는 식과 시간을 표시하는 부분이 있다.

resetAudioTimer 함수도 보면 안에서 시간을 표시하는 중복되는 부분을 볼 수 있다.

어떻게 고쳤는가?

😍 After

function resetAudioTimer() {
  clearInterval(timerInterval);
  time = START_TIME;
  displayAudioTime(0, 0);
}

function displayAudioTime(mins, secs) {
  audioTime.innerHTML = `${mins < 10 ? `0${mins}` : mins}:${
    secs < 10 ? `0${secs}` : secs
  }`;
}

function increaseAudioTimer() {
  time++;
  const { mins, secs } = getPlayTime();
  displayAudioTime(mins, secs);
}

function getPlayTime() {
  const mins = Math.floor((time % 3600) / 60);
  const secs = (time % 3600) % 60;

  return { mins, secs };
}

1. 시간을 계산하는 기능을 getPlayTime 함수로 분리했다.
2. 중복되는 시간을 표시하는 기능을 displayAudioTime 함수로 분리했다.

각각 함수로 분리함으로서 어떤 함수가 어떤 기능을 하는지 명확하게 알 수 있고 나중에 리팩토링을 하게 되어도 해당 함수만 수정하면 되기 때문에 이점이 생겼다.

진리 3. 코드만이 정확한 정보를 제공하는 유일한 출처다. 그러므로 우리는 주석을 가능한 줄이도록 꾸준히 노력해야 한다. (p.69)

무엇을 고쳤는가?

😂 Before

// 문자를 포함한 숫자로된 문자들을 정수로 바꾸는 함수
function stringNumberToInt(stringNumber) {
  return parseInt(stringNumber.replace(/,/g, ''));
}
// 천 자리 콤마 함수
function numberFormat(inputNumber) {
  return inputNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

함수를 설명하는 주석이 추가 되어있는 것을 볼 수 있다.

주석을 최대한 줄이고 함수 자체로만 설명이 가능하게 끔 변경을 해주어야 한다.

어떻게 고쳤는가?

😍 After

function stringNumberToInt(stringNumber) {
  return parseInt(stringNumber.replace(/,/g, ''));
}

function addCommatoThousandDigits(inputNumber) {
  return inputNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

첫번째 함수 stringNumberToInt는 함수명만 봐도 어떤 기능을 하는 함수인지 명확하게 알 수 있기 때문에 불필요한 주석은 제거해줬다.

두 번째 함수 addComaToThousandDigits 함수는 천 자리 숫자에 콤마를 추가해 주는 기능을 하는 함수다.

변경 전에는 함수 numberFormat이라는 모호한 함수명이었기 때문에 주석이 필요했겠지만,

변경 후에는 주석이 없어도 어떤 기능을 하는지 바로 알 수 있게되었다.