[Tistory] sweetAlert2 라이브러리 변경

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

[sweetAlert2 사용이유]

1. 사용자 경험 향상

• 모던한 디자인: SweetAlert2는 모던하고 매력적인 디자인을 제공하여 사용자의 관심을 끌고, 사용자 경험을 개선한다.

• 애니메이션 및 인터랙션: 다양한 애니메이션과 인터랙션 효과를 지원하여 알림이 더 눈에 띄고 자연스럽다.

2. 간편한 사용

• 간결한 API: 복잡한 설정 없이 간단하게 알림을 생성할 수 있는 직관적인 API를 제공한다.

• 쉽고 직관적인 설정: 다양한 옵션을 통해 알림을 쉽게 커스터마이즈할 수 있다.

3. 다양한 기능

• 다양한 아이콘: success, error, warning, info, question 등 여러 종류의 아이콘을 지원한다.

• 커스터마이징: 버튼 텍스트, 버튼 스타일, 타이틀, 텍스트, 이미지 등 많은 요소를 커스터마이즈할 수 있다.

• 입력 기능: 텍스트 입력 필드를 추가하여 사용자 입력을 받을 수 있다.

4. 비동기 처리 지원

• Promise 지원: Swal.fire()는 프로미스를 반환하므로 async/await와 함께 비동기 작업을 쉽게 처리할 수 있다.

• 비동기 작업 후 알림: 서버 응답이나 비동기 작업이 완료된 후 알림을 표시할 때 유용하다.

5. 다양한 통합 가능성

• 모바일 및 데스크탑 호환: 다양한 화면 크기와 디바이스에서 잘 작동한다.

• 스타일과 테마: CSS를 통해 스타일을 쉽게 커스터마이즈하고, 사이트의 테마와 맞출 수 있다.

6. jQuery와 독립적 사용

• jQuery 의존 없음: SweetAlert2는 jQuery와 독립적으로 사용할 수 있어, jQuery를 사용하지 않는 프로젝트에서도 효과적으로 사용할 수 있다.

[사용 예시]

1. 간단한 성공 알림

Swal.fire({
    title: '성공!',
    text: '작업이 완료되었습니다.',
    icon: 'success',
    confirmButtonText: '확인'
});

2. 경고 알림에 입력 필드 추가

Swal.fire({
    title: '입력해 주세요',
    input: 'text',
    inputPlaceholder: '여기에 입력하세요',
    icon: 'question',
    confirmButtonText: '제출',
    showCancelButton: true,
    cancelButtonText: '취소'
}).then((result) => {
    if (result.value) {
        // 사용자가 입력한 값 처리
        console.log(result.value);
    }
});