Blog

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

현대 웹 개발 환경에서 JavaScript 코드 리팩토링 전략은 단순히 코드를 정리하는 것을 넘어 프로젝트의 생명력을 연장하고 유지보수성을 극대화하는 핵심 기술입니다. 기술 부채가 쌓이면 개발 속도가 느려지고 버그 발생률이 높아지며, 결국 비즈니스 전체에 부정적인 영향을 미치게 됩니다. 체계적인 리팩토링 전략을 통해 코드 품질을 개선하면 팀 협업이 원활해지고, 새로운 기능 추가가 쉬워지며, 장기적으로 개발 비용을 절감할 수 있습니다. 이 글에서는 실무에서 바로 적용 가능한 실용적인 리팩토링 기법들을 소개합니다.

핵심 팁 10가지

1. 함수 분해를 통한 단일 책임 원칙 적용

하나의 함수가 여러 작업을 수행하면 이해하기 어렵고 테스트하기 힘듭니다. 각 함수는 하나의 명확한 책임만 가져야 합니다. 긴 함수를 발견하면 논리적으로 독립된 부분을 별도 함수로 추출하세요. 함수명은 그 기능을 명확히 설명해야 하며, 일반적으로 20-30줄을 넘지 않도록 유지하는 것이 좋습니다.

// 리팩토링 전
function processUserData(user) {
  const validated = user.email && user.email.includes('@');
  if (!validated) return null;
  const fullName = user.firstName + ' ' + user.lastName;
  const age = new Date().getFullYear() - new Date(user.birthDate).getFullYear();
  return { fullName, age, email: user.email };
}

// 리팩토링 후
function validateEmail(email) {
  return email && email.includes('@');
}

function getFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

function calculateAge(birthDate) {
  return new Date().getFullYear() - new Date(birthDate).getFullYear();
}

function processUserData(user) {
  if (!validateEmail(user.email)) return null;
  return {
    fullName: getFullName(user.firstName, user.lastName),
    age: calculateAge(user.birthDate),
    email: user.email
  };
}

2. 매직 넘버와 문자열을 상수로 추출

코드 곳곳에 흩어진 숫자나 문자열은 의미를 파악하기 어렵고 수정 시 누락될 위험이 있습니다. 의미 있는 이름을 가진 상수로 추출하면 코드의 가독성이 높아지고 유지보수가 쉬워집니다. 상수는 파일 상단이나 별도의 constants 파일에 모아두면 관리가 편리합니다. 이렇게 하면 값 변경이 필요할 때 한 곳만 수정하면 됩니다.

// 리팩토링 전
if (user.age < 18) {
  return 'minor';
}
setTimeout(fetchData, 5000);

// 리팩토링 후
const ADULT_AGE = 18;
const USER_STATUS = {
  MINOR: 'minor',
  ADULT: 'adult'
};
const FETCH_INTERVAL_MS = 5000;

if (user.age < ADULT_AGE) {
  return USER_STATUS.MINOR;
}
setTimeout(fetchData, FETCH_INTERVAL_MS);

3. 조건문을 조기 반환(Early Return)으로 단순화

중첩된 if-else 문은 코드의 복잡도를 높이고 가독성을 떨어뜨립니다. 조기 반환 패턴을 사용하면 예외 상황을 먼저 처리하고 메인 로직에 집중할 수 있습니다. 이 방법은 코드의 들여쓰기 깊이를 줄여 가독성을 크게 향상시키며, 각 조건을 독립적으로 이해하기 쉽게 만듭니다. 가드 클로즈(Guard Clause) 패턴이라고도 불립니다.

// 리팩토링 전
function calculateDiscount(user, product) {
  if (user) {
    if (user.isPremium) {
      if (product.price > 100) {
        return product.price * 0.2;
      } else {
        return product.price * 0.1;
      }
    } else {
      return 0;
    }
  } else {
    return 0;
  }
}

// 리팩토링 후
function calculateDiscount(user, product) {
  if (!user || !user.isPremium) return 0;
  if (product.price > 100) return product.price * 0.2;
  return product.price * 0.1;
}

4. 객체 구조 분해를 활용한 코드 간소화

ES6의 구조 분해 할당을 사용하면 객체나 배열에서 필요한 값을 간결하게 추출할 수 있습니다. 반복적인 점 표기법을 제거하여 코드가 깔끔해지고, 함수 매개변수에서 사용하면 필요한 속성이 명확히 드러납니다. 기본값 설정도 함께 할 수 있어 방어적 코딩에도 유용합니다. 이는 특히 React 컴포넌트의 props 처리에서 매우 효과적입니다.

// 리팩토링 전
function displayUser(user) {
  const name = user.name || 'Anonymous';
  const age = user.age || 0;
  const email = user.email || 'no-email';
  console.log(name, age, email);
}

// 리팩토링 후
function displayUser({ name = 'Anonymous', age = 0, email = 'no-email' }) {
  console.log(name, age, email);
}

// 배열 구조 분해
const [first, second, ...rest] = array;
const [error, data] = await fetchData();

5. 화살표 함수로 콜백 간결화

화살표 함수는 간결한 문법으로 콜백 함수를 작성할 수 있게 해주며, this 바인딩 문제를 해결합니다. 배열 메서드(map, filter, reduce)와 함께 사용하면 선언적이고 읽기 쉬운 코드를 작성할 수 있습니다. 단일 표현식인 경우 중괄호와 return을 생략할 수 있어 더욱 간결합니다. 다만 생성자 함수나 prototype 메서드에서는 사용을 피해야 합니다.

// 리팩토링 전
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
  return num * 2;
});
const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});

// 리팩토링 후
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);

6. 템플릿 리터럴로 문자열 연결 개선

문자열 연결 시 + 연산자를 사용하면 가독성이 떨어지고 실수하기 쉽습니다. 템플릿 리터럴을 사용하면 변수와 표현식을 자연스럽게 문자열에 삽입할 수 있으며, 여러 줄 문자열도 쉽게 작성할 수 있습니다. 복잡한 HTML 마크업이나 SQL 쿼리를 작성할 때 특히 유용합니다. 표현식 내에서 계산이나 함수 호출도 가능합니다.

// 리팩토링 전
const greeting = 'Hello, ' + user.name + '! You have ' + user.messages + ' new messages.';
const html = '
' + 
  '
' + user.name + '
' +
  '
' + user.email + '
' +
  '
';

// 리팩토링 후
const greeting = `Hello, ${user.name}! You have ${user.messages} new messages.`;
const html = `
  

    
${user.name}
    
${user.email}
  
`;

7. Optional Chaining과 Nullish Coalescing 활용

중첩된 객체 속성에 접근할 때 각 단계마다 null/undefined 체크를 하면 코드가 장황해집니다. Optional Chaining(?.)을 사용하면 안전하게 깊은 속성에 접근할 수 있으며, Nullish Coalescing(??)으로 기본값을 간결하게 설정할 수 있습니다. 이 두 연산자는 JavaScript 코드 리팩토링 전략에서 필수적인 현대적 문법입니다. API 응답 처리나 중첩된 설정 객체를 다룰 때 특히 유용합니다.

// 리팩토링 전
const city = user && user.address && user.address.city ? user.address.city : 'Unknown';
const count = user.settings && user.settings.notifications !== null && 
  user.settings.notifications !== undefined ? user.settings.notifications : 10;

// 리팩토링 후
const city = user?.address?.city ?? 'Unknown';
const count = user?.settings?.notifications ?? 10;

8. Array 메서드 체이닝으로 데이터 변환

for 루프는 명령형 프로그래밍 스타일로 코드가 길어지고 의도를 파악하기 어렵습니다. map, filter, reduce 등의 배열 메서드를 체이닝하면 선언적으로 데이터 변환 파이프라인을 표현할 수 있습니다. 각 단계가 명확히 분리되어 가독성이 높아지고, 함수형 프로그래밍의 장점을 활용할 수 있습니다. 성능이 중요한 경우 단일 루프로 최적화할 수도 있습니다.

// 리팩토링 전
const result = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].age >= 18 && users[i].active) {
    result.push(users[i].name.toUpperCase());
  }
}

// 리팩토링 후
const result = users
  .filter(user => user.age >= 18)
  .filter(user => user.active)
  .map(user => user.name.toUpperCase());

9. async/await로 비동기 코드 개선

콜백 지옥이나 복잡한 Promise 체이닝은 코드 흐름을 파악하기 어렵게 만듭니다. async/await를 사용하면 비동기 코드를 동기 코드처럼 읽기 쉽게 작성할 수 있습니다. 에러 처리도 try-catch로 일관성 있게 할 수 있으며, 디버깅이 훨씬 쉬워집니다. 여러 비동기 작업을 순차적으로 또는 병렬로 실행하는 것도 명확히 표현할 수 있습니다.

// 리팩토링 전
function fetchUserData(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/posts/${user.id}`)
        .then(response => response.json())
        .then(posts => ({ user, posts }));
    })
    .catch(error => console.error(error));
}

// 리팩토링 후
async function fetchUserData(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    return { user, posts };
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    throw error;
  }
}

10. 모듈 패턴으로 네임스페이스 관리

전역 스코프를 오염시키는 것은 충돌과 유지보수 문제를 야기합니다. ES6 모듈을 사용하여 코드를 논리적 단위로 분리하고, 명시적으로 export/import하세요. 이렇게 하면 의존성이 명확해지고, 코드 재사용성이 높아지며, 트리 쉐이킹으로 번들 크기도 최적화할 수 있습니다. 파일 하나당 하나의 주요 책임을 갖도록 구조화하는 것이 좋습니다.

// utils.js
export const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

export const validateEmail = (email) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

export const API_BASE_URL = 'https://api.example.com';

// main.js
import { formatDate, validateEmail, API_BASE_URL } from './utils.js';

const formattedDate = formatDate(new Date());
const isValid = validateEmail('[email protected]');

실제 적용 사례

한 스타트업 팀이 레거시 JavaScript 프로젝트를 맡았을 때, 코드는 5000줄이 넘는 단일 파일에 전역 변수가 난무하고 중첩된 콜백으로 가득했습니다. 팀은 체계적인 JavaScript 코드 리팩토링 전략을 수립했습니다. 먼저 기능별로 모듈을 분리하고, 200줄이 넘는 함수들을 10-20줄의 작은 함수로 분해했습니다. 매직 넘버를 상수로 추출하고, Promise와 async/await로 비동기 흐름을 재작성했습니다. 결과적으로 코드 라인은 30% 감소했고, 버그 발생률은 50% 줄었으며, 새로운 기능 개발 속도는 2배 향상되었습니다. 무엇보다 신규 개발자의 온보딩 시간이 2주에서 3일로 단축되었습니다. 이 사례는 체계적인 리팩토링이 단순히 코드를 깨끗하게 만드는 것을 넘어 비즈니스 가치를 직접적으로 창출한다는 것을 보여줍니다.

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

리팩토링을 시작하기 전에 반드시 테스트 코드를 작성하거나 확인하세요. 테스트 없는 리팩토링은 위험합니다. 한 번에 모든 것을 바꾸려 하지 말고, 작은 단위로 점진적으로 개선하세요. 각 리팩토링 후 테스트를 실행하여 기능이 정상 작동하는지 확인합니다. 성능이 중요한 부분은 리팩토링 전후 벤치마크를 측정하세요. 팀원들과 코드 리뷰를 통해 리팩토링 방향을 공유하고, 일관된 스타일 가이드를 따르는 것이 중요합니다. ESLint와 Prettier 같은 도구를 활용하면 자동화된 품질 관리가 가능합니다.

마무리 및 추가 팁

효과적인 JavaScript 코드 리팩토링 전략은 지속적인 개선 과정입니다. 매일 작은 개선을 실천하는 보이스카우트 원칙(코드를 발견했을 때보다 깨끗하게 남기기)을 따르세요. TypeScript 도입을 고려하면 타입 안정성으로 리팩토링이 더 안전해집니다. 정기적인 코드 리뷰와 페어 프로그래밍을 통해 팀 전체의 코드 품질을 향상시킬 수 있습니다.