'this' 키워드를 활용한 자바스크립트 워드 클라우드 구현 방법

18 Sep 2023

javascript

자바스크립트에서 ‘this’ 키워드는 현재 실행 중인 함수의 컨텍스트를 참조하는 데 사용됩니다. 워드 클라우드는 주어진 텍스트에서 단어의 빈도를 시각적으로 표현하는 인기있는 데이터 시각화 기술입니다. 이번에는 ‘this’ 키워드를 활용하여 자바스크립트 워드 클라우드를 구현하는 방법에 대해 알아보겠습니다.

단계 1: 텍스트 데이터 준비

워드 클라우드를 생성하기 전에 클라이언트에게서 텍스트 데이터를 받거나, 임의의 텍스트 데이터를 생성해야 합니다. 이 예제에서는 다음과 같은 텍스트 데이터를 사용하도록 하겠습니다.

const textData = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ante id enim aliquet, et vestibulum justo auctor. Morbi nec sollicitudin velit, sed fringilla turpis. Ut placerat suscipit est, vel viverra erat. Nullam tincidunt arcu vel porttitor varius. Phasellus lectus mauris, porta eu bibendum a, consectetur non lectus. Praesent faucibus sapien nec nunc efficitur, in porttitor risus convallis.";

단계 2: 단어 빈도 카운트

다음으로, 텍스트 데이터에서 각 단어의 빈도를 계산해야 합니다. 이를 위해 ‘this’ 키워드를 사용하여 함수 내에서 단어 빈도를 카운트하는 방법을 구현할 수 있습니다.

function countWordFrequency(text) {
  const words = text.split(" ");
  const frequency = {};

  words.forEach(function(word) {
    if (frequency[word]) {
      frequency[word]++;
    } else {
      frequency[word] = 1;
    }
  });

  return frequency;
}

const wordFrequency = countWordFrequency(textData);

단계 3: 워드 클라우드 생성

마지막으로, 단어 빈도를 시각적으로 표현하는 워드 클라우드를 생성합니다. 여기서는 HTML5의 <canvas> 요소를 사용하여 워드 클라우드를 렌더링하는 방법을 보여드리겠습니다.

<canvas id="word-cloud"></canvas>

<script>
const canvas = document.getElementById("word-cloud");
const ctx = canvas.getContext("2d");

const wordFrequency = {
  // 단어 빈도 데이터
};

const maxFontSize = 48;

for (let word in wordFrequency) {
  const frequency = wordFrequency[word];
  const fontSize = Math.floor(Math.log(frequency) * maxFontSize);

  ctx.font = fontSize + "px Arial";
  ctx.fillText(word, Math.random() * canvas.width, Math.random() * canvas.height);
}
</script>

위의 예제에서는 <canvas> 요소를 사용하여 단어를 랜덤한 위치에 그려주고, 단어의 크기는 빈도에 따라 조정하고 있습니다.

이제 ‘this’ 키워드를 활용하여 자바스크립트 워드 클라우드를 구현하는 방법에 대해 알아보았습니다. 워드 클라우드를 다양한 방식으로 커스터마이징하거나 웹페이지에 통합하는 방법을 추가로 연구하실 수 있습니다. Happy coding!