✏️6.11 단계 쪼개기 (Split Phase)

리팩터링 전

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

리팩터링 후

const orderRecord = paseOrder(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];
}

🧷 배경

서로 다른 두 대상을 한꺼번에 다루는 코드를 발견하면 각각을 별개 모듈로 나누는 방법을 택한다. 코드를 수정해야 할 때 두 대상을 동시에 생각할 필요 없이 하나에만 집중하기 위해서다.

🧷 절차

1. 두 번째 단계에 해당하는 코드를 독립 함수로 추출한다.

2. 테스트한다.

3. 중간 데이터 구조를 만들어서 앞에서 추출한 함수의 인수로 추가한다.

4. 테스트한다.

5. 추출한 두 번째 단계 함수의 매개변수를 하나씩 검토한다. 그 중 첫 번째 단계에서 사용되는 것은 중간 데이터 구조로 옮긴다. 하나씩 옮길 때마다 테스트한다.

6. 첫번째 단계 코드를 함수로 추출하면서 중간 데이터 구조를 반환하도록 만든다.

🧷 리팩터링 전

function priceOrder(product, quantity, shippingMethod) {
  const basePrice = product.basePrice * quantity;
  const discount = Math.max(quntity - product.discountThreshold, 0)
	* product.basePrice * product.discountRate;
  const shippingPerCase = (basePrice > shippingMethod.discountThreshold)
	? shippingMethod.discountedFee : shippingMethod.feePerCase;
  const shippingCost = quantity * shippingPerCase;
  const price = basePrice - discount + shippingCost;
  return price;				
}

🧷 리팩터링 후

function priceOrder(product, quantity, shippingMethod) {
  const priceData = calculatePriceingData(product, quantity);
  return applyShipping(priceData, shippingMethod);
}

function calculatePricingData(product, quantity) {
  const basePrice = product.basePrice * quantity;
  const discount = Math.max(quntity - product.discountThreshold, 0)
	* product.basePrice * product.discountRate;
  return {basePrice: basePrice, quantity: quantity, discount: discount};
}

function applyShipping(priceData, shippingMethod) {
  const shippingPerCase = (basePrice > shippingMethod.discountThreshold)
	? shippingMethod.discountedFee : shippingMethod.feePerCase;
  const shippingCost = quantity * shippingPerCase;
  return priceData.basePrice - priceData.discount + shippingCost;
}

핵심은 어디까지나 단계를 명확히 분리하는 것이다.