[Javascript] 예외처리

youngseo·2022년 2월 21일
0

Javascript

목록 보기
31/46
post-thumbnail
post-custom-banner

예외처리

1. Intro

로그인 페이지에서 아이디나 비밀번호를 잘 못 입력하는 경우 "아이디 또는 비밀번호를 확인해주세요" 와 같은 문구를 확인한 적이 있을 것입니다.

이렇게 특정 코드를 실행 시 에러가 발생되는 경우 에러 이후의 나머지 코드를 계속 실행하는 것은 의미가 없기에 일부러 예외를 만들어 에러를 발생시킬 수 있습니다. 이러한 방식을 예외처리라고 합니다.

이러한 예외처리는 try catch, throat을 활용해 만들 수 있으며, 커스텀 에러를 만들어 에러를 확장할 수도 있습니다.

오늘은 이 예외처리에 대해 공부한 내용을 정리해보려고 합니다.

2. 예외(exception)

TCP School에 설명되어 있는 내용에 따르면, 예외란 프로그램이 실행 중에 발생하는 런타임 오류(문법적인 오류)를 의미합니다.

2. try catch

기본적으로 에러를 다룰 때 쓰는 구문은 try catch입니다.

try { 
  
} catch (e) {
  //try 에서 에러 발생할 경우 실행되는 구문 
}

try구문에서 발생된 에러는 e객체로 들어오며, 에러발생 시 실행될 구문을 catch구문에 넣을 수 있습니다.

존재하지 않는 함수를 실행시켜 에러를 발생시켜보록 하겠습니다.

try { 
  x()
} catch (e) {
  //try 에서 에러 발생할 경우 실행되는 구문 
  console.error('에러 발생')
} finally {
  // 어떠한 상황에서도 실행
}

실행 결과 콘솔에 "에러 발생" 이 표시가 되었습니다. 여기서 e는 에러 객체입니다. 이 error객체를 통해 어떤 에러가 났는지 에러꾸러미로 들어온다고 보면 되겠습니다. 위 예시에서는 e에 [ReferenceError: x is not defined]라는 에러에 대한 정보가 들어와 구문을 실행할 수 있습니다.

결론적으로 try catch문을 통해서 에러를 잡아내고 에러가 발생했을 때의 로직을 실행시킬수 있겠습니다.

3. throw

앞서 살펴보았듯이 일부러 에러를 만들어 메세지를 사용자에게 보여줄 수 있습니다. 이 행위를 직접 작성해보도록 하겠습니다.

function login(id, pw) {
	if (id === 'zero' && pw === 0000) {
		return true;
	}
}

try {
	login('one', 111);
} catch (error) {
	console.error(e);
	console.error('에러발생'); 
} finally {
}

실행을 시켜보면 성공을 하지 못했음에도 아무런 에러를 내뱉지 못하고 있는 것을 확인할 수 있습니다. 이는 문법적인 에러가 잡히지 않아 생기는 문제로 사용자가 throw를 이용해 에러를 직접 정의를 할 수 있습니다.

function login(id, pw) {
	if (id === 'zero' && pw === 0000) {
		return true;
	}

	throw new Error('로그인 실패');
}

try {
	login('one', 111);
} catch (error) {
	console.error(error);
	console.error('에러발생'); 
} finally {
  	//console.log('로그인 시도 시간: ' + new Data())
}

실행결과 [Eroor: 로그인 실패] , 에러 발생이 콘솔창에 뜨게 됩니다.

throw new Errorerror객체로 들어가 콘솔 창에 이 에러가 로그인 실패가 잘 담겨 나타나게 되는 것입니다. 이렇게 사용자가 throw new Error로 직접 에러를 정의를 해 새롭게 에러를 만들어냈습니다.

브라우저 위에서 사용자에게 안내를 하고 싶은 경우 아래와 같이 사용할 수도 있습니다.

...
catch (error) {
	window.alert('에러발생'); // 사용자에게 노출
  ...

4. 스택 - 추적

에러는 스택형태로 쌓여서 기록이 되게 됩니다. 이렇게 에러의 stack객체에서 에러를 확인할 수 있습니다.

try { 
  x()
} catch (e) {
  console.error(e.stack) 
}

5. 커스텀 - 에러

앞으로 프로그램이 거대해지고 요구사항이 심화되면서 에러객체를 조금 더 깊이 다뤄야하는 경우가 생깁니다. 에러 객체는 메세지, 스택, name, property 등 다양하게 다룰 수 있습니다.

이런 경우 class문법을 활용해 직접 커스텀에러를 만들 수 있습니다.

class LoginError extends Error {
	constructor(message) {
		super(message);

		this.name = 'Login Error';
	}
}

이 커스텀 에러를 사용해보도록 하겠습니다.

function login(id, password) {
	if (id !== 'a') {
		throw new LoginError('아이디 불일치');
	}

	if (id === 'a' && password === 'a') {
		return true;
	}
}

참고 자료


Dev Log 벨로그
자바스크립트 튜토리얼

post-custom-banner

0개의 댓글