Debugging 실전 프로젝트 개발 기법

실전 프로젝트에서 발생하는 복잡한 버그를 효과적으로 추적하고 해결하는 고급 디버깅 기법을 학습합니다. 프로덕션 환경에서의 로깅, 성능 프로파일링, 메모리 누수 분석 등 실무에 필요한 디버깅 스킬을 다룹니다.

---

---

들어가며

이 글에서는 Debugging 실전 프로젝트 개발 기법에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Source_Map_디버깅
2. 조건부_브레이크포인트
3. 스택_트레이스_분석
4. 성능_프로파일링
5. 메모리_누수_탐지
6. 비동기_에러_추적
7. 구조화된_로깅
8. 네트워크_요청_디버깅
9. 타임_트래블_디버깅
10. 런타임_타입_검증
11. CPU_프로파일링
12. 에러_경계_패턴

---

1. Source_Map_디버깅

개요

프로덕션 빌드에서 Source Map을 활용해 원본 코드 위치를 추적하는 방법입니다.

코드 예제

// webpack.config.js
module.exports = {
  mode: 'production',
  devtool: 'source-map',
  output: {
    sourceMapFilename: '[file].map'
  }
};

설명

Source Map은 압축된 코드를 원본 코드로 매핑해주어 프로덕션 환경에서도 정확한 에러 위치를 파악할 수 있게 합니다.

---

2. 조건부_브레이크포인트

개요

특정 조건에서만 실행을 멈추는 고급 브레이크포인트 설정 기법입니다.

코드 예제

function processUsers(users) {
  for (let i = 0; i < users.length; i++) {
    // debugger가 user.id === 42일 때만 작동
    if (users[i].id === 42) debugger;
    processUser(users[i]);
  }
}

설명

조건부 브레이크포인트를 사용하면 반복문에서 특정 케이스만 집중적으로 디버깅할 수 있어 효율적입니다.

---

3. 스택_트레이스_분석

개요

Error 객체의 스택 트레이스를 분석하여 에러 발생 경로를 추적합니다.

코드 예제

function captureStackTrace() {
  const error = new Error();
  Error.captureStackTrace(error);
  console.log(error.stack.split('\n').slice(1, 4));
  return error.stack;
}

설명

스택 트레이스를 캡처하고 분석하면 함수 호출 체인을 파악하여 버그의 근원을 찾을 수 있습니다.

---

4. 성능_프로파일링

개요

Performance API를 사용해 코드 실행 시간을 측정하고 병목 지점을 찾습니다.

코드 예제

performance.mark('fetch-start');
await fetchData();
performance.mark('fetch-end');
performance.measure('fetch', 'fetch-start', 'fetch-end');
const measure = performance.getEntriesByName('fetch')[0];
console.log(`실행 시간: ${measure.duration}ms`);

설명

성능 마크와 측정을 통해 특정 코드 블록의 실행 시간을 정밀하게 분석하여 최적화 포인트를 발견할 수 있습니다.

---

5. 메모리_누수_탐지

개요

WeakMap과 메모리 프로파일러를 활용해 메모리 누수를 탐지합니다.

코드 예제

const cache = new WeakMap();
function storeData(obj, data) {
  cache.set(obj, data);
  // obj가 GC되면 자동으로 캐시에서 제거됨
}
console.log(performance.memory.usedJSHeapSize);

설명

WeakMap은 객체가 가비지 컬렉션될 때 자동으로 참조를 해제하여 메모리 누수를 방지합니다.

---

6. 비동기_에러_추적

개요

async/await와 Promise rejection을 체계적으로 추적하는 방법입니다.

코드 예제

process.on('unhandledRejection', (reason, promise) => {
  console.error('처리되지 않은 Promise 거부:', reason);
  console.error('Promise:', promise);
});

async function riskyOperation() {
  throw new Error('비동기 에러');
}

설명

전역 에러 핸들러로 처리되지 않은 Promise rejection을 캡처하여 놓치기 쉬운 비동기 에러를 추적합니다.

---

7. 구조화된_로깅

개요

레벨별 로그와 컨텍스트 정보를 포함한 구조화된 로깅 시스템입니다.

코드 예제

const logger = {
  log: (level, msg, ctx) => ({
    timestamp: Date.now(),
    level, message: msg,
    context: ctx,
    stack: new Error().stack
  })
};
console.log(logger.log('ERROR', '결제 실패', {userId: 123}));

설명

구조화된 로그는 타임스탬프, 레벨, 컨텍스트를 포함하여 프로덕션 환경에서 문제를 빠르게 진단할 수 있게 합니다.

---

8. 네트워크_요청_디버깅

개요

Fetch API interceptor를 구현해 모든 HTTP 요청/응답을 모니터링합니다.

코드 예제

const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('요청:', args[0]);
  const response = await originalFetch(...args);
  console.log('응답:', response.status);
  return response;
};

설명

Fetch를 래핑하여 모든 네트워크 요청을 자동으로 로깅하고 에러를 중앙에서 처리할 수 있습니다.

---

9. 타임_트래블_디버깅

개요

상태 변화 히스토리를 기록하여 과거 상태로 되돌아가며 디버깅합니다.

코드 예제

class StateHistory {
  constructor() { this.history = []; }
  push(state) { this.history.push(JSON.parse(JSON.stringify(state))); }
  restore(index) { return this.history[index]; }
  get length() { return this.history.length; }
}

설명

상태 변화를 스냅샷으로 저장하면 버그 발생 시점으로 되돌아가 원인을 분석할 수 있습니다.

---

10. 런타임_타입_검증

개요

프로덕션 환경에서 런타임 타입 에러를 조기에 발견하는 검증 시스템입니다.

코드 예제

function validate(value, schema) {
  if (typeof value !== schema.type) {
    throw new TypeError(`Expected ${schema.type}, got ${typeof value}`);
  }
  return value;
}
const userId = validate(input, {type: 'number'});

설명

런타임 타입 검증으로 TypeScript가 잡지 못하는 외부 데이터의 타입 에러를 방지합니다.

---

11. CPU_프로파일링

개요

Node.js의 프로파일러를 사용해 CPU 사용량이 높은 함수를 찾습니다.

코드 예제

const { Session } = require('inspector');
const session = new Session();
session.connect();
session.post('Profiler.enable');
session.post('Profiler.start');
// 측정할 코드 실행
session.post('Profiler.stop', (err, { profile }) => {
  console.log(profile);
});

설명

Inspector API로 CPU 프로파일을 생성하면 어느 함수가 가장 많은 CPU 시간을 소비하는지 정확히 파악할 수 있습니다.

---

12. 에러_경계_패턴

개요

React의 Error Boundary 개념을 일반 JavaScript로 구현한 에러 격리 패턴입니다.

코드 예제

function withErrorBoundary(fn) {
  return async (...args) => {
    try {
      return await fn(...args);
    } catch (error) {
      console.error('격리된 에러:', error);
      return null;
    }
  };
}

설명

에러 경계 패턴으로 특정 모듈의 에러가 전체 앱을 중단시키지 않도록 격리하여 안정성을 높입니다.

---

마치며

이번 글에서는 Debugging 실전 프로젝트 개발 기법에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Debugging #ErrorHandling #Logging #Performance