IMCAT.DEV
로그인 가입
JavaScript 입문 문법

JavaScript 기본적인 에러 처리

JavaScript 기본적인 에러 처리 — 초급

기본적인 에러 처리

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

프로그래밍을 하다 보면 에러는 피할 수 없는 존재입니다. 특히 실무에서는 예상치 못한 상황이 발생할 가능성이 높습니다. 예를 들어, 사용자가 잘못된 데이터를 입력하거나 네트워크 연결이 끊어지는 등의 상황에서 프로그램이 중단되면 사용자에게 불편을 끼칠 수 있습니다. 따라서 에러 처리는 프로그램의 안정성과 신뢰성을 높이는 중요한 요소입니다.

에러 처리를 제대로 하지 않으면 프로그램이 갑자기 종료되거나 잘못된 결과를 반환할 수 있습니다. 이는 사용자 경험에 큰 악영향을 미치고, 기업의 신뢰성을 떨어뜨릴 수 있습니다. 따라서 적절한 에러 처리 방법을 배우는 것은 필수적입니다.

2. 핵심 개념 설명

에러 처리의 기본 개념은 예외(Exception)입니다. 예외는 프로그램 실행 중에 발생할 수 있는 오류로, 이를 적절히 처리하지 않으면 프로그램이 중단될 수 있습니다. 예를 들어, 학교에서 시험을 볼 때, 시험지를 잃어버리는 상황을 생각해보세요. 시험지를 잃어버렸을 때 대처하지 않으면 시험을 볼 수 없는 것과 같습니다.

관련 용어 정리

용어설명
try에러가 발생할 가능성이 있는 코드를 감싸는 블록
catch발생한 에러를 처리하는 블록
finally에러 발생 여부와 관계없이 항상 실행되는 블록
throw사용자 정의 에러를 발생시키는 키워드

3. 기본 코드 예제

아래는 기본적인 에러 처리 예제입니다.

function divide(a, b) {
    try {
        if (b === 0) {
            throw new Error("0으로 나눌 수 없습니다."); // 에러 발생
        }
        return a / b; // 나누기 연산 수행
    } catch (error) {
        console.error(error.message); // 에러 메시지 출력
    } finally {
        console.log("연산이 종료되었습니다."); // 항상 실행되는 코드
    }
}

divide(10, 0); // 0으로 나누기 시도

실행 결과

0으로 나눌 수 없습니다.
연산이 종료되었습니다.

코드 한 줄씩 동작 설명

  1. divide 함수가 호출되며, 매개변수 a에 10, b에 0이 전달됩니다.
  2. try 블록 안에서 b가 0인지 확인합니다.
  3. b가 0이므로 throw 키워드를 사용하여 새로운 에러를 발생시킵니다.
  4. catch 블록으로 넘어가 에러 메시지를 출력합니다.
  5. finally 블록이 실행되어 "연산이 종료되었습니다."라는 메시지를 출력합니다.
  6. 4. 실전 활용 예제

    예제 1: 사용자 입력 처리

    쇼핑몰에서 사용자가 장바구니에 상품을 추가할 때, 수량을 입력받는 상황을 가정해봅시다.

    function addToCart(quantity) {
        try {
            if (quantity <= 0) {
                throw new Error("수량은 0보다 커야 합니다."); // 에러 발생
            }
            console.log(${quantity}개의 상품이 장바구니에 추가되었습니다.);
        } catch (error) {
            console.error(error.message); // 에러 메시지 출력
        }
    }
    
    addToCart(-1); // 잘못된 수량 입력

    예제 2: 네트워크 요청 처리

    API 요청을 통해 데이터를 가져올 때도 에러 처리가 필요합니다.

    async function fetchData(url) {
        try {
            let response = await fetch(url);
            if (!response.ok) {
                throw new Error("데이터를 가져오는 데 실패했습니다."); // 에러 발생
            }
            let data = await response.json();
            console.log(data);
        } catch (error) {
            console.error(error.message); // 에러 메시지 출력
        }
    }
    
    fetchData("https://api.example.com/data"); // API 요청

    5. 흔한 실수와 주의사항

    실수 1: catch 블록을 생략하기

    try {
        // 에러가 발생할 수 있는 코드
    } // catch 블록이 없음
    • 잘못된 코드: 에러가 발생했을 때 아무런 처리를 하지 않으므로 프로그램이 중단됩니다.
    • 올바른 코드:
    • try {
          // 에러가 발생할 수 있는 코드
      } catch (error) {
          console.error(error.message); // 에러 처리
      }

      실수 2: finally 블록의 사용을 잊음

      try {
          // 에러가 발생할 수 있는 코드
      } catch (error) {
          console.error(error.message); // 에러 처리
      }
      // finally 블록이 없음
    • 잘못된 코드: 에러 발생 여부와 관계없이 항상 실행해야 할 코드가 누락됩니다.

    6. 정리

  7. 에러 처리는 프로그램의 안정성과 사용자 경험을 높이는 데 필수적입니다.
  8. try, catch, finally를 사용하여 에러를 처리하는 기본 방법을 이해해야 합니다.
  9. 사용자 입력이나 API 요청과 같은 상황에서 에러 처리가 중요합니다.
  10. 에러 처리를 생략하거나 잘못된 방식으로 구현하면 프로그램이 중단될 수 있습니다.

다음에 학습하면 좋은 주제는 비동기 처리입니다. 비동기 처리와 에러 처리는 밀접하게 관련되어 있으므로 함께 학습하면 좋습니다.