JavaScript 중급 문법

JavaScript 에러 처리 심화

JavaScript 에러 처리 심화 — 중급

에러 처리 심화

1. 도입 (왜 배워야 하는가)

JavaScript는 클라이언트 사이드와 서버 사이드 모두에서 널리 사용되는 언어입니다. 실제로는 예기치 않은 상황에서 에러가 발생할 가능성이 매우 높습니다. 예를 들어, 사용자가 잘못된 입력을 하거나, 서버와의 연결이 끊기는 경우 등 다양한 상황에서 에러가 발생할 수 있습니다. 이러한 에러를 적절히 처리하지 않으면 프로그램이 예기치 않게 종료되거나 사용자가 혼란스러워할 수 있습니다.

에러 처리를 잘 하지 않으면, 여러분의 애플리케이션은 신뢰성을 잃고 사용자 경험이 저하되며, 결국 비즈니스 기회를 놓칠 수 있습니다. 따라서, 에러 처리는 단순히 코딩의 한 부분이 아니라, 사용자와의 신뢰를 구축하기 위한 중요한 요소입니다.

2. 핵심 개념 설명

에러(Error)

에러는 프로그램에서 발생한 문제를 의미합니다. JavaScript에서는 여러 종류의 에러가 존재하며, 크게 구문 에러(Syntax Error), 런타임 에러(Runtime Error), 논리 에러(Logic Error)로 나눌 수 있습니다.

예외(Exception)

예외는 에러를 처리하기 위한 방법 중 하나로, 프로그램의 흐름을 제어할 수 있는 구조체입니다. 예외가 발생하면, 프로그램은 예외 처리 코드로 흐름을 변경할 수 있습니다.

비유

에러는 마치 길을 가다가 예기치 않게 나타나는 장애물과 같습니다. 장애물이 있을 때, 우리는 그 장애물을 우회하거나 제거하는 방법을 찾아야 합니다. 예외 처리는 그러한 장애물을 피해 안전하게 목적지에 도달하는 방법입니다.

용어	설명
에러	프로그램 실행 중 발생하는 문제
예외	에러를 처리하기 위한 특별한 객체

3. 기본 코드 예제

기본적인 에러 처리 예제를 통해 try-catch 문을 사용해보겠습니다.

function divide(a, b) {
    try {
        if (b === 0) {
            throw new Error("0으로 나눌 수 없습니다."); // 예외 발생
        }
        return a / b;
    } catch (error) {
        console.error(error.message); // 에러 메시지 출력
    }
}

divide(10, 0); // 0으로 나눌 수 없습니다.

실행 결과: 0으로 나눌 수 없습니다.
코드 한 줄씩 동작 설명:

- function divide(a, b) {: 두 개의 인자를 받아 나누는 함수를 정의합니다. - try {: 에러가 발생할 수 있는 코드를 감싸는 블록을 시작합니다. - if (b === 0) {: 두 번째 인자가 0인지 확인합니다. - throw new Error("0으로 나눌 수 없습니다.");: 0으로 나누려 할 경우 예외를 발생시킵니다. - } catch (error) {: 발생한 예외를 처리하는 블록으로 넘어갑니다. - console.error(error.message);: 에러 메시지를 콘솔에 출력합니다.

4. 실전 활용 예제

예제 1: API 요청 시 에러 처리

쇼핑몰에서 상품 정보를 가져올 때, 서버에서 응답이 없거나 오류가 발생할 수 있습니다.

async function fetchProduct(productId) {
    try {
        const response = await fetch(https://api.example.com/products/${productId});
        if (!response.ok) {
            throw new Error('상품 정보를 가져오는 데 실패했습니다.');
        }
        const product = await response.json();
        console.log(product);
    } catch (error) {
        console.error(error.message);
    }
}

fetchProduct(123);

예제 2: 사용자 입력 검증

사용자가 입력한 정보를 검증할 때, 유효하지 않은 입력이 들어올 수 있습니다.

function validateInput(input) {
    try {
        if (input.trim() === '') {
            throw new Error('입력값은 비어 있을 수 없습니다.');
        }
        console.log('유효한 입력입니다.');
    } catch (error) {
        console.error(error.message);
    }
}

validateInput(''); // 입력값은 비어 있을 수 없습니다.

5. 흔한 실수와 주의사항

실수 1: 에러를 단순히 무시하기

try {
    // 에러 발생 가능 코드
} catch (error) {
    // 에러를 무시함
}

올바른 코드:

try {
    // 에러 발생 가능 코드
} catch (error) {
    console.error(error.message); // 에러를 기록함
}

실수 2: 잘못된 에러 타입 사용

catch (error) {
    console.log(error); // 에러 타입을 확인하지 않음
}