이번 글에서는 자바스크립트의 프로미스를 활용하여 유효성 검사 및 입력 처리를 구현하는 방법에 대해 알아보겠습니다.
1. 유효성 검사 함수 만들기
먼저, 사용자의 입력이 유효한지를 검사하는 함수를 만들어야 합니다. 예를 들어, 사용자가 이메일 주소를 입력하는 필드에 대해 유효성을 검사한다고 가정해 봅시다. 아래와 같이 validateEmail 함수를 만들 수 있습니다.
function validateEmail(email) {
return new Promise((resolve, reject) => {
if (!email) {
reject(new Error('이메일 주소를 입력해주세요.'));
} else if (!isValidEmailFormat(email)) {
reject(new Error('유효한 이메일 주소가 아닙니다.'));
} else {
resolve();
}
});
}
function isValidEmailFormat(email) {
// 이메일 주소의 유효성을 검사하는 코드를 작성합니다.
// 예시: 정규식을 사용하여 이메일 형식을 검사합니다.
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
}
위의 validateEmail 함수는 프로미스를 반환하며, 유효성 체크에 성공하면 resolve를 호출하고, 유효성 체크에 실패하면 reject를 호출하여 에러 객체를 전달합니다. 이메일이 비어있는 경우나 유효한 형식이 아닌 경우 에러를 발생시키고, 그 외에는 resolve를 호출하여 유효성 검사가 성공했음을 알립니다.
2. 입력 처리하기
다음으로, 사용자의 입력을 처리하고 유효성 검사를 진행하는 함수를 만들어 보겠습니다. 아래의 예시는 이메일 입력 필드의 값을 받아와 유효성을 검사하고, 유효한 경우에만 입력을 처리하는 함수입니다.
function processEmailInput(email) {
validateEmail(email)
.then(() => {
// 유효성 검사에 성공한 경우, 입력 처리를 진행합니다.
console.log('입력 처리를 수행합니다.');
// ...
})
.catch((error) => {
// 유효성 검사에 실패한 경우, 에러를 처리합니다.
console.error('입력이 유효하지 않습니다:', error.message);
});
}
processEmailInput 함수는 validateEmail 함수를 호출하여 유효성 검사를 진행한 후, 검사에 성공한 경우 입력 처리를 진행합니다. 유효성 검사에 실패한 경우에는 catch 블록에서 에러를 처리합니다.
3. 사용 예시
위에서 작성한 함수들을 실제로 사용해보겠습니다. 아래의 예시는 폼의 이메일 입력 필드에 사용자가 값을 입력하고 제출했을 때의 동작을 나타냅니다.
const emailInput = document.getElementById('email');
document.getElementById('submit-button').addEventListener('click', () => {
const email = emailInput.value;
processEmailInput(email);
});
위의 코드에서는 이메일 필드의 값을 가져와 processEmailInput 함수를 호출합니다. 이 함수 내부에서는 입력 값의 유효성을 검사하고 입력을 처리하게 됩니다.
결론
프로미스를 이용하여 유효성 검사 및 입력 처리를 구현하는 방법을 살펴보았습니다. 프로미스를 사용하면 비동기 작업을 순차적으로 처리할 수 있다는 장점이 있습니다. 유효성 검사와 입력 처리 과정을 프로미스로 감싸서 콜백 지옥을 피하고 깔끔한 코드를 작성할 수 있습니다.