ch01.md

리팩터링: 첫 번째 예시

1.1

리팩토링 전 예제 코드

import INVOICE from "../invoices.json";
import PLAYS from "../plays.json";

function statement(invoice, plays) {
  let totalAmount = 0;
  let volumeCredits = 0;
  let result = `청구 내역(고객명: ${invoice.customer})\n`;
  const format = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2
  }).format;

  for (let perf of invoice.performances) {
    const play = plays[perf.playID]; // object {name, type}
    let thisAmount = 0;
    switch (play.type) {
      case "tragedy": //비극
        thisAmount = 40000;
        if (perf.audience > 30) thisAmount += 1000 * (perf.audience - 30);
        break;
      case "comedy": //희극
        thisAmount = 30000;
        if (perf.audience > 20) thisAmount += 1000 + 500 * (perf.audience - 20);
        thisAmount += 300 * perf.audience;
        break;
      default:
        throw new Error(`알 수 없는 장르: ${play.type}`);
    }
    // 포인트를 적립한다.
    volumeCredits += Math.max(perf.audience - 30, 0);
    // 희극 관객 5명마다 추가 포인트를 제공한다.
    if ("comedy" === play.type) volumeCredits += Math.floor(perf.audience / 5);

    // 청구 내역을 출력한다.
    result += `${play.name}: ${format(thisAmount / 100)} (${
      perf.audience
    }석)\n`;
    totalAmount += thisAmount;
  }
  result += `총액: ${format(totalAmount / 100)}\n`;
  result += `적립 포인트: ${volumeCredits}점\n`;
  return result;
}

statement(INVOICE[0], PLAYS);

1.2

저자의 소감?

1. 이 코드 자체로는, 프로그램이 짧아 특별히 애써 이해해야 할 구조가 없다.

2. 하지만, 이런 코드가 수백 줄 짜리의 프로그램의 일부라면 간단한 인라인 함수 하나라도 이해하기가 쉽지 않다.

3. 프로그램이 잘 작동하는 상황에서, 그저 코드가 '지저분하다' 하다고 불평하는 것은 프로그램의 구조를 지나치게 미적인 기준으로 판단한다는 의견도 있을 수 있지만, 코드를 수정하려면 사람이 개입되고 또 사람은 코드의 미적 상태에 민감하다.

즉 설계가 나쁜 시스템은 수정하기 어렵다. -> 원하는 동작을 수행하도록 하기 위하여 수정해야 할 부분을 찾고, 기존 코드와 잘 맞물려 작동하게 할 방법을 찾기 어렵기 때문이다. 실수와 버그의 발생 가능성 역시 높아진다.

따라서, 수백 줄 짜리 코드를 수정할 때

먼저 프로그램의 작동 방식을 잘 파악할 수 있도록 코드를 여러 함수와 프로그램 요소로 재구성해야한다. 프로그램의 구조가 빈약하다면, 대체로 구조부터 바로잡아야 작업이 수월해진다.

1.1에서 어떤 식으로 수정하면 좋을까?

1. 청구 내역을 HTML로 출력하는 기능

• 청구 결과에 문자열을 추가하는 문장 각각을 조건문으로 감싸야함
  • 이 경우 대부분 이 함수의 복사본을 만들어 복사본에서 HTML을 출력하는 식으로 처리
  • 청구서 작성 로직이 변경될 때 마다 기존 함수와 HTML 버전 함수 모두 수정, 항시 일관되게 수정했는지 역시 확인
  • 배우들은 더 많은 장르를 연기하고 싶어 하는데, 이러한 변경은 공연료와 적립 포인트 계산법에 영향을 준다. 따라서 연극 장르와 공연료 정책이 변경될 때 마다 statement() 함수를 수정해야 하는데, 이를 복사해서 htmlStatement()를 만든다면 모든 수정이 두 함수 각각에 일관성을 가져야한다.

리팩토링이 필요한 이유

위와 같이 변경사항이 발생할 때 실수를 줄일 수 있다

1.3 리팩터링의 첫 단계

1) 테스트 코드 작성

리팩터링에서 테스트의 역할은 굉장히 중요하다. 리팩터링 하기 전에 제대로 된 테스트 부터 마련하고, 테스트는 반드시 자가진단이 가능해야한다. 원하는 내용을 소스코드와 테스트 코드 양쪽에 적어두면 두 번 다 똑같이 실수하지 않는 한 버그가 발생하기 때문이다. 테스트 작성 시 시간이 걸릴지라도 신경 써서 만들어두면 디버깅 시간이 감소한다.

2) 단계별 점층적 수정

리팩터링 시 작은 단계로 나뉘어 진행해야한다. 중간에 실수하더라도 버그를 쉽게 찾을 수 있기 때문이다.

import INVOICE from "../../invoices.json";
import PLAYS from "../../plays.json";

function statement(invoice, plays) {
  let result = `청구 내역(고객명: ${invoice.customer})\n`;
  for (let perf of invoice.performances) {
    // 청구 내역을 출력한다.
    result += `${playFor(perf).name}: ${usd(amountFor(perf))} (${
      perf.audience
    }석)\n`;
  }
  result += `총액: ${usd(totalAmount())}\n`;
  result += `적립 포인트: ${totalVolumeCredits()}점\n`;
  return result;

  function usd(aNumber) {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2
    }).format(aNumber / 100);
  }

  function volumeCreditsFor(aPerformance) {
    let result = 0;
    result += Math.max(aPerformance.audience - 30, 0);
    if ("comedy" === playFor(aPerformance).type)
      result += Math.floor(aPerformance.audience / 5);
    return result;
  }

  function totalVolumeCredits() {
    let volumeCredits = 0;
    for (let perf of invoice.performances) {
      volumeCredits += volumeCreditsFor(perf);
    }
    return volumeCredits;

  }
  function totalAmount() {
    let result = 0;
    for (let perf of invoice.performances) {
      result += amountFor(perf);
    }
    return result;
  }

  function playFor(aPerformance) {
    return plays[aPerformance.playID];
  }

  // play는 aPerformance에서 오는 값이라서 제거
  function amountFor(aPerformance) {
    let result = 0;

    switch (playFor(aPerformance).type) {
      case "tragedy": //비극
        result = 40000;
        if (aPerformance.audience > 30)
          result += 1000 * (aPerformance.audience - 30);
        break;
      case "comedy": //희극
        result = 30000;
        if (aPerformance.audience > 20)
          result += 1000 + 500 * (aPerformance.audience - 20);
        result += 300 * aPerformance.audience;
        break;
      default:
        throw new Error(`알 수 없는 장르: ${playFor(aPerformance).type}`);
    }
    return result;
  }
}

console.log(statement(INVOICE[0], PLAYS));

1. 함수 추출
2. 변수명 변경
3. 변수 인라인으로 변경
4. 반복문 쪼개기

변수명

1. 접두어로 타입 표현하기
2. 매개변수의 타입이 뚜렷하지 않을 땐 부정관사(a/an) 붙이기
3. 캔트백 참고

좋은 코드는 하는일이 명확하게 드러나는 코드이고, 변수 이름은 이에 큰 역할을 한다.

추출한 함수에는 그 코드가 하는 일을 설명하는 이름을 짓는다.

1. 다음번에 코드를 볼 때 다시 분석하지 않아도, 코드 자체만 보고도 무엇을 하는 것인지 이해할 수 있어야 한다.

사람이 이해하도록 코드를 작성해야 한다.

1. 임시변수를 질의함수로 바꾸자

• 긴 함수를 쪼갤 때 마다 변수를 최대한 제거한다.
  • 지역 변수를 제거하면 추출 작업이 훨씬 쉬워진다는 장점이 있다. (유효범위 신경을 쓰지 않아도 됨)

2. 변수 인라인하기
3. 함수명 바꾸기 인라인하기

• 이름짓기는 중요하면서도 쉽지 않은 작업이다.
• 이름이 좋으면 함수 본문을 읽지 않아도 무슨 일을 하는지 알 수 있다.

4. 문장 슬라이드하기

항시 코드를 작업 시작 전보다 건강하게 만들어놓고 떠나야한다.

import INVOICE from "../../invoices.json";
import PLAYS from "../../plays.json";
import createStatementData from "./createStatementData.js";

function statement(invoice, plays) {
  // 가변데이터로 넘기면 금방 상하기때문에 최대한 불변으로 넘긴다. (굿)
  return renderPlainText(createStatementData(invoice, plays));
}

function renderPlainText(data, plays) {
  let result = `청구 내역(고객명: ${data.customer})\n`;
  for (let perf of data.performances) {
    // 청구 내역을 출력한다.
    result += `${perf.play.name}: ${usd(perf.amount)} (${perf.audience}석)\n`;
  }
  result += `총액: ${usd(data.totalAmount)}\n`;
  result += `적립 포인트: ${data.totalVolumeCredits}점\n`;
  return result;
}

function htmlStatement(invoice, plays) {
  return renderHtml(createStatementData(invoice, plays));
}

function renderHtml(data) {
  let result = `<h1>청구 내역(고객명: ${data.customer})</h1>\n`;
  result += `<table>\n`;
  result += `<tr><th>연극</th><th>좌석 수</th><th>금액</th></tr>`;
  for (let perf of data.performances) {
    // 청구 내역을 출력한다.
    result += `<tr><td>${perf.play.name}</td><td>(${perf.audience}석)</td>`;
    result += `<td>${usd(perf.amount)}</td></tr>\n`;
  }
  result += `</table>\n`;
  result += `총액: ${usd(data.totalAmount)}\n`;
  result += `적립 포인트: ${data.totalVolumeCredits}점\n`;
  return result;
}
function usd(aNumber) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2
  }).format(aNumber / 100);
}

document.getElementById("app2").innerText = statement(INVOICE[0], PLAYS);
document.getElementById("app").innerHTML = htmlStatement(INVOICE[0], PLAYS);

1. 단계 쪼개기
2. 함수 옮기기
3. 반복문 -> 파이프라인
4. 간결함 보단 명료함이 중요하다. 프로그래밍에서는 명료함이 진화할 수 있는 소프트웨어의 정수다.

다형성을 활용하여 계산 코드 재구성

좋은 코드를 가늠하는 가장 확실한 방법은 얼마나 수정하기 쉬운가 이다.

class PerformanceCalculator {
  constructor(aPerformance, aPlay) {
    this.performance = aPerformance;
    this.play = aPlay;
  }

  get amount() {
    throw new Error("서브클래스에서 처리하도록 설계");
  }

  get volumeCredits() {
    throw new Error("서브클래스에서 처리하도록 설계");
  }
}

class TragedyCalculator extends PerformanceCalculator {
  get amount() {
    let result = 40000;
    if (this.performance.audience > 30)
      result += 1000 * (this.performance.audience - 30);
    return result;
  }
  get volumeCredits() {
    return Math.max(this.performance.audience - 30, 0);
  }
}
class ComedyCalculator extends PerformanceCalculator {
  get amount() {
    let result = 30000;
    if (this.performance.audience > 20)
      result += 1000 + 500 * (this.performance.audience - 20);
    result += 300 * this.performance.audience;

    return result;
  }
  get volumeCredits() {
    return Math.floor(this.performance.audience / 5);
  }
}

export default function createStatementData(invoice, plays) {
  const statementData = {};
  statementData.customer = invoice.customer; // 고객데이터를 중간 데이터로 옮김
  statementData.performances = invoice.performances.map(enrichPerformance);
  statementData.totalAmount = totalAmount(statementData);
  statementData.totalVolumeCredits = totalVolumeCredits(statementData);
  return statementData;

  function enrichPerformance(aPerformance) {
    // 각각 공연별로 이름, 총금액, 총포인트들을 새로할당
    const calculator = createPerformanceCalculator(
      aPerformance,
      playFor(aPerformance)
    );
    const result = Object.assign({}, aPerformance);
    result.play = playFor(result);
    result.amount = calculator.amount;
    result.volumeCredits = calculator.volumeCredits;
    return result; // 얕은복사
  }

  function createPerformanceCalculator(aPerformance, aPlay) {
    switch (aPlay.type) {
      case "tragedy":
        return new TragedyCalculator(aPerformance, aPlay);
      case "comedy":
        return new ComedyCalculator(aPerformance, aPlay);
      default:
        throw new Error(`알 수 없는 장르: ${aPlay.type}`);
    }
  }
  // 타입 (tragedy, comedy)
  function playFor(aPerformance) {
    return plays[aPerformance.playID];
  }

  function totalVolumeCredits(data) {
    return data.performances.reduce((total, p) => total + p.volumeCredits, 0);
  }

  function totalAmount(data) {
    return data.performances.reduce((total, p) => total + p.amount, 0);
  }
}

조건부 로직을 다형성으로 변경하자

1. 코드는 명확해야하고
2. 코드를 수정해야할 상황이 되면 고쳐야 할 곳을 쉽게 찾을 수 있고, 오류가 없이 빠른 수정이 가능해야한다.
3. 건강한 코드베이스는 생산성을 극대화한다.