[javascript] SweetAlert와 워드 클라우드 생성 기능

24 Nov 2023

javascript

SweetAlert는 사용자에게 예쁜 경고창을 보여주는 JavaScript 라이브러리입니다. 워드 클라우드는 텍스트 데이터를 시각화하여 가장 중요한 단어들을 강조하는 기능입니다. 이번 글에서는 SweetAlert와 워드 클라우드를 함께 사용하여 예쁜 경고창과 함께 텍스트 데이터를 시각화하는 방법을 알아보겠습니다.

SweetAlert 라이브러리 설치

SweetAlert 라이브러리를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드해야 합니다. 패키지 매니저를 사용한다면, 다음과 같은 명령어를 실행하여 SweetAlert를 설치할 수 있습니다.

npm install sweetalert2

스크립트 태그를 사용해서 SweetAlert를 직접 불러올 수도 있습니다.

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

SweetAlert로 경고창 만들기

SweetAlert를 사용하여 경고창을 만들기 위해서는 Swal.fire() 함수를 호출하면 됩니다. 아래는 기본적인 경고창을 만들기 위한 코드입니다.

Swal.fire({
  title: '경고!',
  text: '이 작업을 진행하시겠습니까?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '네',
  cancelButtonText: '아니오'
}).then((result) => {
  if (result.isConfirmed) {
    // 확인 버튼을 눌렀을 때의 동작
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // 취소 버튼을 눌렀을 때의 동작
  }
});

title과 text는 경고창에 표시될 제목과 내용을 설정하는 옵션입니다. icon은 경고창 옆에 표시될 아이콘의 종류를 설정하는 옵션입니다. showCancelButton은 취소 버튼을 보여줄지 여부를 설정하는 옵션입니다. confirmButtonText와 cancelButtonText는 각각 확인 버튼과 취소 버튼의 텍스트를 설정하는 옵션입니다.

워드 클라우드 생성 기능 추가하기

워드 클라우드는 다양한 JavaScript 라이브러리를 통해 구현할 수 있습니다. 이 예시에서는 wordcloud2.js 라이브러리를 사용하여 워드 클라우드를 생성합니다. 우선 해당 라이브러리를 다운로드하고 HTML 파일에 스크립트 태그로 불러옵니다.

<script src="wordcloud2.js"></script>

그리고 스크립트 태그 안에서 wordcloud() 함수를 호출하여 워드 클라우드를 생성합니다. 다음은 기본적인 워드 클라우드 생성 코드입니다.

var words = [
  { text: 'Hello', weight: 13 },
  { text: 'world', weight: 10 },
  { text: 'JavaScript', weight: 8 },
  // ...
];

wordcloud(document.getElementById('wordcloud'), {
  list: words
});

words 배열에는 텍스트와 가중치를 설정한 객체들을 넣습니다. text는 표시될 단어를 말하고, weight는 해당 단어의 가중치를 말합니다. wordcloud() 함수를 호출할 때는 워드 클라우드를 표시할 요소와 list 옵션에 words 배열을 전달합니다.

SweetAlert와 워드 클라우드를 함께 사용하기

이제 SweetAlert와 워드 클라우드 기능을 함께 사용하는 방법을 알아보겠습니다. SweetAlert에서 확인 버튼을 누르면 워드 클라우드가 생성되도록 작성해보겠습니다.

Swal.fire({
  title: '워드 클라우드 보기',
  html: '<div id="wordcloud"></div>',
  confirmButtonText: '확인',
  onOpen: () => {
    wordcloud(document.getElementById('wordcloud'), {
      list: words
    });
  }
});

html 옵션에는 워드 클라우드를 표시할 요소를 지정할 수 있습니다. onOpen은 SweetAlert가 열릴 때 호출되는 콜백 함수입니다. onOpen에서는 wordcloud() 함수를 호출하여 워드 클라우드를 생성합니다.

이제 SweetAlert와 워드 클라우드 기능이 함께 동작하는 예쁜 경고창을 만들었습니다. 사용자에게 경고를 주고 동시에 텍스트 데이터를 시각화하여 보여줄 수 있어 유용하게 활용할 수 있습니다.

결론

이번 글에서는 SweetAlert와 워드 클라우드 생성 기능을 함께 사용하는 방법을 알아보았습니다. SweetAlert를 통해 예쁜 경고창을 만들고, 워드 클라우드를 사용하여 텍스트 데이터를 시각화할 수 있습니다. 이러한 기능을 활용하여 사용자에게 직관적인 경고를 주고 동시에 중요한 정보를 시각화하여 제공할 수 있습니다.

참고 자료

SweetAlert: https://sweetalert2.github.io/
wordcloud2.js: https://github.com/timdream/wordcloud2.js