Refactoring 핵심 개념 완벽 정리

코드 리팩토링의 핵심 개념과 실전 패턴을 실제 예제로 학습합니다. Extract Method, Replace Conditional, 객체 분해 등 실무에서 자주 사용되는 리팩토링 기법을 다룹니다.

---

---

들어가며

이 글에서는 Refactoring 핵심 개념 완벽 정리에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Extract_Method_패턴
2. Replace_Conditional_with_Polymorphism
3. Introduce_Parameter_Object
4. Replace_Magic_Number
5. Remove_Dead_Code
6. Consolidate_Conditional_Expression
7. Replace_Nested_Conditional_with_Guard_Clauses
8. Decompose_Conditional
9. Introduce_Explaining_Variable
10. Replace_Temp_with_Query
11. Encapsulate_Field
12. Extract_Class

---

1. Extract Method 패턴

개요

복잡한 함수를 작은 단위로 분리하여 가독성과 재사용성을 높이는 기법입니다.

코드 예제

// Before
function printOwing(invoice) {
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${invoice.amount}`);
}

// After - Extract Method
function printOwing(invoice) {
  printDetails(invoice);
}
function printDetails(invoice) {
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${invoice.amount}`);
}

설명

관련 코드를 별도의 함수로 추출하여 각 함수가 단일 책임을 갖도록 합니다. 코드의 의도가 명확해지고 테스트가 용이해집니다.

---

2. Replace Conditional with Polymorphism

개요

복잡한 조건문을 다형성을 이용해 객체 지향적으로 개선하는 패턴입니다.

코드 예제

// Before
function getSpeed(type) {
  if (type === 'car') return 100;
  if (type === 'bike') return 50;
}

// After - Polymorphism
class Car { getSpeed() { return 100; } }
class Bike { getSpeed() { return 50; } }
const vehicle = new Car();
console.log(vehicle.getSpeed());

설명

조건문 대신 클래스 상속을 활용하여 각 타입의 동작을 캡슐화합니다. 새로운 타입 추가 시 기존 코드 수정 없이 확장 가능합니다.

---

3. Introduce Parameter Object

개요

여러 개의 매개변수를 하나의 객체로 묶어 함수 시그니처를 단순화합니다.

코드 예제

// Before
function getPrice(quantity, price, discount) {
  return quantity * price * (1 - discount);
}

// After - Parameter Object
function getPrice(order) {
  return order.quantity * order.price * (1 - order.discount);
}
const order = { quantity: 5, price: 100, discount: 0.1 };
console.log(getPrice(order));

설명

관련된 매개변수들을 객체로 그룹화하여 함수 호출을 간결하게 만듭니다. 매개변수 추가/삭제 시 유연하게 대응 가능합니다.

---

4. Replace Magic Number

개요

하드코딩된 숫자를 의미 있는 상수로 대체하여 코드의 의도를 명확히 합니다.

코드 예제

// Before
function calculateTotal(price) {
  return price * 1.1;
}

// After - Named Constant
const TAX_RATE = 1.1;
function calculateTotal(price) {
  return price * TAX_RATE;
}
console.log(calculateTotal(1000));

설명

매직 넘버를 명명된 상수로 변경하면 코드의 의미가 명확해지고 수정 시 일관성을 유지할 수 있습니다.

---

5. Remove Dead Code

개요

사용하지 않는 코드를 제거하여 코드베이스를 깔끔하게 유지합니다.

코드 예제

// Before
function processData(data) {
  const temp = data * 2; // 사용 안 됨
  const result = data + 10;
  return result;
}

// After - Clean Code
function processData(data) {
  return data + 10;
}
console.log(processData(5));

설명

사용되지 않는 변수와 코드를 제거하면 유지보수가 쉬워지고 코드 이해도가 높아집니다. 버전 관리 시스템이 있으므로 과감히 삭제 가능합니다.

---

6. Consolidate Conditional Expression

개요

여러 조건문을 하나로 합쳐 코드의 의도를 명확하게 표현합니다.

코드 예제

// Before
function getDiscount(age, isMember) {
  if (age < 18) return 0.1;
  if (isMember) return 0.1;
  return 0;
}

// After - Consolidated
function getDiscount(age, isMember) {
  return (age < 18 || isMember) ? 0.1 : 0;
}
console.log(getDiscount(20, true));

설명

같은 결과를 반환하는 여러 조건을 하나로 통합하여 중복을 제거하고 코드 의도를 명확히 합니다.

---

7. Replace Nested Conditional with Guard Clauses

개요

중첩된 조건문을 Guard Clause로 평탄화하여 가독성을 개선합니다.

코드 예제

// Before
function getPayment(isDead, isSeparated) {
  if (!isDead) {
    if (!isSeparated) {
      return 100;
    }
  }
  return 0;
}

// After - Guard Clauses
function getPayment(isDead, isSeparated) {
  if (isDead) return 0;
  if (isSeparated) return 0;
  return 100;
}

설명

예외 상황을 먼저 처리하고 조기 반환하여 중첩을 제거합니다. 코드의 정상 흐름이 명확해지고 이해하기 쉬워집니다.

---

8. Decompose Conditional

개요

복잡한 조건식을 함수로 추출하여 의도를 명확하게 표현합니다.

코드 예제

// Before
if (date.before(SUMMER_START) || date.after(SUMMER_END)) {
  charge = quantity * winterRate;
}

// After - Decomposed
function isWinter(date) {
  return date.before(SUMMER_START) || date.after(SUMMER_END);
}
if (isWinter(date)) {
  charge = quantity * winterRate;
}

설명

조건식을 의미 있는 이름의 함수로 추출하면 코드의 의도가 명확해지고 재사용이 가능해집니다.

---

9. Introduce Explaining Variable

개요

복잡한 표현식을 설명적인 변수로 분리하여 이해도를 높입니다.

코드 예제

// Before
return (platform.toUpperCase().indexOf("MAC") > -1) &&
       (browser.toUpperCase().indexOf("IE") > -1);

// After - Explaining Variable
const isMac = platform.toUpperCase().indexOf("MAC") > -1;
const isIE = browser.toUpperCase().indexOf("IE") > -1;
return isMac && isIE;

설명

복잡한 표현식을 의미 있는 변수로 분리하면 각 부분의 의도가 명확해지고 디버깅이 쉬워집니다.

---

10. Replace Temp with Query

개요

임시 변수를 메서드 호출로 대체하여 중복을 제거하고 명확성을 높입니다.

코드 예제

// Before
const basePrice = quantity * itemPrice;
if (basePrice > 1000) {
  return basePrice * 0.95;
}

// After - Query Method
function getBasePrice() {
  return quantity * itemPrice;
}
if (getBasePrice() > 1000) {
  return getBasePrice() * 0.95;
}

설명

임시 변수를 함수로 대체하면 계산 로직을 재사용할 수 있고, 코드의 의도가 더 명확해집니다.

---

11. Encapsulate Field

개요

직접 필드 접근을 getter/setter로 캡슐화하여 데이터 은닉을 구현합니다.

코드 예제

// Before
class Person {
  constructor(name) { this.name = name; }
}
const person = new Person('John');
person.name = 'Jane'; // 직접 접근

// After - Encapsulated
class Person {
  constructor(name) { this._name = name; }
  getName() { return this._name; }
  setName(name) { this._name = name; }
}

설명

필드를 private으로 만들고 getter/setter를 제공하면 데이터 접근을 제어하고 유효성 검사를 추가할 수 있습니다.

---

12. Extract Class

개요

하나의 클래스가 너무 많은 책임을 가질 때 별도 클래스로 분리합니다.

코드 예제

// Before
class Person {
  constructor(name, areaCode, number) {
    this.name = name;
    this.areaCode = areaCode;
    this.number = number;
  }
}

// After - Extracted Class
class TelephoneNumber {
  constructor(areaCode, number) {
    this.areaCode = areaCode;
    this.number = number;
  }
}
class Person {
  constructor(name, phone) {
    this.name = name;
    this.phone = phone;
  }
}

설명

관련된 데이터와 동작을 별도 클래스로 추출하여 각 클래스가 단일 책임을 갖도록 합니다. 코드 재사용성과 유지보수성이 향상됩니다.

---

마치며

이번 글에서는 Refactoring 핵심 개념 완벽 정리에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Refactoring #CleanCode #DesignPatterns #BestPractices