학습
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으로 나눌 수 없습니다.
연산이 종료되었습니다.
코드 한 줄씩 동작 설명
divide함수가 호출되며, 매개변수a에 10,b에 0이 전달됩니다.try블록 안에서b가 0인지 확인합니다.b가 0이므로throw키워드를 사용하여 새로운 에러를 발생시킵니다.catch블록으로 넘어가 에러 메시지를 출력합니다.finally블록이 실행되어 "연산이 종료되었습니다."라는 메시지를 출력합니다.- 잘못된 코드: 에러가 발생했을 때 아무런 처리를 하지 않으므로 프로그램이 중단됩니다.
- 올바른 코드:
- 잘못된 코드: 에러 발생 여부와 관계없이 항상 실행해야 할 코드가 누락됩니다.
- 에러 처리는 프로그램의 안정성과 사용자 경험을 높이는 데 필수적입니다.
try,catch,finally를 사용하여 에러를 처리하는 기본 방법을 이해해야 합니다.- 사용자 입력이나 API 요청과 같은 상황에서 에러 처리가 중요합니다.
- 에러 처리를 생략하거나 잘못된 방식으로 구현하면 프로그램이 중단될 수 있습니다.
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. 정리
다음에 학습하면 좋은 주제는 비동기 처리입니다. 비동기 처리와 에러 처리는 밀접하게 관련되어 있으므로 함께 학습하면 좋습니다.