SweetAlert는 사용자에게 예쁜 알림 창을 보여주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 모달창과 비슷한 형태의 다이얼로그를 손쉽게 만들 수 있습니다. 이번 글에서는 SweetAlert와 함께 데이터를 저장하고 로드하는 기능에 대해 살펴보겠습니다.

데이터 저장하기

SweetAlert에서 데이터를 저장하기 위해서는 먼저 SweetAlert 다이얼로그를 열고 사용자로부터 입력을 받아야 합니다. SweetAlert는 Swal.fire() 함수를 제공하여 다이얼로그를 생성할 수 있습니다. 아래 예제 코드를 살펴보세요:

Swal.fire({
  title: '데이터 저장하기',
  html: '<input id="input" class="swal2-input">',
  showCancelButton: true,
  confirmButtonText: '저장',
  cancelButtonText: '취소',
}).then((result) => {
  if (result.isConfirmed) {
    const inputData = document.getElementById('input').value;
    // 여기에서 입력 받은 데이터를 저장하는 로직을 작성합니다.
    console.log('입력 데이터:', inputData);
    Swal.fire('저장되었습니다!', '', 'success');
  }
});

위 코드에서는 SweetAlert의 html 옵션을 사용하여 입력 필드를 생성하고, confirmButtonText와 cancelButtonText를 사용하여 확인 및 취소 버튼을 설정했습니다. 사용자가 데이터를 입력하고 확인을 클릭하면 입력된 데이터를 변수에 저장하고, 저장된 데이터를 콘솔에 출력하는 예제입니다.

데이터 로드하기

SweetAlert를 사용하여 데이터를 로드하기 위해서도 Swal.fire() 함수를 사용합니다. 데이터를 로드하기 전에 먼저 데이터를 가져와야 합니다. 아래 예제 코드를 살펴보세요:

const savedData = '로드된 데이터입니다.'; // 여기에서 데이터를 가져오는 로직을 작성합니다.

Swal.fire({
  title: '데이터 로드하기',
  text: savedData,
  confirmButtonText: '확인',
});

위 코드에서는 savedData라는 변수에 미리 로드된 데이터를 저장하고, SweetAlert의 text 옵션을 사용하여 데이터를 보여줍니다. 사용자가 확인을 클릭하면 다이얼로그가 닫힙니다.

마무리

이번 글에서는 SweetAlert를 사용하여 데이터를 저장하고 로드하는 기능에 대해 알아보았습니다. SweetAlert는 사용하기 쉽고 다양한 옵션을 제공하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. SweetAlert 공식 문서를 참조하여 더 많은 기능과 옵션을 살펴보세요!