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

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

 

import template from './index.template';
import Chart from './lib/chart';

function main() {
  const conatiner = document.querySelector('#root');
  conatiner.innerHTML = template();

  const chart = new Chart('#chart');

  chart.percent = 75;
  chart.duration = 1000;
  chart.label = '충전중'

  chart.render();
}

document.addEventListener('DOMContentLoaded', main);

 

 

코드 진행은 기존의 구조와 비슷하다. index.js는 파일과 index.template.js라는 파일로 구성된다. 다른 웹앱과 마찬가지로 index.js 파일은 인스턴스를 생성하고 렌더링을 하는 등의 기능과 index.template.js는 html 태그들로 이루어진 template 파일이다. 템플릿 엔진은 handlebars를 사용한다.

 

const template = `
    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
    <!-- Container -->
    <div class="container mx-auto">
      <div class="flex justify-center px-6 my-12 ">
        <!-- Row -->
        <div class="w-full xl:w-3/4 lg:w-11/12 shadow-xl flex">
          <!-- Col -->
          <div
            class="w-full h-auto bg-gray-400 hidden lg:block lg:w-1/2 bg-cover rounded-l-lg"
            style="background-image: url('https://images.unsplash.com/photo-1602918386084-58983c3bafac?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80')"            
          ></div>
          <!-- Col -->
          <div class="w-full lg:w-1/2 bg-white p-5 rounded-lg lg:rounded-l-none p-16">

            <h3 class="pt-4 text-2xl text-center mb-20">Javascript & Typescript Essential Chapter 5 - Chart</h3>

            <div id="chart"></div>
          </div>
        </div>
      </div>
    </div>
</div>
`;

export default Handlebars.compile(template);

main이라는 함수를 가지고 DOM 로드 이벤트를 통해 해당 페이지가 전부 로딩 됐을 때 main 함수를 실행한다. main 함수의 내용은 컨테이너의 템플릿을 지정하고 Chart라는 클래스에서 chart 인스턴스를 만들고 chart의 속성들을 지정해준 뒤 렌더링하는 과정을 거친다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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