프로젝트 도중 생긴 문제 고치기!

Frel·2022년 5월 18일
0

내일 배움 캠프

목록 보기
23/35
post-custom-banner

오늘부터 머신러닝 팀 프로젝트를 시작하였습니다.

프로젝트에서 결과 창 부분을 맡게 되어서 진행하던 도중 결과 창에 그래프 기능이 필요했습니다.
그래프 기능을 써본 적이 없어서 찾아보니 javascript에서 사용하는 chart.js 기능을 찾아서
한번 페이지에 기능을 사용해 보았습니다.

HTML 부분

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="bar-chart" width="300" height="230"></canvas>

javascript 부분

new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
});
``
하지만 위에 코드를 넣고 실행을 시켰는데 실행 페이지에 차트가 나오지 않아서 당황했습니다..
오류는 뜨지 않고 화면에 뜨지 않는다고 하길래 무슨 일이지..? 하고 방법을 찾던 도중 팀원들에게
부탁을 해서 방법을 찾던 도중 다른 팀원분이 화면에 띄우는데 성공하셨다는 소식을 들었습니다.
해결한 팀원에게 방법을 물어보니까 예전에 오류를 해결하면서 발견을 했다고 말씀해 주시면서

<script type="module" src="../static/scripts/result.js"></script>

위의 코드를 넣어보라고 하셨습니다. 이 코드를 js에다가 넣으니까 바로 화면에 차트가 정상적으로 떴습니다.

저는 경로 문제인 줄 알았으나 해당 코드를 넣지 않아서 작동하지 않았던 것입니다.

위에 코드가 javascript의 중요한 부분을 가지고 있는 거 같습니다. 다음에는 js를 사용하다가
작동이 안 된다면 module 코드를 넣어보고 실행시켜봐야겠습니다.




profile
자기개발을 해서 발전하는 미래의 개발자
post-custom-banner

0개의 댓글