소개

SweetAlert는 사용자에게 보다 예쁘고 상호 작용하는 알림을 제공하는 라이브러리입니다. 이 라이브러리를 사용하여 현재 날짜와 시간을 표시하고 사용자와 상호 작용할 수 있습니다.

SweetAlert 설치

SweetAlert를 사용하기 위해서는 먼저 해당 라이브러리를 HTML에 추가해야 합니다. 아래와 같이 <script> 태그를 사용하여 CDN을 통해 SweetAlert를 추가할 수 있습니다.

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

현재 날짜와 시간 가져오기

Javascript에서 현재 날짜와 시간을 가져오기 위해서는 Date 객체를 사용합니다. 아래와 같이 new Date()를 호출하여 현재 날짜와 시간을 가져올 수 있습니다.

const currentDateTime = new Date();

SweetAlert에 현재 날짜와 시간 표시하기

SweetAlert에 현재 날짜와 시간을 표시하기 위해서는 SweetAlert.fire() 메소드를 사용합니다. 아래와 같은 방법으로 현재 날짜와 시간을 SweetAlert로 표시할 수 있습니다.

Swal.fire({
  title: '현재 날짜와 시간',
  text: currentDateTime.toString(),
  icon: 'info',
  confirmButtonText: '확인'
});

위 코드에서 title은 SweetAlert의 제목을 나타내고, text는 내용을 나타냅니다. icon은 SweetAlert의 아이콘을 지정하는 데 사용되며, confirmButtonText는 확인 버튼의 텍스트를 지정합니다.

SweetAlert의 응답 받기

SweetAlert에서 사용자의 응답을 받기 위해서는 then() 메소드를 사용할 수 있습니다. 아래 코드는 SweetAlert에서 사용자가 확인 버튼을 눌렀을 때의 응답을 받는 예시입니다.

Swal.fire({
  title: '현재 날짜와 시간',
  text: currentDateTime.toString(),
  icon: 'info',
  confirmButtonText: '확인'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('사용자가 확인 버튼을 눌렀습니다.');
  }
});

위의 예시에서 result.isConfirmed는 사용자가 확인 버튼을 눌렀는지 여부를 나타내는 변수입니다. 사용자가 확인 버튼을 눌렀을 때에만 해당 블록 내부의 코드가 실행됩니다.

결론

SweetAlert를 사용하여 현재 날짜와 시간을 예쁘게 표시하고 사용자와 상호 작용할 수 있습니다. 이를 통해 애플리케이션의 사용자 경험을 개선하고 보다 유용한 기능을 구현할 수 있습니다.

참고 자료

• SweetAlert2 공식 문서