Blog

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

현대 웹 개발에서 JavaScript 코드 리팩토링 전략은 단순히 코드를 정리하는 것을 넘어 유지보수성, 성능, 그리고 팀 협업의 효율성을 결정짓는 핵심 요소입니다. 레거시 코드가 쌓일수록 버그 발생률이 증가하고 새로운 기능 추가가 어려워지는데, 체계적인 리팩토링 전략을 통해 이러한 문제를 예방할 수 있습니다. 본 가이드에서는 실무에서 즉시 적용 가능한 JavaScript 코드 리팩토링 전략을 상세히 소개하며, 코드 품질을 획기적으로 개선하는 방법을 제시합니다.

핵심 팁 10가지

1. 함수 분리 및 단일 책임 원칙 적용

하나의 함수가 여러 작업을 수행하면 테스트와 유지보수가 어려워집니다. 각 함수는 하나의 명확한 목적만 가져야 합니다. 200줄이 넘는 함수는 즉시 리팩토링 대상입니다. 함수명은 동사로 시작하여 기능을 명확히 표현하고, 매개변수는 3개 이하로 제한하는 것이 좋습니다. 복잡한 로직은 헬퍼 함수로 추출하여 가독성을 높이세요.

// 개선 전
function processUser(user) {
  // 검증, 변환, 저장, 알림 전송 모두 수행
  if (!user.email) return false;
  user.email = user.email.toLowerCase();
  database.save(user);
  sendEmail(user.email);
}

// 개선 후
function validateUser(user) {
  return user.email && user.email.includes('@');
}

function normalizeEmail(email) {
  return email.toLowerCase().trim();
}

function saveUser(user) {
  return database.save(user);
}

function processUser(user) {
  if (!validateUser(user)) return false;
  user.email = normalizeEmail(user.email);
  return saveUser(user);
}

2. const와 let 사용으로 var 제거

var는 함수 스코프로 인해 예측 불가능한 동작을 유발할 수 있습니다. const를 기본으로 사용하고 재할당이 필요한 경우에만 let을 사용하세요. 이는 불변성을 강조하고 의도치 않은 값 변경을 방지합니다. 코드 리뷰 시 var 발견 즉시 리팩토링하며, ESLint 규칙으로 var 사용을 금지하는 것을 권장합니다. 이러한 작은 변경이 버그를 크게 줄여줍니다.

// 개선 전
var count = 0;
var users = [];

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // 항상 10 출력
  }, 100);
}

// 개선 후
let count = 0;
const users = [];

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i); // 0~9 순차 출력
  }, 100);
}

3. 화살표 함수로 간결성과 this 바인딩 개선

화살표 함수는 코드를 간결하게 만들 뿐만 아니라 this 바인딩 문제를 해결합니다. 특히 콜백 함수나 배열 메서드 사용 시 효과적입니다. 단, 메서드 정의나 생성자 함수에서는 일반 함수를 사용해야 합니다. 화살표 함수는 암묵적 반환을 지원하여 map, filter 같은 함수형 프로그래밍 패턴을 더욱 깔끔하게 작성할 수 있습니다.

// 개선 전
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
  return n * 2;
});

class Timer {
  constructor() {
    this.seconds = 0;
    const self = this;
    setInterval(function() {
      self.seconds++;
    }, 1000);
  }
}

// 개선 후
const doubled = numbers.map(n => n * 2);

class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => this.seconds++, 1000);
  }
}

4. 구조 분해 할당으로 가독성 향상

객체와 배열에서 값을 추출할 때 구조 분해 할당을 사용하면 코드가 훨씬 읽기 쉬워집니다. 기본값 설정도 간편하며, 함수 매개변수에서도 활용 가능합니다. 중첩된 객체에서도 사용할 수 있어 깊은 프로퍼티 접근이 간결해집니다. Rest 연산자와 함께 사용하면 나머지 값들을 쉽게 처리할 수 있으며, 이는 특히 API 응답 처리에 유용합니다.

// 개선 전
function displayUser(user) {
  const name = user.name || 'Anonymous';
  const age = user.age || 0;
  const email = user.email;
  console.log(name, age, email);
}

const data = response.data;
const status = response.status;

// 개선 후
function displayUser({ name = 'Anonymous', age = 0, email }) {
  console.log(name, age, email);
}

const { data, status, ...rest } = response;
const [first, second, ...others] = array;

5. 템플릿 리터럴로 문자열 처리 개선

문자열 연결 시 + 연산자 대신 템플릿 리터럴을 사용하면 가독성이 크게 향상됩니다. 여러 줄 문자열 작성이 쉬워지고, 표현식 삽입이 직관적입니다. HTML 템플릿이나 SQL 쿼리 작성 시 특히 유용하며, 태그드 템플릿을 활용하면 문자열 처리를 더욱 강력하게 할 수 있습니다. 이는 XSS 공격 방지에도 도움이 됩니다.

// 개선 전
const greeting = 'Hello, ' + user.name + '!\n' +
  'You have ' + user.messageCount + ' messages.';

const html = '
' +
  '
' + user.name + '
' +
  '
' + user.bio + '
' +
  '
';

// 개선 후
const greeting = `Hello, ${user.name}!
You have ${user.messageCount} messages.`;

const html = `
  

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

6. Promise와 async/await로 비동기 처리 개선

콜백 지옥을 해결하고 비동기 코드를 동기 코드처럼 읽기 쉽게 만들어줍니다. async/await는 try-catch로 에러 처리가 가능하여 코드 흐름이 명확해집니다. Promise.all을 활용하면 병렬 처리로 성능을 향상시킬 수 있습니다. 에러 처리를 일관되게 하고, finally 블록으로 정리 작업을 수행하세요. 항상 reject 케이스를 처리하는 것을 잊지 마세요.

// 개선 전
getUser(userId, function(err, user) {
  if (err) {
    handleError(err);
    return;
  }
  getPosts(user.id, function(err, posts) {
    if (err) {
      handleError(err);
      return;
    }
    getComments(posts[0].id, function(err, comments) {
      if (err) handleError(err);
      else display(comments);
    });
  });
});

// 개선 후
async function loadUserData(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    return comments;
  } catch (error) {
    handleError(error);
  } finally {
    hideLoader();
  }
}

// 병렬 처리
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

7. 옵셔널 체이닝과 널 병합 연산자 활용

깊은 객체 프로퍼티 접근 시 null/undefined 체크를 간소화합니다. 옵셔널 체이닝(?.)은 중간 값이 없어도 에러를 발생시키지 않으며, 널 병합 연산자(??)는 0이나 빈 문자열을 유효한 값으로 처리합니다. 이 두 기능을 조합하면 방어적 프로그래밍이 훨씬 간결해집니다. API 응답 처리나 설정 객체 다룰 때 특히 유용합니다.

// 개선 전
const userName = user && user.profile && user.profile.name
  ? user.profile.name
  : 'Guest';

const count = config.maxItems !== undefined && config.maxItems !== null
  ? config.maxItems
  : 10;

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

// 개선 후
const userName = user?.profile?.name ?? 'Guest';
const count = config.maxItems ?? 10;
const port = config.port ?? 3000; // 0도 유효값

console.log(user?.address?.city);
user?.notifications?.forEach(n => send(n));

8. 배열 메서드로 함수형 프로그래밍 적용

for 루프 대신 map, filter, reduce 등의 배열 메서드를 사용하면 의도가 명확해지고 부수 효과를 줄일 수 있습니다. 메서드 체이닝으로 복잡한 데이터 변환을 우아하게 표현할 수 있습니다. 불변성을 유지하여 예측 가능한 코드를 작성하세요. some, every, find 등의 메서드도 적극 활용하면 코드가 자기 문서화됩니다.

// 개선 전
const activeUsers = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].isActive) {
    activeUsers.push(users[i].name.toUpperCase());
  }
}

let total = 0;
for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}

// 개선 후
const activeUsers = users
  .filter(user => user.isActive)
  .map(user => user.name.toUpperCase());

const total = prices.reduce((sum, price) => sum + price, 0);

const hasAdmin = users.some(user => user.role === 'admin');
const allVerified = users.every(user => user.verified);
const firstActive = users.find(user => user.isActive);

9. 모듈 시스템으로 코드 구조화

ES6 모듈을 사용하여 코드를 논리적 단위로 분리하고 재사용성을 높이세요. named export와 default export를 적절히 활용하고, 순환 참조를 피해야 합니다. 모듈별로 단일 책임을 부여하고, 바렐 파일(index.js)로 export를 정리하면 import 구문이 간결해집니다. 동적 import로 코드 스플리팅을 구현하여 초기 로딩 성능을 개선할 수 있습니다.

// utils/validation.js
export function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export function validatePhone(phone) {
  return /^\d{3}-\d{4}-\d{4}$/.test(phone);
}

// utils/index.js
export * from './validation.js';
export * from './formatting.js';

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

// 동적 import로 코드 스플리팅
const loadChart = async () => {
  const { Chart } = await import('./chart.js');
  return new Chart();
};

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

코드에 직접 숫자나 문자열을 쓰는 대신 의미있는 상수로 정의하세요. 이는 코드 이해도를 높이고 값 변경 시 한 곳만 수정하면 됩니다. enum 패턴이나 Object.freeze로 불변 상수 객체를 만들어 타입 안정성을 높이세요. 설정값은 별도 파일로 분리하고, 환경 변수를 활용하여 배포 환경별로 다른 값을 사용할 수 있게 합니다.

// 개선 전
if (user.status === 1) {
  setTimeout(() => notify(user), 300000);
}

if (order.total > 50000) {
  applyDiscount(order, 0.1);
}

// 개선 후
const USER_STATUS = Object.freeze({
  PENDING: 1,
  ACTIVE: 2,
  SUSPENDED: 3
});

const NOTIFICATION_DELAY_MS = 5 * 60 * 1000; // 5분
const FREE_SHIPPING_THRESHOLD = 50000;
const DISCOUNT_RATE = 0.1;

if (user.status === USER_STATUS.PENDING) {
  setTimeout(() => notify(user), NOTIFICATION_DELAY_MS);
}

if (order.total > FREE_SHIPPING_THRESHOLD) {
  applyDiscount(order, DISCOUNT_RATE);
}

실제 적용 사례

한 스타트업에서 3년간 운영된 레거시 JavaScript 코드베이스에 위의 리팩토링 전략을 체계적으로 적용한 결과, 코드 라인 수는 35% 감소했지만 기능은 동일하게 유지되었습니다. 특히 var를 const/let으로 전환하고 콜백을 async/await로 변경한 후 프로덕션 버그가 월평균 12건에서 3건으로 75% 감소했습니다. 함수 분리와 단일 책임 원칙 적용으로 단위 테스트 커버리지가 40%에서 85%로 상승했으며, 새로운 팀원의 온보딩 시간이 2주에서 3일로 단축되었습니다. 번들 크기는 동적 import 도입으로 22% 감소하여 초기 로딩 속도가 1.8초 개선되었고, 이는 사용자 이탈률 15% 감소로 이어졌습니다. 가장 큰 효과는 개발자들의 코드 리뷰 시간이 50% 단축되고, 기능 개발 속도가 평균 30% 향상된 점입니다.

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

리팩토링은 항상 테스트 코드와 함께 진행해야 하며, 한 번에 너무 많은 변경을 시도하지 마세요. 작은 단위로 리팩토링하고 커밋을 자주 하는 것이 안전합니다. 성능에 민감한 코드는 리팩토링 전후 벤치마크를 측정하세요. 팀 컨벤션을 먼저 정하고 ESLint, Prettier 같은 도구로 자동화하면 일관성을 유지할 수 있습니다. 리팩토링은 기능 추가와 분리하여 진행하고, 코드 리뷰를 필수로 하여 다른 관점의 피드백을 받으세요.

마무리 및 추가 팁

JavaScript 코드 리팩토링 전략은 지속적인 개선 과정입니다. 주간 단위로 레거시 코드를 개선하는 시간을 확보하고, 새로운 ECMAScript 기능을 학습하여 적용하세요. TypeScript 도입도 고려해보세요. 코드 품질은 곧 개발자의 생산성과 제품의 안정성으로 이어집니다.