에러 핸들링(Error Handling)

1. 에러 핸들링(Error Handling)

에러 핸들링에 대해 알아봅시다!
에러 핸들링(Error Handling)이란? 코드 실행 중 발생할 수 있는 예외 상황에 대응하는 방법입니다.
올바른 에러 핸들링은 애플리케이션의 안정성을 높이고, UX를 향상 시킵니다.

2. 사용방법

대표적인 에러 핸들링 DOM 이벤트는 다음과 같습니다.

try {
  // 실행하려는 코드
} catch (error) { // error 객체
  // 에러 발생 시, 실행할 코드
} finally {
  // 항상 실행할 코드
}

여기서 error 객체의 속성은 다음과 같습니다.

Error {
  name : 에러명,
  message : 에러의 상세 내용,
  stack : 호출 스택,
}

예를 들어 봅시다. index.html과 main.js에 다음과 같이 입력한 후, 실행해 봅시다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

main.js

const obj = {};

let result = "";
try {
    result = obj.property.a // 에러 발생 유도
} catch (error) {
  result = "모름"; // 기본값
  console.dir(error); // error 객체를 표현
} finally {
  console.log(`result = ${result}`);
}

결과

→ 결과를 보면, Cannot read properties of undefined (reading 'a') 라는 에러 메시지와 함께, message, stack이 나오는 것을 확인할 수 있습니다.

3. 커스텀 에러

특수한 상황에 에러를 발생시키고 싶을 때, 커스텀 에러를 생성할 수 있습니다.
다음과 같이 입력하여 생성하면 됩니다.

new Error('에러 메시지');

예를 들어 봅시다. main.js에 다음과 같은 내용을 추가한 뒤, 실행해 줍니다. 그러면 정상적으로 커스텀 에러가 나오게 됩니다.

// 커스텀 에러
try {
    // throw : 에러 발생 키워드
    throw new Error('이건 커스텀 에러입니다.');
} catch (error) {
    console.dir(error);
}

3. 정리하며

지금까지 에러 핸들링에 대해 알아보았습니다.
에러 핸들링을 통해 애플리케이션의 안정성을 향상시키고, 예기치 않은 상황에 대응하여 UX를 개선할 수 있습니다.

※ Git 주소

JavaScript-study/입문자를 위한 자바스크립트 실습/웹 프론트 언어로서 자바스크립트/5. 에러 핸들링

Contribute to NewBean0312/JavaScript-study development by creating an account on GitHub.

github.com

'Front-End Study > JavaScript' 카테고리의 다른 글

쿠키 받아오기(Cookie) (0)	2024.03.25
네트워크 요청 (0)	2024.03.25
이벤트(Event) (0)	2024.03.24
브라우저 객체 (0)	2024.03.24
DOM (0)	2024.03.22