Blog

도입 – JavaScript 코드 리팩토링 전략의 중요성

효율적인 JavaScript 코드 리팩토링 전략은 현대 웹 개발에서 필수적인 역량입니다. 레거시 코드의 유지보수성을 높이고, 성능을 개선하며, 팀원 간의 협업을 원활하게 만드는 리팩토링은 단순히 코드를 정리하는 것을 넘어 프로젝트의 생명력을 연장시킵니다. 체계적인 리팩토링 전략을 통해 기술 부채를 줄이고 확장 가능한 코드베이스를 구축할 수 있습니다. 이 글에서는 실무에서 즉시 활용 가능한 JavaScript 코드 리팩토링 전략 핵심 팁 10가지를 상세히 소개합니다.

핵심 팁 10가지

1. 함수 분리와 단일 책임 원칙(SRP) 적용

하나의 함수가 여러 작업을 수행하면 테스트와 유지보수가 어려워집니다. 각 함수는 하나의 명확한 책임만 가져야 합니다. 긴 함수를 발견하면 즉시 작은 단위로 분리하세요. 함수명은 그 역할을 명확히 드러내야 하며, 15줄 이내로 유지하는 것을 권장합니다.

// Bad - 여러 책임을 가진 함수
function processUser(user) {
  const validated = validateEmail(user.email);
  if (!validated) return false;
  const saved = saveToDatabase(user);
  sendWelcomeEmail(user.email);
  logUserActivity(user.id);
  return saved;
}

// Good - 책임을 분리한 함수
function processUser(user) {
  if (!isValidUser(user)) return false;
  return registerUser(user);
}

function registerUser(user) {
  const saved = saveToDatabase(user);
  notifyNewUser(user);
  return saved;
}

2. 매직 넘버와 하드코딩 값 제거

코드 내에 직접 작성된 숫자나 문자열은 의미를 파악하기 어렵고 수정 시 오류를 유발합니다. 상수로 추출하여 명명함으로써 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다. 설정 파일이나 환경 변수로 관리하면 더욱 효과적입니다.

// Bad
if (user.age > 18 && user.status === 1) {
  discount = price * 0.15;
}

// Good
const ADULT_AGE = 18;
const STATUS_ACTIVE = 1;
const DISCOUNT_RATE = 0.15;

if (user.age > ADULT_AGE && user.status === STATUS_ACTIVE) {
  discount = price * DISCOUNT_RATE;
}

3. 조건문 간소화 및 Early Return 패턴

중첩된 if문은 코드 복잡도를 높이고 읽기 어렵게 만듭니다. Early Return 패턴을 사용하여 예외 케이스를 먼저 처리하고, 가드 절을 통해 중첩을 줄이세요. 삼항 연산자나 논리 연산자를 적절히 활용하면 코드가 더욱 간결해집니다.

// Bad
function calculateDiscount(user, product) {
  if (user) {
    if (user.isPremium) {
      if (product.price > 100) {
        return product.price * 0.2;
      } else {
        return product.price * 0.1;
      }
    }
  }
  return 0;
}

// Good
function calculateDiscount(user, product) {
  if (!user || !user.isPremium) return 0;
  return product.price > 100 ? product.price * 0.2 : product.price * 0.1;
}

4. 최신 ES6+ 문법 활용

구조 분해 할당, 스프레드 연산자, 템플릿 리터럴 등 최신 JavaScript 문법은 코드를 간결하고 읽기 쉽게 만듭니다. 화살표 함수는 this 바인딩 문제를 해결하며, Optional Chaining(?.)과 Nullish Coalescing(??)은 안전한 코드 작성을 돕습니다.

// Bad
const name = user.name;
const email = user.email;
const newUser = Object.assign({}, user, { verified: true });

// Good
const { name, email } = user;
const newUser = { ...user, verified: true };

// Optional Chaining 활용
const city = user?.address?.city ?? 'Unknown';

5. 배열 메서드 체이닝으로 데이터 처리

map, filter, reduce 등의 배열 메서드는 for문보다 의도를 명확히 전달하며 불변성을 유지합니다. 메서드 체이닝을 통해 데이터 변환 파이프라인을 구축하면 함수형 프로그래밍의 장점을 활용할 수 있습니다. 다만 성능이 중요한 대용량 데이터는 전통적인 반복문을 고려하세요.

// Bad
const activeAdults = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].age >= 18 && users[i].isActive) {
    activeAdults.push(users[i].name);
  }
}

// Good
const activeAdults = users
  .filter(user => user.age >= 18 && user.isActive)
  .map(user => user.name);

6. 비동기 코드 개선: Async/Await 전환

콜백 지옥과 복잡한 Promise 체이닝은 async/await로 대체하여 동기 코드처럼 읽기 쉽게 만드세요. try-catch로 에러 처리를 명확히 하고, Promise.all을 활용해 병렬 처리를 최적화할 수 있습니다. 에러 처리는 일관된 패턴을 유지하는 것이 중요합니다.

// Bad
function getUser(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(user => {
      return fetch(`/api/posts/${user.id}`);
    })
    .then(res => res.json());
}

// Good
async function getUserWithPosts(id) {
  try {
    const userRes = await fetch(`/api/users/${id}`);
    const user = await userRes.json();
    const postsRes = await fetch(`/api/posts/${user.id}`);
    return await postsRes.json();
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    throw error;
  }
}

7. 객체와 클래스 리팩토링

관련된 데이터와 기능은 객체나 클래스로 캡슐화하세요. private 필드(#)를 사용해 내부 구현을 숨기고, getter/setter로 접근을 제어합니다. 상속보다는 컴포지션을 우선하며, 인터페이스를 명확히 정의하면 유지보수가 쉬워집니다.

// Bad - 분산된 로직
let cartItems = [];
function addToCart(item) { cartItems.push(item); }
function getTotal() { return cartItems.reduce((sum, item) => sum + item.price, 0); }

// Good - 캡슐화된 클래스
class ShoppingCart {
  #items = [];
  
  addItem(item) {
    this.#items.push(item);
  }
  
  get total() {
    return this.#items.reduce((sum, item) => sum + item.price, 0);
  }
  
  get itemCount() {
    return this.#items.length;
  }
}

8. 중복 코드 제거와 유틸리티 함수 활용

동일하거나 유사한 코드가 반복되면 유틸리티 함수로 추출하세요. DRY(Don’t Repeat Yourself) 원칙을 따르면 버그 수정과 기능 개선이 한 곳에서 이뤄져 효율적입니다. 공통 로직은 별도 모듈로 분리하여 재사용성을 극대화하세요.

// Bad - 중복 코드
const userName = user.name ? user.name.trim() : 'Guest';
const userEmail = user.email ? user.email.trim() : '';
const userPhone = user.phone ? user.phone.trim() : '';

// Good - 유틸리티 함수
const sanitize = (value, fallback = '') => value?.trim() || fallback;

const userName = sanitize(user.name, 'Guest');
const userEmail = sanitize(user.email);
const userPhone = sanitize(user.phone);

9. 명명 규칙 개선과 의미 있는 변수명

변수와 함수명은 그 목적을 명확히 드러내야 합니다. 약어나 한 글자 변수는 피하고, 동사+명사 조합으로 함수명을 작성하세요. Boolean 변수는 is, has, should로 시작하며, 배열은 복수형을 사용합니다. 일관된 명명 규칙은 팀 협업의 기초입니다.

// Bad
const d = new Date();
function proc(u) { /* ... */ }
let flag = true;

// Good
const currentDate = new Date();
function processUserData(user) { /* ... */ }
let isAuthenticated = true;
const activeUsers = users.filter(u => u.isActive);

10. 모듈화와 의존성 관리

큰 파일은 기능별로 분리하고 ES6 모듈을 활용하세요. 각 모듈은 하나의 관심사에 집중하며, 순환 참조를 피해야 합니다. 명명된 export를 사용하면 IDE의 자동완성과 리팩토링 도구를 효과적으로 활용할 수 있습니다. 의존성 주입 패턴으로 테스트 가능성을 높이세요.

// Bad - 모든 것이 한 파일에
// app.js (1000+ lines)

// Good - 모듈 분리
// userService.js
export function fetchUser(id) { /* ... */ }
export function updateUser(user) { /* ... */ }

// userValidator.js
export function validateEmail(email) { /* ... */ }
export function validateAge(age) { /* ... */ }

// app.js
import { fetchUser, updateUser } from './userService.js';
import { validateEmail } from './userValidator.js';

실제 적용 사례

한 스타트업 팀이 3년간 운영한 전자상거래 플랫폼의 주문 처리 모듈을 리팩토링한 사례입니다. 초기에는 800줄짜리 단일 파일에 모든 로직이 집중되어 버그 수정에 평균 2일이 소요되었습니다. JavaScript 코드 리팩토링 전략을 적용하여 기능별로 8개의 모듈로 분리하고, 중복 코드를 제거하며, async/await로 비동기 처리를 개선했습니다. 결과적으로 코드 라인은 30% 감소했고, 단위 테스트 커버리지는 25%에서 85%로 증가했습니다. 신규 기능 추가 시간은 40% 단축되었으며, 프로덕션 버그는 월평균 12건에서 3건으로 감소했습니다. 특히 함수 분리와 명명 규칙 개선으로 신입 개발자의 온보딩 기간이 2주에서 3일로 대폭 줄어들었습니다.

주의사항 및 베스트 프랙티스

리팩토링은 항상 테스트 코드가 준비된 상태에서 진행하세요. 한 번에 모든 것을 바꾸려 하지 말고, 작은 단위로 점진적으로 개선합니다. 리팩토링과 기능 추가를 동시에 진행하면 문제 발생 시 원인 파악이 어려우므로 분리하세요. 팀의 코딩 컨벤션을 먼저 합의하고, ESLint와 Prettier 같은 도구로 자동화하면 일관성을 유지할 수 있습니다. 성능이 중요한 부분은 리팩토링 전후 벤치마크를 측정하여 성능 저하가 없는지 확인하세요.

마무리 및 추가 팁

효과적인 JavaScript 코드 리팩토링 전략은 지속적인 개선의 문화에서 시작됩니다. 정기적인 코드 리뷰를 통해 팀원들과 개선점을 공유하고, 기술 부채를 관리하는 시간을 스프린트에 포함시키세요. SonarQube 같은 정적 분석 도구로 코드 품질을 모니터링하고, 리팩토링 전후 메트릭을 기록하여 개선 효과를 측정하세요. 작은 개선이 쌓여 큰 변화를 만듭니다.