JavaScript 기초 강의 8편: 오류 처리와 디버깅 기법

1. JavaScript에서의 오류 처리

JavaScript에서 코드를 실행할 때 발생하는 오류는 프로그램을 중단시킬 수 있습니다. 이러한 오류를 적절히 처리하면 프로그램의 안정성을 높일 수 있습니다. JavaScript에서는 try...catch 구문을 사용하여 오류를 감지하고 처리할 수 있습니다.

try...catch 기본 문법

try {
    // 잠재적으로 오류가 발생할 수 있는 코드
    let result = riskyFunction();
    console.log(result);
} catch (error) {
    // 오류가 발생했을 때 실행되는 코드
    console.error("오류가 발생했습니다:", error.message);
}

코드 설명

• try 블록 안에 오류가 발생할 수 있는 코드를 작성합니다.
• catch 블록은 오류가 발생했을 때 실행되며, error 객체를 통해 오류 메시지와 스택 정보를 확인할 수 있습니다.

---

2. 오류 객체

catch 블록에서 사용하는 error 객체는 JavaScript의 내장 객체로, 발생한 오류에 대한 정보를 제공합니다.

오류 객체의 주요 속성

• message: 오류 메시지.
• name: 오류의 이름.
• stack: 오류가 발생한 위치와 호출 스택을 포함하는 문자열.

try {
    throw new Error("예제 오류 발생");
} catch (error) {
    console.log(error.name); // "Error"
    console.log(error.message); // "예제 오류 발생"
    console.log(error.stack); // 오류의 스택 트레이스
}

사용자 정의 오류

JavaScript에서 사용자 정의 오류를 생성하려면 throw 키워드를 사용할 수 있습니다.

function validateNumber(num) {
    if (typeof num !== "number") {
        throw new TypeError("숫자 타입이 아닙니다.");
    }
    return true;
}

try {
    validateNumber("test");
} catch (error) {
    console.error(error.name); // "TypeError"
    console.error(error.message); // "숫자 타입이 아닙니다."
}

---

3. finally 블록

finally 블록은 try...catch 이후에 항상 실행됩니다. 이는 오류 발생 여부와 관계없이 마무리 작업이 필요할 때 유용합니다.

try {
    console.log("시작");
    throw new Error("문제 발생");
} catch (error) {
    console.error("catch 블록에서 오류 처리:", error.message);
} finally {
    console.log("이 코드는 항상 실행됩니다.");
}

// 출력:
// 시작
// catch 블록에서 오류 처리: 문제 발생
// 이 코드는 항상 실행됩니다.

---

4. 디버깅 기법

JavaScript 디버깅은 코드의 문제를 찾고 수정하기 위해 중요한 과정입니다. 브라우저의 개발자 도구를 사용하면 디버깅을 효과적으로 할 수 있습니다.

1) console 메서드

• console.log(): 일반 메시지 출력.
• console.error(): 오류 메시지 출력.
• console.warn(): 경고 메시지 출력.
• console.table(): 배열이나 객체를 표 형태로 출력.

const data = [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }];
console.table(data);

2) 브라우저 개발자 도구

• 중단점(Breakpoints): 코드를 실행 중 특정 줄에서 멈춰 상태를 검사할 수 있습니다.
• Watch: 변수의 값을 지속적으로 감시할 수 있습니다.
• Call Stack: 호출 스택을 확인하여 함수 호출 순서를 파악할 수 있습니다.

3) 디버거 문

debugger 키워드를 코드에 삽입하면, 실행 중 해당 위치에서 코드가 멈추고 개발자 도구가 열립니다.

function testDebug() {
    let a = 5;
    debugger; // 이곳에서 코드가 멈춤
    let b = a * 2;
    console.log(b);
}
testDebug();

5. 실전 예제: 비동기 코드 디버깅

비동기 코드에서 발생하는 오류는 찾기 어렵기 때문에, async/await와 함께 try...catch를 사용하는 것이 좋습니다.

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        if (!response.ok) {
            throw new Error("네트워크 응답이 정상이 아닙니다.");
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("데이터를 가져오는 중 오류 발생:", error.message);
    } finally {
        console.log("fetchData 함수 완료");
    }
}

fetchData();

코드 설명

• 비동기 작업의 fetch 함수에서 오류가 발생할 경우 catch 블록에서 오류를 처리합니다.
• finally 블록은 네트워크 요청이 성공했든 실패했든 항상 실행됩니다.

---

요약

이번 강의에서는 JavaScript의 오류 처리 기법과 디버깅 도구에 대해 배웠습니다. try...catch와 finally를 사용하여 안정적인 코드 작성을 연습하고, 브라우저 개발자 도구를 사용하여 문제를 탐색하고 해결하는 방법을 익혔습니다. 다음 강의에서는 JavaScript의 브라우저 API와 이를 활용한 웹 개발 기법을 학습하겠습니다.