패스트캠퍼스 챌린지 48일차

차트 라이브러리 만들어보기 - 차트 라이브러리 구현

 

index.js 파일에서 인스턴스로 만들어서 사용하는 chart.js 부분

import template from './chart.template';

const defaultOptions = {
  percent: 0,
  duration: 1000,
  frame: 30,
}

/**
 * Chart 클래스
 */
class Chart {
  #template = template;
  #el;
  #percent;
  #duration;
  #label;
  #frame;
  #handle;

  /**
   * 
   * @param {string} container - 마운트될 DOM 컨테이너 셀렉터
   * @param {string} data - 옵션 데이타 duration, frame
   * @example
   * new Chart('#root', {
   *   duration: 2000,
   *   frame: 20,
   * });
   */
  constructor(container, data = {}) {
    const { duration, frame, percent } = {...defaultOptions, data};

    this.#duration = duration;
    this.#frame = frame;
    this.#percent = percent;

    this.#el = document.querySelector(container);
  }

  /**
   * 퍼센트를 설정합니다.
   */
  set percent(per) {
    this.#percent = per;
  }

  /**
   * 애니메이션 시간을 ms 단위로 설정합니다.
   */
  set duration(dur) {
    this.#duration = dur;
  }

  /**
   * 에니메이션이 실행 될 때 초당 프레임을 설정합니다.
   */
  set frame(fr) {
    this.#frame = fr;
  }

  set label(text) {
    this.#label = text;
  }
  /**
   * 소스 데이타를 설정합니다.
   * @param {Array} source - 2차원 배열로 제공합니다.
   */
  setDataSource(source) {

  }
  /**
   * UI 업데이트를 수행합니다.
   */
  render() {
    this.#el.innerHTML = this.#template({
      percent: this.#percent * 10,
      duration: `${this.#duration / 1000}s`,
      label: this.#label,
    });

    const maxLoop = Math.floor(this.#duration / (1000/this.#frame));
    let loopCount = 0;

    this.#handle = setInterval(() => {
      loopCount++;

      this.#el.querySelector('#progress').innerHTML 
        = loopCount > maxLoop ? `${this.#percent}%` : `${Math.floor(this.#percent / maxLoop) * loopCount}%`;

      if (loopCount > maxLoop) {
        clearInterval(this.#handle);
      }
    }, 1000/this.#frame);
  }
}
 
export default Chart;

화면은 기존 방식과 동일하게 chart.template.js를 템플릿으로 가지고 import해서 사용한다. defaultOprtion 값은 아무것도 설정하지 않았을 때 가질 값을 정의한다.

 

Chart 클래스를 보면 #이 포함된 변수는 private 형태로 외부의 접근을 제한하고 클래스 내부에서만 사용할 수 있다. 차트 라이브러리에서 설정 되는 값으로는 duration, frame, percent 등으로 차트의 각각의 속성 값들을 정의한다. 각각의 프로퍼티에 접근제한을 걸어두었기 때문에 setter와 getter를 통해 값을 반환하고 수정한다. 그리고 여느 다른 클래스 구조와 같이 render 메소드를 통해서 화면을 렌더링한다. render 메소드 안에 el(Element를 지정)태그를 통해서 템플릿을 만들고 차트가 동적으로 생성될 것이므로 지정해 놓은 duration와 frame을 기반해서 setInterval() 기능을 사용한다. setInterval()은 몇 초마다 실행되는 기능이므로 clearInterval() 함수로 꼭 끝나는 지점에 사용해야 한다. 그렇지 않으면 메모리의 낭비가 발생한다. 

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential