자바스크립트 오류 처리 - 예외 처리 (try, catch, finally) 오류 발생시키기 (throw 문) 디버깅 기법 (브라우저 디버거, 콘솔)

9. 자바스크립트 오류 처리

자바스크립트에서는 프로그램 실행 중에 발생할 수 있는 오류를 처리하는 방법을 제공합니다. 오류 처리는 코드의 안정성을 높이고, 예상치 못한 상황에서 발생할 수 있는 오류에 대한 대응을 할 수 있게 해줍니다. 이 장에서는 예외 처리, 오류 발생시키기, 디버깅 기법에 대해 다룹니다.

9.1 예외 처리 (try, catch, finally)

자바스크립트에서 예외 처리의 핵심은 try, catch, finally 블록입니다. 이 구조는 코드 실행 중에 발생하는 오류를 잡아내고, 프로그램이 중단되지 않고 적절히 처리될 수 있도록 도와줍니다.

9.1.1 try, catch

try 블록은 오류가 발생할 수 있는 코드를 감싸고, 만약 오류가 발생하면 그 오류는 catch 블록으로 전달됩니다. catch 블록에서는 발생한 오류를 처리하거나, 오류 메시지를 사용자에게 표시할 수 있습니다.

예시: try, catch

javascript
try {
  const data = JSON.parse('{"name": "Alice", "age": 25}'); // 유효한 JSON
  console.log(data.name);  // Alice
} catch (error) {
  console.error("JSON parsing failed:", error);
}

위 코드에서 try 블록은 정상적으로 실행되며, 오류가 발생하지 않습니다. 하지만 만약 JSON 문자열이 잘못되었다면, catch 블록에서 오류를 처리하게 됩니다.

9.1.2 catch의 오류 객체

catch 블록은 오류가 발생하면 오류 객체를 인수로 받습니다. 이 객체는 발생한 오류에 대한 정보를 포함하고 있으며, message, name 같은 속성을 통해 오류의 세부 내용을 알 수 있습니다.

예시: catch 오류 객체

javascript
try {
  const data = JSON.parse("Invalid JSON String");
} catch (error) {
  console.error("Error name:", error.name);     // SyntaxError
  console.error("Error message:", error.message); // Unexpected token I in JSON at position 0
}

9.1.3 finally

finally 블록은 try 또는 catch 블록의 실행이 완료된 후에 항상 실행됩니다. 주로 리소스 정리나 종료 작업을 수행하는 데 사용됩니다.

예시: finally 블록

javascript
try {
  const data = JSON.parse("Invalid JSON String");
} catch (error) {
  console.error("Error:", error.message);
} finally {
  console.log("Parsing attempt finished.");
}

위 코드에서는 JSON 파싱 시 오류가 발생하더라도 finally 블록은 항상 실행되어 "Parsing attempt finished."라는 메시지를 출력합니다.

9.2 오류 발생시키기 (throw 문)

자바스크립트에서는 특정 상황에서 강제로 오류를 발생시킬 수 있습니다. 이를 위해 throw 문을 사용합니다. throw는 오류가 발생했음을 명시적으로 나타내고, 해당 오류는 catch 블록에서 처리됩니다.

9.2.1 throw 문 사용

throw 문은 오류를 강제로 발생시킬 때 사용되며, throw 다음에 오류 객체를 던질 수 있습니다. 주로 Error 객체를 사용합니다.

예시: throw 문으로 오류 발생시키기

javascript
function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed.");
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error("Error:", error.message);  // Error: Division by zero is not allowed.
}

위 예제에서는 divide 함수에서 b가 0일 경우, throw 문을 사용해 강제로 오류를 발생시키고, catch 블록에서 해당 오류를 처리합니다.

9.2.2 커스텀 오류 던지기

필요에 따라 자바스크립트의 내장 오류 객체(Error, TypeError, RangeError 등)를 사용하지 않고, 사용자 정의 오류를 던질 수 있습니다.

예시: 커스텀 오류 발생시키기

javascript
class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = "CustomError";
  }
}

try {
  throw new CustomError("This is a custom error.");
} catch (error) {
  console.error(error.name);    // CustomError
  console.error(error.message); // This is a custom error.
}

위 코드에서는 CustomError라는 클래스가 Error 클래스를 상속받아 사용되었습니다. throw 문을 사용하여 이 사용자 정의 오류를 던지고, catch 블록에서 처리했습니다.

9.3 디버깅 기법

자바스크립트에서 디버깅은 코드를 분석하고, 오류를 발견하고 수정하는 데 중요한 과정입니다. 다양한 디버깅 기법이 있지만, 가장 일반적인 방법은 브라우저 디버거와 콘솔을 사용하는 것입니다.

9.3.1 브라우저 디버거

현대적인 웹 브라우저(예: Chrome, Firefox, Edge 등)는 디버거 도구를 내장하고 있습니다. 이를 통해 코드의 흐름을 추적하고, 변수의 값과 오류를 분석할 수 있습니다.

9.3.1.1 디버거 설정

브라우저 디버거는 개발자 도구(Developer Tools)에서 사용할 수 있습니다. 브라우저에서 F12 또는 Ctrl + Shift + I를 눌러 개발자 도구를 열고 Sources 탭에서 자바스크립트 코드를 분석할 수 있습니다.

9.3.1.2 breakpoint 설정

브레이크포인트(Breakpoint)는 특정 줄에서 코드 실행을 일시 중지하고, 그 시점의 변수 상태와 실행 흐름을 분석하는 데 사용됩니다. 코드를 실행하는 도중 특정 지점에서 멈추어 디버깅할 수 있습니다.

예시: 브레이크포인트 사용

javascript
function calculate(a, b) {
  let sum = a + b;  // 이 줄에 브레이크포인트 설정
  return sum;
}

console.log(calculate(5, 3));  // 8

브레이크포인트가 설정된 줄에서 코드가 멈추면, 그 시점의 a, b, sum 변수의 값을 확인할 수 있습니다.

9.3.1.3 Step 기능

디버거는 Step 기능을 제공하여 코드가 한 줄씩 실행되는 과정을 추적할 수 있습니다.

• Step Over: 현재 줄을 실행하고, 함수 호출이 있으면 그 함수의 내부로 들어가지 않고 다음 줄로 넘어갑니다.
• Step Into: 함수 내부로 들어가 그 함수의 코드도 디버깅합니다.
• Step Out: 현재 함수 실행을 마치고, 호출한 곳으로 되돌아갑니다.

9.3.2 콘솔 디버깅

콘솔은 오류나 상태 메시지를 출력하는 매우 유용한 디버깅 도구입니다. 브라우저의 개발자 도구에서 Console 탭을 통해 자바스크립트의 실행 결과나 오류 메시지를 확인할 수 있습니다.

9.3.2.1 console.log()

console.log()는 디버깅 중 자주 사용되는 메서드로, 특정 값이나 상태를 출력하여 확인할 수 있습니다.

예시: console.log() 사용

javascript
const user = { name: "Alice", age: 25 };
console.log("User info:", user);  // User info: { name: "Alice", age: 25 }

9.3.2.2 console.error()

console.error()는 오류 메시지를 콘솔에 출력하는 데 사용됩니다. 에러가 발생했을 때, 해당 내용을 명확하게 구분하기 위해 사용할 수 있습니다.

예시: console.error() 사용

javascript
try {
  throw new Error("An error occurred.");
} catch (error) {
  console.error("Error:", error.message);  // Error: An error occurred.
}

9.3.2.3 console.table()

console.table()은 배열이나 객체의 데이터를 표 형태로 출력할 때 유용합니다.

예시: console.table() 사용

javascript
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 }
];

console.table(users);

위 코드는 배열의 객체 데이터를 표 형식으로 출력하여 가독성을 높입니다.

자바스크립트에서 오류 처리와 디버깅은 안정적인 애플리케이션을 개발하는 데 매우 중요한 과정입니다. try...catch...finally를 통해 발생할 수 있는 오류를 처리하고, 필요에 따라 throw로 강제 오류를 발생시킬 수 있습니다. 또한 브라우저 디버거와 콘솔을 활용한 디버깅 기법은 코드를 분석하고, 오류를 찾고, 수정하는 데 매우 유용합니다. 올바른 오류 처리와 디버깅을 통해 애플리케이션의 안정성과 유지보수성을 높일 수 있습니다.