Debugging 실전 프로젝트 완벽 가이드

실제 프로젝트에서 발생하는 버그를 효과적으로 찾고 해결하는 방법을 배웁니다. console.log부터 디버거 활용, 에러 추적까지 실전 디버깅 스킬을 단계별로 익혀보세요.

---

---

들어가며

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

목차

1. console.log_기본_디버깅
2. console.table_객체_배열_확인
3. try-catch_에러_처리
4. debugger_중단점_설정
5. 조건부_중단점_활용
6. console.trace_호출_스택_추적
7. console.time_성능_측정
8. 에러_객체_상세_정보
9. 조건부_로깅으로_노이즈_제거
10. 커스텀_에러_클래스

---

1. console.log 기본 디버깅

개요

가장 기본적인 디버깅 방법으로 변수의 값을 확인하고 코드 실행 흐름을 추적합니다.

코드 예제

function calculateTotal(price, quantity) {
  console.log('price:', price, 'quantity:', quantity);
  const total = price * quantity;
  console.log('total:', total);
  return total;
}
calculateTotal(1000, 3);

설명

console.log를 사용해 함수 입력값과 계산 결과를 확인하여 예상과 다른 값이 들어오는지 추적할 수 있습니다.

---

2. console.table 객체 배열 확인

개요

객체나 배열 데이터를 표 형식으로 보기 좋게 출력하여 데이터 구조를 쉽게 파악합니다.

코드 예제

const users = [
  { id: 1, name: '김철수', age: 25 },
  { id: 2, name: '이영희', age: 30 },
  { id: 3, name: '박민수', age: 28 }
];
console.table(users);

설명

console.table을 사용하면 배열 데이터가 표 형태로 출력되어 여러 객체의 속성을 한눈에 비교할 수 있습니다.

---

3. try-catch 에러 처리

개요

예상되는 에러를 미리 잡아서 프로그램이 중단되지 않도록 안전하게 처리합니다.

코드 예제

function parseJSON(jsonString) {
  try {
    const data = JSON.parse(jsonString);
    return data;
  } catch (error) {
    console.error('JSON 파싱 실패:', error.message);
    return null;
  }
}

설명

try-catch 블록으로 JSON 파싱 에러를 잡아내어 에러가 발생해도 프로그램이 계속 실행되도록 합니다.

---

4. debugger 중단점 설정

개요

코드 실행을 특정 지점에서 멈추고 변수 상태를 자세히 확인할 수 있는 디버거를 활용합니다.

코드 예제

function findUser(userId) {
  const users = [{ id: 1, name: '홍길동' }];
  debugger; // 여기서 실행 멈춤
  const user = users.find(u => u.id === userId);
  return user;
}
findUser(1);

설명

debugger 키워드를 만나면 브라우저 개발자 도구가 자동으로 열리며 변수값을 실시간으로 확인할 수 있습니다.

---

5. 조건부 중단점 활용

개요

특정 조건일 때만 디버거를 멈추게 하여 효율적으로 문제를 찾습니다.

코드 예제

for (let i = 0; i < 100; i++) {
  const result = i * 2;
  if (i === 50) {
    debugger; // i가 50일 때만 멈춤
  }
  console.log(result);
}

설명

반복문에서 특정 조건일 때만 debugger를 실행하여 원하는 시점의 상태를 정확히 확인할 수 있습니다.

---

6. console.trace 호출 스택 추적

개요

함수가 어떤 경로로 호출되었는지 전체 호출 스택을 확인하여 코드 흐름을 파악합니다.

코드 예제

function third() {
  console.trace('호출 경로 추적');
}
function second() {
  third();
}
function first() {
  second();
}
first();

설명

console.trace를 사용하면 first → second → third 순서로 함수가 호출된 전체 경로가 출력됩니다.

---

7. console.time 성능 측정

개요

코드 실행 시간을 측정하여 느린 부분을 찾아 성능을 개선합니다.

코드 예제

console.time('데이터처리');
const data = Array(1000000).fill(0).map((_, i) => i * 2);
console.timeEnd('데이터처리');

console.time('필터링');
const filtered = data.filter(x => x > 500000);
console.timeEnd('필터링');

설명

console.time과 timeEnd 사이의 코드 실행 시간이 밀리초 단위로 출력되어 성능 병목을 찾을 수 있습니다.

---

8. 에러 객체 상세 정보

개요

Error 객체의 속성을 활용하여 에러 발생 위치와 원인을 정확히 파악합니다.

코드 예제

try {
  const obj = null;
  obj.method();
} catch (error) {
  console.error('에러명:', error.name);
  console.error('메시지:', error.message);
  console.error('스택:', error.stack);
}

설명

Error 객체의 name, message, stack 속성을 통해 어떤 에러가 어디서 발생했는지 상세 정보를 얻을 수 있습니다.

---

9. 조건부 로깅으로 노이즈 제거

개요

특정 조건에서만 로그를 출력하여 불필요한 로그를 줄이고 중요한 정보만 확인합니다.

코드 예제

function processData(data) {
  const DEBUG = true;
  if (DEBUG && data.length > 100) {
    console.log('대용량 데이터 처리:', data.length);
  }
  return data.filter(x => x > 0);
}

설명

DEBUG 플래그와 조건문을 결합하여 개발 중에만, 그리고 특정 상황에서만 로그를 출력할 수 있습니다.

---

10. 커스텀 에러 클래스

개요

에러 타입을 구분하여 각 상황에 맞는 처리를 할 수 있도록 사용자 정의 에러를 만듭니다.

코드 예제

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}
function validateAge(age) {
  if (age < 0) throw new ValidationError('나이는 음수일 수 없습니다');
}

설명

커스텀 에러 클래스를 만들어 에러 타입을 명확히 구분하고 catch 블록에서 에러별로 다르게 처리할 수 있습니다.

---

마치며

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

관련 태그

#JavaScript #Debugging #Console #ErrorHandling #DevTools