Error 객체, throw, try-catch-finally, 커스텀 에러와 디버깅 도구.

에러 처리와 디버깅

견고한 프로그램은 에러를 무시하지 않고 예측하고 다룹니다. 이번 레슨에서는 에러를 던지고 잡는 법, 커스텀 에러, 그리고 디버깅 도구를 익힙니다.

학습 목표

Error 객체의 구조를 이해한다
throw 로 에러를 발생시킬 수 있다
try-catch-finally 로 에러를 처리할 수 있다
커스텀 에러 클래스를 만들 수 있다
비동기 에러를 처리하고 디버깅 도구를 활용할 수 있다

Error 객체

에러는 Error 객체로 표현되며 name 과 message, 그리고 호출 추적(stack)을 가집니다.

const err = new Error('무언가 잘못됨');
console.log(err.name);    // → Error
console.log(err.message); // → 무언가 잘못됨
console.log(err.stack);   // → 호출 스택 (디버깅에 유용)

내장 에러 타입도 다양합니다.

타입	발생 상황
`TypeError`	타입이 맞지 않을 때
`RangeError`	허용 범위를 벗어났을 때
`ReferenceError`	존재하지 않는 변수 참조
`SyntaxError`	문법 오류

throw 로 에러 던지기

function divide(a, b) {
  if (b === 0) {
    throw new Error('0으로 나눌 수 없습니다');
  }
  return a / b;
}

💡 TIP — 문자열(throw '에러')도 던질 수 있지만, stack 정보가 있는 Error 객체를 던지는 것이 디버깅에 훨씬 좋습니다.

try-catch-finally

try {
  const result = divide(10, 0);
  console.log(result);
} catch (err) {
  console.error('처리됨:', err.message); // → 처리됨: 0으로 나눌 수 없습니다
} finally {
  console.log('항상 실행됨'); // 성공/실패 무관하게 실행
}

try: 위험한 코드를 감싼다
catch: 에러를 잡아 처리한다
finally: 정리 작업(파일 닫기 등)을 보장한다

커스텀 에러

도메인에 맞는 에러를 만들면 잡아낼 때 구분하기 좋습니다.

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function checkAge(age) {
  if (age < 0) {
    throw new ValidationError('나이는 음수일 수 없습니다', 'age');
  }
}

try {
  checkAge(-5);
} catch (err) {
  if (err instanceof ValidationError) {
    console.error(`${err.field}: ${err.message}`); // → age: 나이는 음수일 수 없습니다
  } else {
    throw err; // 모르는 에러는 다시 던진다
  }
}

⚠️ 주의 — 잡을 수 없거나 다룰 방법이 없는 에러를 catch 에서 삼키지 마세요. 모르는 에러는 다시 throw 해 상위로 전달하는 것이 안전합니다.

비동기 에러

async/await 에서는 try-catch 가 그대로 동작합니다.

async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('로드 실패:', err.message);
  }
}

처리되지 않은 Promise 거부도 전역에서 잡을 수 있습니다.

window.addEventListener('unhandledrejection', (e) => {
  console.error('처리 안 된 거부:', e.reason);
});

디버깅 도구

console.log('값:', value);    // 기본 출력
console.warn('경고');         // 노란 경고
console.error('에러');        // 빨간 에러
console.table([{ a: 1 }, { a: 2 }]); // 표로 보기
console.group('그룹'); console.log('안쪽'); console.groupEnd();

function buggy(x) {
  debugger; // 개발자 도구가 열려 있으면 여기서 멈춤
  return x * 2;
}

💡 TIP — debugger 문은 브라우저 개발자 도구에서 실행을 멈추고 변수 상태를 들여다보게 해줍니다. console.log 보다 강력한 디버깅 수단입니다.

요약

Error 객체는 name·message·stack 을 가진다
throw 로 에러를 던지되 문자열 대신 Error 객체를 쓴다
try-catch-finally 로 처리하며 finally 는 항상 실행된다
커스텀 에러 클래스로 도메인 에러를 구분하고, 모르는 에러는 다시 던진다
async/await 도 try-catch 로 처리하며 debugger 로 깊이 디버깅한다

연습문제

음수가 들어오면 RangeError 를 던지는 제곱근 함수를 작성하세요.
위 함수를 try-catch-finally 로 감싸 에러 메시지와 "검사 완료"를 출력하세요.
NotFoundError 커스텀 에러 클래스를 만들고, instanceof 로 구분해 처리하세요.

힌트 — class NotFoundError extends Error
fetch 가 실패할 수 있는 비동기 함수를 작성하고, try-catch 로 에러를 처리해 폴백 값을 반환하세요.

💡 연습문제 풀이

불러오는 중…

에러 처리와 디버깅

학습 목표

Error 객체

throw 로 에러 던지기

try-catch-finally

커스텀 에러

비동기 에러

디버깅 도구

요약

연습문제

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

🧰 개발자 도구

✅ 복습 퀴즈

댓글 0