alert() 와 confirm() 오버라이드 하기
본문
alert()와 confirm()을 다른 알럿창 라이브러리로 오버라이드 하려고 하는데, 관련 게시글이 많이 없기도 하여 질문을 남깁니다.
알럿창 라이브러리들이 모두 비동기로 작동을 해서, 코드가 동기적으로 작동해야 하는 알림창의 경우는 오버라이드 하더라도, "확인"버튼 누르지도 않았는데 바로 다음 코드가 실행이 되어 버립니다.
동기적으로 작동하는 알럿창 라이브러리가 있을까요?
비동기적 알럿창 라이브러를 쓰면서 모든 함수마다 call back을 넣는걸 생각해보기도 했는데 2천개가 넘는 코드들을 다 수정하기가 감당이 안되네요.
답변 1
alert()와 confirm() 함수를 다른 알럿창 라이브러리로 오버라이드하려 하시지만,
대부분의 라이브러리가 비동기 방식 동작하여 기존 코드의 흐름을 유지하기 어렵다시면서 . .
동기적으로 작동하는 알럿창 라이브러리가 필요한데,
2천 개가 넘는 기존 코드를 콜백 방식으로 변경하는 것은 비효율적이므로,
해결책이 필요할 것입니다.
기존 alert() 및 confirm()을 Promise 기반으로 오버라이드하여
비동기 라이브러리를 동기적으로 사용할 수 있도록 변환하는 것이 최적의 방안입니다.
이 방식은 기존 코드 수정 없이 동작하며,
기존의 alert("메시지"); 및 confirm("메시지");를 그대로 사용할 수 있도록 보장합니다.
*js/common.js, 오버라이드 코드 (window.alert, window.confirm)
// SweetAlert2 기반 alert() 오버라이드
window.alert = function(message) {
return new Promise(resolve => {
Swal.fire({
text: message,
icon: 'info',
confirmButtonText: '확인'
}).then(() => resolve());
});
};
// SweetAlert2 기반 confirm() 오버라이드
window.confirm = function(message) {
return new Promise(resolve => {
Swal.fire({
text: message,
icon: 'question',
showCancelButton: true,
confirmButtonText: '확인',
cancelButtonText: '취소'
}).then(result => resolve(result.isConfirmed));
});
};
*async 함수 내부에서, 사용 예시 (await alert(), await confirm())
async function showAlertAndConfirm() {
await alert("경고 메시지");
const result = await confirm("진행하시겠습니까?");
if (result) {
console.log("사용자가 확인을 눌렀습니다.");
}
}
// 함수 실행
showAlertAndConfirm();