웹 애플리케이션을 개발할 때 사용자의 잘못된 입력이나 예상치 못한 상황으로 인해 프로그램이 비정상적으로 종료되는 것을 방지하려면 오류(Error) 및 예외(Exception) 처리가 필수적입니다. 이번 글에서는 JavaScript에서 try...catch 문과 throw 키워드를 활용해 오류 처리를 구현하는 방법을 실전 예제를 통해 살펴보겠습니다.
핵심 개념 정리
- try 블록: 오류가 발생할 가능성이 있는 코드를 감싸는 영역입니다.
- throw 문: 특정 조건에서 의도적으로 예외를 발생시킬 때 사용합니다.
- catch 블록: try 블록에서 발생한 예외를 잡아 사용자에게 친절한 안내 메시지를 보여줄 수 있습니다.
예제 코드
아래 예제는 두 개의 숫자를 입력받아 나눗셈을 수행하며, 두 번째 숫자가 0일 경우 직접 예외를 발생(throw)시켜 처리하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>오류 및 예외 처리 예제</h1>
<div class="sample"></div>
<input class="inputNum" type="number" />
<input class="inputNum" type="number" />
<button class="Check">나누기(DIVIDE)</button>
<h3>
위 버튼을 클릭하면 나눗셈이 실행됩니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let num, num1;
document.querySelector(".Check").addEventListener("click", () => {
num = document.querySelectorAll(".inputNum")[0].value;
num1 = document.querySelectorAll(".inputNum")[1].value;
try {
if (num1 === "0") throw "0으로 나눌 수 없습니다.";
sampleEle.innerHTML = `${num} ÷ ${num1} = ${num / num1}`;
} catch (e) {
sampleEle.innerHTML = "오류: " + e;
}
});
</script>
</body>
</html>코드 설명
- 사용자가 두 개의 입력란에 숫자를 입력한 후 DIVIDE 버튼을 클릭합니다.
- 클릭 이벤트가 발생하면 각 입력란의 값을 가져와
try블록 안에서 나눗셈을 시도합니다. - 두 번째 값이
"0"이라면throw문으로 "0으로 나눌 수 없습니다."라는 예외를 강제로 발생시킵니다. - 발생한 예외는
catch(e)블록에서 받아 화면에 오류 메시지를 출력합니다. - 정상적인 경우에는 계산 결과가
.sample요소에 표시됩니다.
실행 결과
첫 번째 숫자에 10, 두 번째 숫자에 2를 입력하고 DIVIDE 버튼을 클릭하면 아래와 같이 정상적인 결과가 출력됩니다.
반면, 두 번째 숫자에 0을 입력한 후 DIVIDE 버튼을 클릭하면 다음과 같이 오류 메시지가 표시되며 프로그램이 중단되지 않습니다.
마무리
이처럼 try...catch와 throw를 적절히 활용하면 0으로 나누기 같은 잘못된 연산 상황에서도 프로그램이 갑자기 종료되지 않고, 사용자에게 명확한 피드백을 제공할 수 있습니다. 실무에서는 이러한 예외 처리 패턴을 API 호출, 폼 유효성 검사 등 다양한 상황에 확장하여 적용하면 더욱 견고한 웹 애플리케이션을 만들 수 있습니다.