원글 페이지 : 바로가기
자바스크립트 코드를 실행하다 보면 예상치 못한 오류가 발생할 수 있습니다. 이러한 오류를 적절히 처리하지 않으면 웹 애플리케이션이 멈추거나 예상치 못한 동작을 할 수 있습니다. 따라서 자바스크립트 에러 핸들링은 안정적인 웹 애플리케이션 개발에 필수적인 부분입니다. 왜 에러 핸들링이 중요할까요? 사용자 경험 향상: 오류 발생 시 사용자에게 친절한 메시지를 보여주거나, 복구할 수 있는 방법을 제공하여 사용자 경험을 향상시킬 수 있습니다. 애플리케이션 안정성: 오류 발생 시에도 애플리케이션이 계속해서 동작하도록 하여 안정성을 높일 수 있습니다. 디버깅 용이: 오류 발생 시 정확한 오류 메시지와 위치를 파악하여 디버깅을 효율적으로 수행할 수 있습니다. 자바스크립트 에러 핸들링 방법 1. try…catch 문 가장 일반적으로 사용되는 에러 핸들링 방법입니다. try 블록 안에 실행하고 싶은 코드를 작성하고, catch 블록에서 오류가 발생했을 때 실행할 코드를 작성합니다. try {
// 오류가 발생할 수 있는 코드
let result = x / 0; // 0으로 나누기 오류 발생
console.log(result); // 이 코드는 실행되지 않음
} catch (error) {
console.error(‘Error occurred:’, error); // 오류 메시지 출력
} finally {
console.log(‘Finally block executed.’); // 항상 실행됨
}
try 블록에서 0으로 나누기 연산을 시도하여 의도적으로 오류를 발생시킵니다. catch 블록에서 발생한 오류를 콘솔에 출력합니다. finally 블록은 항상 실행되어 “Finally block executed.”라는 메시지를 출력합니다. 2. window.onerror 전역적으로 발생하는 모든 JavaScript 오류를 처리하는 이벤트 핸들러입니다. window.onerror = function(message, source, lineno, colno, error) {
console.error(‘Error:’, message, ‘at’, source, lineno, colno, error);
};
3. Promise 비동기 작업에서 발생하는 오류를 처리하는 데 사용됩니다. fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => {
// 데이터 처리
})
.catch(error => {
console.error(‘Error:’, error);
});
4. async/await Promise를 더욱 간결하게 사용할 수 있도록 해주는 문법입니다. async function fetchData() {
try {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
// 데이터 처리
} catch (error) {
console.error(‘Error:’, error);
}
} 에러 객체 catch 블록에서 받는 error 객체는 다음과 같은 속성을 가질 수 있습니다. message: 오류 메시지 name: 오류 이름 (예: ReferenceError, TypeError) stack: 스택 추적 (오류가 발생한 코드 위치) 주요 에러 종류 SyntaxError: 문법 오류 ReferenceError: 존재하지 않는 변수 참조 TypeError: 타입 불일치 RangeError: 유효한 범위를 벗어난 값 URIError: encodeURI() 등의 함수에서 발생하는 오류 추가적인 에러 핸들링 기법 Custom Error: 사용자 정의 오류를 생성하여 더욱 구체적인 오류 처리를 할 수 있습니다. Error Boundaries (React): React 컴포넌트에서 자식 컴포넌트의 오류를 잡아내고 대체 UI를 보여줄 수 있습니다. 에러 핸들링 시 고려 사항 사용자에게 명확한 메시지: 사용자가 이해할 수 있는 간결하고 명확한 오류 메시지를 제공해야 합니다. 로그 기록: 오류 발생 시 로그를 남겨 추후 문제 분석에 활용해야 합니다. 오류 복구: 가능한 경우 오류를 복구하거나 사용자에게 대안을 제공해야 합니다. 성능 고려: 에러 핸들링 로직이 애플리케이션 성능에 영향을 미치지 않도록 주의해야 합니다. https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%98%88%EC%99%B8-%EC%B2%98%EB%A6%AC 📚 자바스크립트의 예외 처리(Exception) 예외 (exception) 프로그래밍에서 예외(exception)란 실행 중인 프로그램에서 예기치 못한 상황이 발생하여 더 이상 진행할 수 없는 상황을 말한다. 예를 들어 문법적인 오류이거나 파일을 찾을 수 없 inpa.tistory.com https://velog.io/@cookie004/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81-%EB%B0%A9%EB%B2%95-%EC%86%8C%EA%B0%9C [번역] 자바스크립트 에러 핸들링 방법 자바스크립트에서 에러 핸들링은 간단하지만 종종 미스테리하고 복잡하게 느껴집니다. 피할 수 없으면 즐기지(?) 말고 핸들링하자! 자바스크립트의 Error 객체, 예외를 발생시키고 핸들링 할 수 velog.io https://ko.javascript.info/try-catch ‘try..catch’와 에러 핸들링 ko.javascript.info https://velog.io/@longroadhome/%EB%AA%A8%EB%8D%98JS-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81 [모던JS: Core] 에러 핸들링 본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으 velog.io