이번에는 SweetAlert 라이브러리를 사용하여 팝업 창을 구현하고, 파일을 다운로드하는 기능을 추가해보겠습니다.

SweetAlert란?

SweetAlert는 사용자에게 화려하고 사용하기 쉬운 알림창을 제공하는 JavaScript 라이브러리입니다. 다양한 스타일의 모달창과 경고창을 커스텀할 수 있어 많은 개발자들에게 사랑받고 있습니다.

SweetAlert 설치하기

먼저 SweetAlert를 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 터미널에 입력합니다.

npm install sweetalert2

cdn을 사용하는 경우, html 파일 내에 아래 스크립트 태그를 추가합니다.

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

SweetAlert로 팝업 창 띄우기

팝업 창을 띄우기 위해서는 SweetAlert의 fire() 함수를 사용합니다. 아래 예제는 기본적인 사용법을 보여줍니다.

Swal.fire({
  title: '팝업 제목',
  text: '팝업 내용',
  icon: 'warning',
  confirmButtonText: '확인'
});

다양한 옵션을 설정하여 팝업 창을 더욱 자유롭게 커스텀할 수 있습니다. 자세한 내용은 SweetAlert 공식 문서를 참고하세요.

파일 다운로드 기능 추가하기

SweetAlert를 사용하여 파일 다운로드 기능을 추가할 때에는 a 태그를 활용합니다. 아래 예제는 SweetAlert 팝업 창에서 “다운로드” 버튼을 누르면 파일을 다운로드하도록 구현한 코드입니다.

Swal.fire({
  title: '파일 다운로드',
  text: '파일을 다운로드하시겠습니까?',
  icon: 'info',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '다운로드',
}).then((result) => {
  if (result.isConfirmed) {
    const downloadLink = document.createElement('a');
    downloadLink.href = '파일 URL';
    downloadLink.download = '파일명.pdf';
    downloadLink.click();
  }
});

위 코드에서 “파일 URL”과 “파일명.pdf”는 실제 파일의 URL과 파일명으로 대체해야 합니다.

마무리

SweetAlert를 사용하면 사용자들에게 직관적이고 멋진 팝업 창을 제공할 수 있습니다. 파일 다운로드 기능을 추가하여 더욱 유용한 팝업 창을 구현해보세요. SweetAlert의 다양한 옵션과 기능을 활용하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

이 문서는 SweetAlert2 버전 10.0.0을 기준으로 작성되었습니다.