▶ JavaScript Tutorial

JavaScript Errors

JavaScript Errors: 오류의 이해와 처리 방법

JavaScript에서 **오류(Error)**는 코드 실행 중에 발생하는 예외적인 상황을 의미합니다. 오류는 코드 실행을 중단시키고, 프로그램이 예상대로 동작하지 않게 만듭니다. 오류 처리는 프로그램의 안정성을 높이기 위해 중요하며, 적절한 처리를 통해 오류를 감지하고 복구할 수 있습니다.

이 가이드는 JavaScript에서 발생하는 오류의 종류와 오류 처리 방법에 대해 설명합니다.

1. JavaScript 오류의 종류

JavaScript에서 발생하는 오류는 주로 다음과 같은 세 가지 주요 카테고리로 나뉩니다:

1.1. 구문 오류 (Syntax Error)

*구문 오류(Syntax Error)**는 잘못된 문법으로 인해 코드가 실행되지 않을 때 발생합니다. 프로그램이 구문 오류를 포함하고 있으면 실행 자체가 불가능합니다.

1.1.1. 예시

let a = ;  // 구문 오류: 할당할 값이 없음

이 코드는 구문 오류 때문에 실행되지 않습니다.

1.2. 참조 오류 (Reference Error)

*참조 오류(Reference Error)**는 존재하지 않는 변수에 접근하려 할 때 발생합니다.

1.2.1. 예시

console.log(x);  // 참조 오류: x는 정의되지 않음

이 코드는 x가 정의되지 않았기 때문에 참조 오류가 발생합니다.

1.3. 타입 오류 (Type Error)

*타입 오류(Type Error)**는 잘못된 데이터 타입을 사용하는 경우 발생합니다. 예를 들어, 숫자 타입에 문자열 메서드를 적용하려 하면 발생합니다.

1.3.1. 예시

let num = 42;
num.toUpperCase();  // 타입 오류: 숫자에는 toUpperCase() 메서드가 없음

이 코드는 숫자에는 toUpperCase() 메서드가 없기 때문에 타입 오류가 발생합니다.

2. 오류 처리 방법

JavaScript에서는 try...catch 구문을 사용해 오류를 처리할 수 있습니다. 이 구문을 통해 오류가 발생할 수 있는 코드를 감싸고, 오류가 발생했을 때 프로그램이 중단되지 않도록 처리할 수 있습니다.

2.1. `try...catch` 구문

try: 오류가 발생할 수 있는 코드를 작성합니다.
catch: try 블록에서 오류가 발생했을 때 실행할 코드를 작성합니다.

2.1.1. 기본 구조

try {
    // 오류가 발생할 수 있는 코드
} catch (error) {
    // 오류 처리
}

2.1.2. 예시: 오류 처리

try {
    let result = x * 10;  // x가 정의되지 않음
} catch (error) {
    console.log("오류 발생:", error.message);  // 오류 메시지 출력
}
// 출력: 오류 발생: x is not defined

2.2. `finally` 블록

finally 블록은 오류가 발생하든 발생하지 않든 항상 실행되는 코드를 작성하는 데 사용됩니다. finally는 리소스 정리와 같은 작업을 수행할 때 유용합니다.

2.2.1. 예시: `finally` 사용

try {
    let result = 10 / 0;  // 0으로 나누기
} catch (error) {
    console.log("오류 발생:", error.message);
} finally {
    console.log("이 코드는 항상 실행됩니다.");
}
// 출력:
// 오류 발생: Infinity
// 이 코드는 항상 실행됩니다.

3. 오류 객체 (Error Object)

JavaScript에서 오류는 Error 객체로 표현됩니다. Error 객체에는 오류의 이름과 오류 메시지가 포함됩니다. 기본적으로 JavaScript는 다양한 오류 유형에 대한 내장 오류 객체를 제공합니다.

3.1. 내장 오류 객체

오류 객체	설명
`Error`	모든 오류의 기본 객체
`SyntaxError`	잘못된 구문으로 인한 오류
`ReferenceError`	정의되지 않은 변수에 접근할 때 발생
`TypeError`	잘못된 데이터 타입을 사용했을 때 발생
`RangeError`	값이 허용된 범위를 벗어났을 때 발생
`URIError`	잘못된 URL 관련 함수 사용 시 발생

3.2. 예시: `Error` 객체 사용

try {
    throw new Error("이것은 사용자 정의 오류입니다.");
} catch (error) {
    console.log(error.name);    // 출력: Error
    console.log(error.message); // 출력: 이것은 사용자 정의 오류입니다.
}

4. 사용자 정의 오류

JavaScript에서는 사용자 정의 오류를 만들 수 있습니다. throw 키워드를 사용하여 오류를 강제로 발생시킬 수 있으며, 이를 통해 특정 상황에서 의도적으로 오류를 처리할 수 있습니다.

4.1. `throw`로 오류 발생시키기

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

try {
    console.log(divide(10, 0));  // 0으로 나눔
} catch (error) {
    console.log("오류:", error.message);
}
// 출력: 오류: 0으로 나눌 수 없습니다.

5. 비동기 코드에서 오류 처리

JavaScript에서 비동기 코드의 오류 처리는 **try...catch**로는 직접 처리할 수 없습니다. 비동기 작업의 오류 처리는 Promise 또는 async/await 구문을 통해 처리합니다.

5.1. `Promise`에서 오류 처리

비동기 작업에서 발생하는 오류는 catch() 메서드를 통해 처리합니다.

new Promise((resolve, reject) => {
    reject("Promise 오류 발생");
})
.then(result => console.log(result))
.catch(error => console.log(error));  // 출력: Promise 오류 발생

5.2. `async/await`에서 오류 처리

async/await 구문을 사용하는 비동기 함수에서 **try...catch**를 통해 오류를 처리할 수 있습니다.

async function fetchData() {
    try {
        let response = await fetch("<https://example.com/data>");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("오류 발생:", error.message);
    }
}

fetchData();

6. 오류 처리 전략

효과적인 오류 처리는 프로그램의 안정성을 유지하고, 사용자 경험을 개선하는 데 매우 중요합니다. 다음은 JavaScript에서 오류를 처리할 때 유용한 몇 가지 전략입니다.

6.1. 오류 로그 기록

오류가 발생할 경우, 이를 로그로 기록하여 나중에 디버깅하거나 문제를 추적할 수 있도록 합니다.

try {
    // 코드 실행
} catch (error) {
    console.error("오류 기록:", error.message);  // 오류 메시지 로그
}

6.2. 오류 메시지 사용자화

사용자에게 노출될 오류 메시지는 사용자 친화적으로 작성하고, 세부 오류는 개발 로그에 기록하는 것이 좋습니다.

function processRequest() {
    try {
        // 처리 중 오류 발생
        throw new Error("서버 오류");
    } catch (error) {
        alert("죄송합니다. 오류가 발생했습니다. 나중에 다시 시도해주세요.");  // 사용자 메시지
        console.error(error);  // 개발자용 로그
    }
}

요약

JavaScript 오류는 프로그램 실행 중 발생하는 예외적인 상황으로, 구문 오류, 참조 오류, 타입 오류 등이 있습니다.
try...catch 구문을 사용해 오류 처리를 할 수 있으며, 오류가 발생하더라도 프로그램이 중단되지 않도록 제어할 수 있습니다.
JavaScript는 Error 객체를 통해 오류에 대한 정보를 제공하며, 사용자 정의 오류를 만들 수 있습니다.
비동기 작업에서는 **Promise*와 async/await 구문을 통해 오류를 처리할 수 있습니다.
오류 처리 전략으로 로그 기록과 사용자 친화적인 오류 메시지 제공이 중요합니다.

JavaScript에서 오류 처리를 적절히 구현하면 프로그램의 안정성을 높이고, 사용자 경험을 개선할 수 있습니다.

코딩 스쿨 JavaScript