지난 주에 이어서 "코스 메이커" 프로젝트의 코드를 리팩토링 할 때 9장의 기술을 적용해 보기로 했다.

9.1 변수 쪼개기

변수의 용도

1. 변수에 값을 여러 번 대입할 수밖에 없는 경우
   • 루프 변수
   • 수집 변수
2. 긴 코드의 결과를 저장했다가 나중에 쉽게 참조하려는 목적으로 쓰이는 경우
   • 이런 변수에는 값을 단 한 번만 대입해야 함
   • 대입이 두 번 이상 이뤄진다면 여러 가지 역할을 수행한다는 신호임
   • 역할이 둘 이상인 변수가 있다면 쪼개야함

코드에 적용하기(입력 매개변수의 값을 수정할 때)

• 회원가입 페이지에서 입력된 숫자를 전화번호 형식(000-0000-0000)으로 변환하는 함수인 formatPhoneNumber함수에서 매개변수 value가 두가지 용도로 사용된다는 사실을 알게 됨
• 수정 전 함수

export const formatPhoneNumber = (value: string) => {
  value = value.replace(/\D/g, "");
  if (value.length > 11) {
    value = value.slice(0, 11);
  }

  const parts = [];
  if (value.length > 3) {
    parts.push(value.substring(0, 3));
    if (value.length > 7) {
      parts.push(value.substring(3, 7));
      parts.push(value.substring(7));
    } else {
      parts.push(value.substring(3));
    }
  } else {
    parts.push(value);
  }

  return parts.join("-");
};

• 위 함수에서 매개변수 value는 다음 2가지 역할을 함
  1. 함수에 데이터를 전달
  2. 입력된 전화번호 문자열을 저장하고 가공
• 수정 후 함수

export const formatPhoneNumber = (phoneNumber: string) => {
  let formattedNumber = phoneNumber.replace(/\D/g, "");
  if (formattedNumber.length > 11) {
    formattedNumber = formattedNumber.slice(0, 11);
  }

  const parts = [];
  if (formattedNumber.length > 3) {
    parts.push(formattedNumber.substring(0, 3));
    if (formattedNumber.length > 7) {
      parts.push(formattedNumber.substring(3, 7));
      parts.push(formattedNumber.substring(7));
    } else {
      parts.push(formattedNumber.substring(3));
    }
  } else {
    parts.push(formattedNumber);
  }

  return parts.join("-");
};

• value 매개변수를 phoneNumber와 formattedNumber로 분리해서 각 변수가 하나의 역할만 수행하도록 함
  1. 함수에 데이터를 전달 -> phoneNumber
  2. 입력된 전화번호 문자열을 저장하고 가공 -> formattedNumber
• 그 결과 변수들의 역할을 더 분명해졌고, 코드를 유지 보수하기에도 용이해짐

9.2 필드 이름 바꾸기

• 레코드의 유효 범위가 제한적이라면 필드에 적근하는 모든 코드를 수정한 후 테스트 하면 됨
• 레코드의 유효 범위가 넓다면 캡슐화를 진행하고 게터와 세터 이름을 바꾸면 됨
  • 바꾸는 과정에서 this_title = (data.title !== undefined) ? data.title : data.name과 같이 코드를 구성하여 바꾸기 전name과 바꾼 후title가 모두 적용되도록 조치하는 것을 잊지 말자