[javascript] 사용자 입력 에러 핸들링 방법

07 Dec 2023

javascript

사용자 입력을 확인하고 처리할 때 에러 핸들링은 매우 중요합니다. 사용자로부터의 입력 에러를 적절하게 처리하지 않으면 애플리케이션이 예기치 않은 동작을 할 수 있습니다. 이번 블로그 포스트에서는 JavaScript에서 사용자 입력 에러 핸들링 방법에 대해 알아보겠습니다.

1. 폼 유효성 검사

사용자로부터 입력된 데이터를 받을 때, 일반적으로 폼을 사용합니다. 폼은 사용자 입력을 제출하기 전에 유효성을 검사할 수 있는 방법을 제공합니다. JavaScript에서는 addEventListener를 사용하여 폼 이벤트를 감지하고, preventDefault를 사용하여 기본 제출 동작을 막을 수 있습니다. 이후 폼의 각 입력 필드를 검사하여 유효성을 확인할 수 있습니다.

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 폼의 제출 동작을 막음

  // 각 입력 필드의 값을 검사
  const userInput = document.getElementById('userInput').value;
  if (userInput === '') {
    alert('입력값이 비어있습니다!');
    return;
  }

  // 유효성 통과한 경우 폼을 제출
  form.submit();
});

2. 타입 검사

특정한 타입의 입력값이 필요한 경우, JavaScript에서는 typeof를 사용하여 타입을 검사할 수 있습니다. 예를 들어, 숫자 타입의 입력값이 필요한 경우 다음과 같이 검사할 수 있습니다.

const userInput = document.getElementById('userInput').value;
if (typeof userInput !== 'number') {
  alert('숫자를 입력해야 합니다!');
  return;
}

3. 예외 처리

에러 핸들링을 위해, JavaScript에서는 try...catch 구문을 사용하여 예외를 처리할 수 있습니다. 블록 안에서 예외가 발생할 경우, catch 블록으로 제어가 이동하고 해당 예외를 처리할 수 있습니다.

try {
  // 예외 발생 가능한 코드
  const userInput = getUserInput();

  if (typeof userInput !== 'number') {
    throw new Error('숫자를 입력해야 합니다!');
  }

  // 예외 발생하지 않은 경우 실행되는 코드
  console.log('입력값:', userInput);
} catch (error) {
  // 예외 발생 시 실행되는 코드
  console.error('입력 에러:', error.message);
}

결론

JavaScript에서 사용자 입력 에러 핸들링은 폼 유효성 검사, 타입 검사, 예외 처리 등 다양한 방법을 활용할 수 있습니다. 이러한 방법들을 적절하게 조합하여 사용자의 잘못된 입력을 처리하고, 예기치 않은 동작을 방지할 수 있습니다. 사용자와 상호작용하는 웹 애플리케이션을 개발할 때는 항상 사용자 입력 에러에 대비하여 안전한 코드를 작성하는 것이 중요합니다.

참고 자료: