alert 콜백은 지원하지 않습니다. 그런데, 많은 분이 alert() 이후 특정 동작을 실행하고 싶어 합니다. 하지만 alert()는 콜백을 지원하지 않기 때문에, 직접 콜백처럼 사용하는 구조화된 함수 패턴이 필요합니다. 이 글에서는 간단한 콜백 패턴과 대안 라이브러리까지 소개합니다.
alert 콜백 방법
alert() 콜백 지원안함
alert("alert() 창");
alert("창 닫히면 실행");위 소스를 보면 첫번째 alert() 창이 호출되고, 닫으면 그 다음 alert() 순서대로 실행 됩니다.
함수로 콜백 처리 방법
function showAlert(callback) {
alert("알림창입니다!");
if (typeof callback === "function"){
console.log("다음 작업 실행됨!"); // 확인 누른 뒤 실행됨
}
}👉 콜백 함수를 인자로 전달하는 방식 → 실제 콜백처럼 작동
confirm()으로 조건 콜백 처리
function alertConfirm()
{
if( confirm("정말 삭제하시겠습니까?") ){
alert("삭제");
}else{
alert("삭제안함");
}
}확인/취소 여부에 따라 콜백처럼 조건별 실행 가능. 2개 이상은 불가능
SweetAlert2로 콜백 처리 방법
Swal.fire({
title: "게시물삭제",
text: "삭제 후 복구는 불가능합니다.",
showDenyButton: true,
showCancelButton: true,
showCloseButton: true,
confirmButtonText: "삭제",
denyButtonText: "삭제보류"
}).then((result) => {
if (result.isConfirmed) { // 삭제
Swal.fire("삭제완료!", "", "success");
} else if (result.isDenied) {
Swal.fire("삭제보류", "", "info");
}
});- then() 메소드로 콜백 완벽 지원
- 깜찍한 디자인의 반응형으로 사용자 친환경
- 관련 포스팅
마무리
alert 콜백은 개발 초반에 많은 의문을 줬습니다.
왠지 JavaScript에 있을 것만 같은 기능을 내가 초보라서 못 찾고 있는 거로 생각했지만, 정말 콜백은 지원을 안 한다는 것을 깨닫고, 여러 가지 방법으로 커스텀을 해서 사용했지만 결국 SweetAlert가 전 제일 좋은 거 같습니다. 누가 만들었는지 정말 잘 만들었습니다.
개발용 키보드 추천
“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”