리팩토링의 원칙과 사례 (Refactoring)

리팩토링이란 무엇인가?

리팩토링(Refactoring)은 기존 코드의 외부 동작은 그대로 유지하면서 내부 구조를 개선하는 작업을 의미합니다. 즉, 기능은 동일하게 유지하면서 코드의 가독성, 유지보수성, 확장성을 높이는 것이 목적입니다.

---

왜 리팩토링을 해야 할까?

리팩토링은 단순히 코드 정리 이상의 가치를 제공합니다. 다음과 같은 이유에서 반드시 고려되어야 합니다:

• "코드의 중복 제거"와 같은 품질 향상을 통해 유지보수가 쉬워집니다.
• "의미 있는 함수명"이나 구조 개선을 통해 협업이 수월해집니다.
• 미래에 기능을 추가하거나 오류를 수정할 때 발생할 수 있는 문제를 줄입니다.
• 테스트 자동화와 코드 리뷰가 용이해집니다.

---

언제 리팩토링을 해야 하나?

리팩토링의 타이밍은 다음과 같은 상황에서 특히 유효합니다:

• 기능을 새로 추가하거나 수정하려고 할 때 기존 코드가 복잡하거나 이해하기 어려울 경우
• "조건문 정리"가 필요한 지나치게 분기된 로직이 있을 때
• 코드 리뷰 중 개선 포인트가 명확하게 드러날 때
• 테스트를 작성하려는데 코드가 너무 단단하게 묶여 있는 경우

작업 중이나 기능 추가 시 틈틈이 수행하는 것을 권장하며, 반드시 전체 리팩토링을 한 번에 끝내야 하는 것은 아닙니다.

---

리팩토링을 할 때 주의할 점

리팩토링은 잘못 수행될 경우 기존 기능에 영향을 줄 수 있습니다. 다음 사항들을 반드시 유의해야 합니다:

• 기능 동작은 그대로 유지해야 합니다 (외부 동작의 변경 금지)
• 자동화된 테스트나 회귀 테스트를 통해 안정성을 확보해야 합니다
• 리팩토링 전후에 충분한 커밋 관리 또는 백업이 필요합니다
• 큰 규모의 리팩토링은 반드시 단계적으로 진행하고, 작은 단위로 쪼개서 적용해야 합니다

---

리팩토링 전후 코드 비교 사례

예제 1: "중복 제거"

Before

function greetUser(name) {
  console.log("Hello, " + name);
  console.log("Welcome, " + name);
}

After

function greetUser(name) {
  ["Hello", "Welcome"].forEach(msg => console.log(msg + ", " + name));
}

개선 내용

• 동일한 패턴의 "중복 문자열 조합"을 반복문으로 축약
• "중복 제거" 원칙에 따라 코드량을 줄이고 유지보수를 간결하게 개선함

---

예제 2: "의미 없는 함수명 개선"

Before

function doSomething(a, b) {
  return a - b;
}

After

function calculateDiscount(price, discount) {
  return price - discount;
}

개선 내용

• 함수명과 매개변수명을 바꾸어 "의미 있는 함수명"을 부여함
• 읽는 사람에게 함수의 용도가 명확하게 전달되도록 개선

---

예제 3: "조건문 정리"

Before

function getStatus(code) {
  if (code === 200) return "OK";
  else if (code === 404) return "Not Found";
  else if (code === 500) return "Server Error";
  else return "Unknown";
}

After

function getStatus(code) {
  const map = {
    200: "OK",
    404: "Not Found",
    500: "Server Error"
  };
  return map[code] || "Unknown";
}

개선 내용

• 조건문 대신 "객체 리터럴 맵"을 사용해 가독성 향상
• 새로운 상태 코드 추가 시 한 줄로 확장 가능

---

예제 4: "함수 추출"

Before

function handleClick(event) {
  const target = event.target;
  if (target.classList.contains("btn-primary")) {
    target.classList.add("active");
    console.log("Primary button clicked");
  }
}

After

function handleClick(event) {
  const target = event.target;
  if (isPrimaryButton(target)) {
    activateButton(target);
  }
}

function isPrimaryButton(element) {
  return element.classList.contains("btn-primary");
}

function activateButton(element) {
  element.classList.add("active");
  console.log("Primary button clicked");
}

개선 내용

• 함수 내부 로직을 "함수 추출" 기법으로 분리해 테스트 가능성과 재사용성 향상
• "단일 책임 원칙"을 반영하여 역할별 분리

---

마무리 및 추천 자료

리팩토링은 코드 품질을 높이는 가장 실용적인 방법 중 하나입니다. 처음부터 완벽한 코드를 짜는 것은 어렵지만, 반복적으로 개선해 나가는 과정이 중요한 이유입니다.

• Refactoring Guru
• freeCodeCamp Clean Code Guide
• replit JavaScript 실습 환경