[리팩터링 카탈로그] 1-11. 단계 쪼개기

절차

  1. 두 번째 단계에 해당하는 코드를 독립 함수로 추출한다.
  2. 테스트 한다.
  3. 중간 데이터 구조를 만들어서 앞에서 추출한 함수의 인수로 추가한다.
  4. 테스트 한다
  5. 추출한 두 번째 단계 함수의 매개변수를 하나씩 검토한다. 그중 첫 번째 단계에서 사용되는 것은 중간 데이터 구조로 옮긴다. 하나씩 옮길 때마다 테스트한다.
    → 간혹 두 번째 단계에서 사용하면 안 되는 매개변수가 있다. 이럴 때는 각 매개변수를 사용한 결과를 중간 데이터 구조의 필드로 추출하고, 이 필드의 값을 설정하는 문장을 호출한 곳으로 옮긴다.
  6. 첫 번째 단계 코드를 함수로 추출하면서 중간 데이터 구조를 반환하도록 만든다.
    → 이때 첫 번째 단계를 번환기 객체로 추출해도 좋다.

예시

Before:

const orderData = orderString.split(/\s+/);
const productPrice = priceList[orderData[0].split("-")[1]];
const orderPrice = parseInt(orderData[1]) * productPrice;

After:

const orderRecord = parseOrder(order);
const orderPrice = price(orderRecord, priceList);

function parseOrder(aString) {
  const values = aString.split(/\s+/);
  return {
    productId: values[0].split("-")[1],
    quantity: parseInt(values[1]),
  };
}

function price(order, priceList) {
  return order.quantity * priceList[order.productId];
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-10. 여러 함수를 변환 함수로 묶기

절차

  1. 변환할 레코드를 입력받아서 값을 그대로 반환하는 변환 함수를 만든다.
    → 이 작업은 대체로 깊은 복사로 처리해야 한다. 변환 함수가 원본 레코드를 바꾸지 않는지 검사하는 테스트를 마련해두면 도움될 때가 많다.
  2. 묶을 함수 중 함수 하나를 골라서 본문 코드를 변환 함수로 옮기고, 처리 결과를 레코드에서 새 필드로 기록한다. 그런 다음 클라이언트 코드가 이 필드를 사용하도록 수정한다.
    → 로직이 복잡하면 함수 추출하기부터 한다.
  3. 테스트 한다.
  4. 나머지 관련 함수도 위 과정에 따라 처리한다.

예시

Before:

function base(aReading) {
  // ...
}
function taxableCharge(aReading) {
  // ...
}

After:

function enrichReading(argReading) {
  const aReading = _.cloneDeep(argReading);
  aReading.baseCharge = base(aReading);
  aReading.taxableCharge = taxableCharge(aReading);
  return aReading;
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-9. 여러 함수를 클래스로 묶기

절차

  1. 함수들이 공유하는 공통 데이터 레코드를 캡슐화 한다
    → 공통 데이터가 레코드 구조로 묶여 있지 않다면 먼저 매개변수 객체 만들기로 데이터를 하나로 묶는 레코드를 만든다.
  2. 공콩 레코드를 사용하는 함수 각각을 새 클래스로 옮긴다(함수 옮기기)
    → 공통 레코드의 멤버는 함수 호출문의 인수 목록에서 제거한다.
  3. 데이터를 조작하는 로직들은 함수로 추출해서 새 클래스로 옮긴다.

예시

Before:

function base(aReading) {
  //...
}
function taxableCharge(aReading) {
  //...
}
function calculateBaseCharge(aReading) {
  //...
}

After:

class Reading {
  base() {
    //...
  }
  taxableCharge() {
    //...
  }
  calculateBaseCharge() {
    //...
  }
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-8. 매개변수 객체 만들기

절차

  1. 적당한 데이터 구조가 아직 마련되어 있지 않다면 새로 만든다.
  2. 테스트한다.
  3. 함수 선언 바꾸기로 새 데이터 구조를 매개변수로 추가한다.
  4. 테스트한다.
  5. 함수 호출시 새로운 데이터 구조 인스턴스를 넘기도록 수정한다. 하나씩 수정할 때마다 테스트 한다.
  6. 기존 매개변수를 사용하던 코드를 새 데이터 구조의 원소를 사용하도록 바꾼다.
  7. 다 바꿧다면 기존 매개변수를 제거하고 테스트한다.

예시

Before:

function amountInvoiced(startDate, endDate) {
    //...
}
function amountReceived(startDate, endDate) {
  //...
}
function amountOverDue(startDate, endDate) {
  //...
}

After:

function amountInvoiced(aDateRange) {
  //...
}
function amountReceived(aDateRange) {
  //...
}
function amountOverDue(aDateRange) {
  //...
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-7. 변수 이름 바꾸기

절차

  1. 폭넓게 쓰이는 변수라면 변수 캡슐화하기를 고려한다.
  2. 이름을 바꿀 변수를 참조하는 곳을 모두 찾아서, 하나씩 변경한다.
  3. 테스트 한다.

예시

Before:

let a = height * width;

After:

let area = height * width;

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-6. 함수 선언 바꾸기

절차

  1. 변수로의 접근과 갱신을 전담하는 캡슐화 함수들을 만든다.
  2. 정적 검사를 수행한다.
  3. 변수를 직접 참조하던 부분을 모두 적절한 캡슐화 함수 호출로 바꾼다. 하나씩 바꿀 때마다 테스트 한다.
  4. 변수의 접근 범위를 제한단다.
  5. 테스트 한다.
  6. 변수 값이 레코드라면 레코드 캡슐화하기를 적용할지 고려해본다.

예시

Before:

let defaultOwner = { firstName: "John", lastName: "Doe" };

After:

let defaultOwnerData = { firstName: "John", lastName: "Doe" };
export function defaultOwner() {
  return defaultOwnerData;
}

export function defaultOwner(data) {
  defaultOwnerData = data;
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-5. 함수 선언 바꾸기

간단한 절차

  1. 매개 변수를 제거하려거든 먼저 함수 본문에서 제고 대상 매개변수를 참조하는 곳은 없는지 확인한다.
  2. 메서드 선언을 원하는 형태로 바꾼다.
  3. 기존 메서드 선언을 참조하는 부분을 모두 찾아서 바뀐 형태로 수정한다.
  4. 테스트 한다.

예시

Before:

function circum(radius) {
    return 2 * Math.PI * radius;
}

After:

function circumference(radius) {
    return 2 * Math.PI * radius;
}

마이그레이션 절차

  1. 이어지는 추출 단계를 수원하게 만들어야 한다면 함수의 본문을 적절히 리팩터링한다.
  2. 함수 본문을 새로운 함수로 추출한다.
  3. 추출한 함수에 매개변수를 추가해야 한다면 ‘간단한 절차를’따라 추가한다.
  4. 테스트한다.
  5. 기존 함수를 인라인한다.
  6. 이름을 임시로 붙여뒀다면 함수 선언 바꾸기를 한 번 더 적용해서 원래 이름으로 되돌린다.
  7. 테스트한다.

예시

Before:

function circum(radius) {
    return 2 * Math.PI * radius;
}

After:

// Step 1: 본문 전체를 새로운 함수로 추출한다.
function circum(radius) {
  return 2 * Math.PI * radius;
}

function circumference(radius) {
  return 2 * Math.PI * radius;
}
// Step 2: 수정한 코드를 테스트 한 뒤 예전 함수를 인라인한다.
function circum(radius) {
  return circumference(radius);
}

function circumference(radius) {
  return 2 * Math.PI * radius;
}

// Step 3: 예전 함수를 호출하는 부분을 새함수로 호출하도록 하나씩 변경하면서 테스트 한다. 모두 바꿧다면 기존 함수를 삭제한다
let result = circum(radius);
let result = circumference(radius);

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-4. 변수 인라인하기

절차

  1. 대입문의 우변(표현식)에서 부작용이 생기지는 않는지 확인한다.
  2. 변수가 불변으로 선언되지 않았다면 불변으로 만든 후 테스트 한다.
  3. 이 변수를 가장 처음 사용하는 코드를 찾아서 대입문 우변의 코드로 바꾼다.
  4. 테스트한다.
  5. 변수를 사용하는 부분을 모두 교체할 때까지 이 과정을 반복한다.
  6. 변수 선언문과 대입문을 지운다.
  7. 테스트 한다.

Before:

let basePrice = anOrder.basePrice;
return (basePrice > 1000);

After:

return anOrder.basePrice > 1000;

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-3. 변수 추출하기

  1. 추출하려는 표현식에 부작용은 없는지 확인한다
  2. 불변 변수를 하나 선언하고 이름을 붙일 표현식의 복제본을 대입한다.
  3. 원본 표현식을 새로 만든 변수로 교체한다.
  4. 테스트한다.
  5. 표현식을 여러 곳에서 사용한다면 각각을 새로 만든 변수로 교체한다. 하나 교체할 때마다 테스트한다.

예시

Before:

function price(order) {
  return (
    order.quantity * order.itemPrice -
    Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 +
    Math.min(order.quantity * order.itemPrice * 0.1, 100)
  );
}

After:

function price(order) {
  const basePrice = order.quantity * order.itemPrice;
  const quantityDiscount =
    Math.max(0, order.quantity - 500) * order.itemPrice * 0.05;
  const shipping = Math.min(basePrice * 0.1, 100);
  return basePrice - quantityDiscount + shipping;
}

출처 : 리팩터링 2판 – Chapter6

[리팩터링 카탈로그] 1-2. 함수 인라인하기

  1. 다형 메서드polymorphic method인지 확인한다.
  2. 인라인할 함수를 호출하는 곳을 모두 찾는다.
  3. 각 호출문을 함수 본문으로 교체한다.
  4. 하나씩 교체할 때마다 테스트한다.
  5. 함수 정의(원래 함수)를 삭제한다.

예시

Before:

function getRating(driver) {
  return moreThanFiveLateDeliveries(driver) ? 2 : 1;
}

function moreThanFiveLateDeliveries(driver) {
  return driver.numOfLateDeliveries > 5;
}

After:

function getRating(driver) {
  return (driver.numOfLateDeliveries > 5) ? 2 : 1;
}

출처 : 리팩터링 2판 – Chapter6