Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 try catch 완벽 가이드: 에러 처리의 기초부터 활용까지

자바스크립트에서 try catch 블록은 코드 실행 중 발생하는 오류를 처리하는 핵심 도구입니다. try 블록에는 테스트하고 싶은 코드를 작성하고, catch 블록에는 try 블록의 코드가 정상적으로 실행되지 않을 경우 동작할 코드를 작성합니다.

왜 에러 처리가 중요한가?

개발자는 프로그램을 테스트할 때 오류를 특정 방식으로 처리하는 코드를 작성하는 경우가 많습니다. 프로그램이 갑자기 멈추고 긴 에러 로그가 화면에 출력되도록 두는 것보다, 사용자에게 "잠시 후 다시 시도해 주세요"와 같은 친절한 메시지를 보여주는 것이 훨씬 좋은 사용자 경험을 제공하기 때문입니다.

바로 이럴 때 try/catch 블록이 유용합니다. try/catch 블록을 사용하면 오류를 우아하게(gracefully) 처리하여, 코드 문제가 발생해도 전체 프로그램이 강제 종료되는 상황을 막을 수 있습니다. 이번 가이드에서는 try/catch 블록의 사용법과 그 활용 가치를 단계별로 살펴보겠습니다.

에러 처리 기본 개념 복습

모든 개발자는 코드에서 실수를 만듭니다. 프로그램이 깨질 수 있는 방식은 무수히 많기 때문입니다.

자바스크립트에서 오류가 발생하면 프로그램은 보통 실행을 멈추고 콘솔에 에러 메시지를 출력합니다. 이는 개발자 입장에서는 문제의 원인을 파악하는 데 유용하지만, 일반 사용자가 이런 에러 메시지를 마주한다면 아무 의미도 이해할 수 없을 것입니다.

그렇기 때문에 코드에 에러 처리 절차를 포함하는 것이 중요합니다. 에러 핸들러를 포함하면 오류가 발생했을 때 프로그램이 어떻게 반응할지 직접 정의할 수 있습니다. 즉, 사용자에게 어떤 메시지를 보여줄지, 혹은 문제 발생 시 개발자에게 어떻게 알릴지 결정할 수 있게 됩니다.

자바스크립트 try catch 문법

자바스크립트의 try catch 블록은 지정된 코드 블록 내의 오류를 식별합니다. try 블록의 코드에서 오류가 발생하면 catch 블록의 내용이 실행됩니다. 또한 선택적으로 finally 블록을 추가하여 오류 발생 여부와 관계없이 항상 실행되어야 하는 코드를 작성할 수도 있습니다.

try/catch 구문의 기본 문법은 다음과 같습니다:

try {
	// 여기에 실행할 코드 작성
	console.log("코드가 정상 작동합니다!");
} catch (e) {
	console.log("코드에 문제가 있습니다!");
}

위 블록은 두 개의 문으로 구성되어 있습니다:

  • try {}
  • catch (e) {}

try 문으로 감싸진 코드는 프로그램이 실행을 시도하는 부분입니다. 위 예제에서는 콘솔에 "코드가 정상 작동합니다!"라는 문장을 출력하려고 시도합니다. catch 문으로 감싸진 코드는 try 문에서 오류가 반환될 경우에만 실행됩니다.

catch 문의 (e) 값은 try 문의 코드 실행을 실패하게 만든 오류 객체를 나타냅니다. 필요하다면 e의 값을 출력하여 오류의 근본 원인을 확인할 수도 있습니다.

try catch 자바스크립트 예제

try/catch 블록이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다. 아래 예제에서는 변수 이름을 잘못 입력했다고 가정해 봅시다.

let ourVariable = "Test";
console.log(ourVarible); // 오타 발생!

이 코드는 다음과 같은 결과를 반환합니다:

ReferenceError: ourVarible is not defined

이것은 변수를 찾을 수 없을 때 반환되는 기본 에러 메시지입니다. 만약 사용자가 이런 에러를 그대로 본다면 크게 혼란스러울 것입니다. 이제 같은 코드를 try/catch 블록으로 감싸서 실행해 보겠습니다:

let ourVariable = "Test";
try {
	console.log(ourVarible);
} catch (e) {
	console.log("문제가 발생했습니다!");
}

이번에는 다음과 같은 결과가 출력됩니다:

문제가 발생했습니다!

내부적으로는 앞서 본 것과 동일한 ReferenceError가 발생하지만, 길고 복잡한 기본 에러 메시지 대신 우리가 catch 블록에 지정한 사용자 정의 메시지가 반환됩니다. 오류는 여전히 기록되지만, 프로그램은 우리가 설정한 친숙한 메시지를 사용자에게 보여줍니다.

catch 블록은 발생한 오류를 인수 e에 담아 보관합니다. 원한다면 언제든 이 오류 정보에 접근할 수 있습니다. 오류 값 e를 함께 출력하는 프로그램의 예를 살펴보겠습니다:

let ourVariable = "Test";
try {
	console.log(ourVarible);
} catch (e) {
	console.log("문제가 발생했습니다! 에러 메시지:", e);
}

실행 결과는 다음과 같습니다:

문제가 발생했습니다! 에러 메시지: ReferenceError: ourVarible is not defined.

이제 코드는 오류 발생 사실을 알리면서 동시에 프로그램이 던진 실제 에러 메시지도 함께 보여줍니다. 개발자에게는 디버깅 정보를 제공하고, 사용자에게는 이해하기 쉬운 안내를 제공하는 것이죠.

참고로 catch 절은 선택 사항입니다. 오류가 발생해도 프로그램이 아무 작업도 하지 않기를 원한다면, 코드를 try 블록으로만 감싸면 됩니다.

JavaScript try catch finally 절

코드에 추가할 수 있는 절이 하나 더 있습니다. 바로 finally입니다. finally는 catch처럼 선택적인 절로, 오류 발생 여부와 관계없이 항상 코드를 실행할 수 있게 해줍니다. try/catch/finally가 함께 사용된 예제를 살펴보겠습니다:

let ourVariable = "Test";
try {
	console.log(ourVarible);
} catch (e) {
	console.log("문제가 발생했습니다! 에러 메시지:", e);
} finally {
	console.log("코드 실행이 완료되었습니다!");
}

프로그램의 실행 결과는 다음과 같습니다:

문제가 발생했습니다! 에러 메시지: ReferenceError: ourVarible is not defined.
코드 실행이 완료되었습니다!

코드에서 오류가 발생하면 catch 절의 코드가 먼저 실행되어 오류를 처리합니다. 오류 처리가 끝나면 finally 블록의 코드가 실행되어 "코드 실행이 완료되었습니다!"라는 메시지를 출력합니다. finally 절은 데이터베이스 연결 종료, 파일 닫기, 로딩 상태 해제 등 성공 여부와 무관하게 반드시 수행해야 하는 정리(cleanup) 작업에 특히 유용합니다.

마치며

자바스크립트의 try/catch 절을 사용하면 코드를 안전하게 테스트하고 오류를 통제할 수 있습니다. catch 문의 내용은 try 문이 실패했을 때 실행되며, finally 문은 try 또는 catch 문이 실행된 직후 항상 호출됩니다.

사용자가 직접 보게 되는 웹사이트를 개발한다면, 사용자 정의 에러 메시지는 매우 유용합니다. 문제가 발생했을 때 사용자가 혼란스러워하지 않도록 도와주기 때문입니다.

자바스크립트 학습을 더 깊이 있게 진행하고 싶다면, 에러 처리뿐만 아니라 비동기 처리(Promise, async/await)에서의 try/catch 활용법도 함께 익혀보시길 권장합니다. 실무에서 에러 처리는 견고한 애플리케이션을 만드는 필수 요소입니다.