에러 핸들링(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 |
