워드 클라우드

Issue

• 사용자 기대평을 바탕으로 셀토스 모양의 워드 클라우드를 생성해야 함

Data

• 사용자 기대평을 어떻게 처리할지부터 결정
  • 백엔드에서 사용자 기대평을 받아 기본 단어들의 개수를 추가
  • 키워드, 가중치 를 가진 객체로 저장

View

• 기존 목표는 직접 구현이었지만 이해하고 구현하려면 오래 걸릴 것 같아 라이브러리를 사용하기로 결정
  • 직접 구현하는 방식 참고 : SVG 를 활용해 WordCloud 만들기
• 워드 클라우드를 구현할 수 있는 여러 방법을 모색함

d3-cloud

• D3.js란 데이터를 기반으로 문서를 조작하기 위한 JavaScript 라이브러리
• 하지만 워드 클라우드의 모양을 결정하는 속성이 없고 width 와 height 만 결정할 수 있는 사각형 모양에 한정되어 있음

react-wordcloud

• 이 라이브러리도 D3-cloud를 활용하여 리액트 환경에 맞춘 것이므로 모양을 설정할 수 없음

echarts-wordcloud

• maskImage 속성을 이용하여 워드 클라우드에 마스크를 적용하여 모양에 맞추어 생성이 가능함
• 마스크로 사용되는 이미지의 흰 부분을 피해 워드 클라우드를 생성하는 방식
  • Yarn Package
• 이 라이브러리를 사용하기로 결정

사용 중 발생한 이슈

• WordCloud PR
• github의 예제대로 했음에도 랜더링이 계속 안되던 현상
• 이미지를 제거하면 원형으로 잘 랜더링이 되었음
• option 을 설정할 때 maskImg.onload 를 추가해 이미지를 찾은 뒤 option을 설정하도록 함