익명의 개발노트

[Wecode 46일차] chart.js, axios, css 이미지 마스크삽입 등 본문

코딩일기/TIL

[Wecode 46일차] chart.js, axios, css 이미지 마스크삽입 등

캡틴.JS 2019. 7. 17. 22:11
반응형

1. chart.js는 그래프 라이브러리 중 하나이다.  highchart.js, d3.js 등 여러 종류의 라이브러리가 있다.

 

기본적으로 canvas에 그리며, 반응형을 사용하고자 할때는 부모태그로 감싸주면 된다. 자세한 내용은 공식문서에 있지만,

 

아래내용이 전부다. 다만 옵션부분은 공식문서 참고해서 기본값으로 되어있는 부분은 설정을 바꿔주면서 사용하면 된다.

import React, {Component} from 'react';
import Chart from 'chart.js';
import './App.css';

class App extends Component {
 
  componentDidMount(){
    var ctx = document.getElementsByClassName("ts_canvas")[0];
    var myChart = new Chart(ctx,{
      type: 'line',  //bar, radar etc..
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [13, 19, 3, 5, 12, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',+
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)', 
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1  //chart border : px
          },  //여기까지가 한싸이클 추가로 넣고 싶으면 넣어도 됨.
          {
            label : "# of Votes2",
            data : [15,1,5,8,10,7]
          }]
      },
      options: {
          scales: {
              yAxes: [{   //y축
                  ticks: {
                      beginAtZero: true,  //0부터 시작하는지.
                  }
              }]
          },
          title:{
            display:true
          },
          devicePixelRatio : false, // true면 흐리게나옴, 윈도우의 기본 devicePixelRatio를 재정의, 1이외의 값으로 설정하면 캔버스 크기가 컨테이너 크기에 비례하여 해당양 만큼 조정됨.
          responsive : true,
          maintainAspectRatio : false, //(width / height)크기를 조정할 때 원본 캔버스 종횡비 유지 . true면 종/횡 같이 비율에 맞춰서 조절
          intersect : true,   // 이거는 아직 이해못했음.. 뭔가 교차하면 정보 보여주는 것같은데...
          mode : 'nearest',  //
          events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'], //마우스 이벤트 방법설정
          legend : {
            labels : {
              fontColor : "red"  //폰트칼라는 legend안에 labels에서 선언함.
            }
          },
          animation:{
            easing : "easeInElastic",   //효과
            duration: 1000,  //지속시간
          },
          layout : {
            padding: {
              left: 10,
              right: 10,
              top: 0,
              bottom: 0
          }
          }
        }
  })

  // myChart.canvas.parentNode.style.width = "90%";  //이렇게 직접적으로 크기 조절할 수도 있음. maintainAspectRatio : false로 해야 따로 컨트롤 가능
  // myChart.canvas.parentNode.style.height = "30%";
  console.log("1",myChart);
  // myChart.defaults.global.animation.duration =5000;
}
  
  render(){
  return (
    <div className="root"> 
      <canvas className="ts_canvas" width="400" height ="400" ></canvas>
    </div>
  );
}
}

export default App;

2. css로 이미지 마스크 삽입하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      h1 {
        color: transparent;
        text-align: center;
        font-size: 8em;
        font-family: Arial;
        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJh7rxCjyu3d8gjEoutghty-bNFcdW8eWV_FQIAhuW0wLI4Si8");

        -webkit-background-clip: text;
      }
    </style>
  </head>
  <body>
    <h1>CSS TEXT MASKING</h1>
  </body>
</html>

3. canvas로 이미지 만들기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script type="application/javascript">
      function draw() {
        const canvas = document.getElementById("canvas"); // 캔버스가 될 Box를 선택

        //getContext() 메소드의 존재여부를 활용하여 지원하지 않는 브라우저에 대한 처리를 할 수 있다.
        if (canvas.getContext) {
          let ctx = canvas.getContext("2d");

          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(50, 50, 50, 50); // X , Y 좌표 그리고 width height 값

          ctx.fillStyle = "rgb(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 50, 50);

          ctx.beginPath(); // 원 그리기 시작
          ctx.fillStyle = "lightblue";
          ctx.arc(150, 75, 70, 0, 2 * Math.PI); // x축, y축, 반경, 각도시작점, 각도 종료점   파이가 반지름, 즉 *2 를 해야 원의 지름이 구해지고 그만큼 그려진다.
          ctx.fill();
          ctx.closePath();
        } else {
          alert("캔버스가 지원되지 않는 브라우저입니다.");
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas
      id="canvas"
      width="200"
      height="200"
      style="border:1px solid #000000;"
    ></canvas>
  </body>
</html>

4. fetch대신 axios 

axios는 프로미스 기반의 HTTP통신 라이브러리이다. async await을 사용할 수도 있으며, fetch 보다 간결하다.

 axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })

fetch와 다른점은 fetch가 중간에 res.json()을 받아오는데, axios는 그게 없다. 간결하다.

 

5. AWS 배포시 기존서버 종료 후 재시작.

터미널에서 ps aux | grep server.js 사용하면 작동중인 서버목록이 뜬다.

ubuntu 23546 0.0 2.3 43264 23204 ? S Jul15 0:21 /home.....

여기서 ubuntu 다음에 써있는 23546이라는 숫자를 사용해서 해당 서버를 죽인 후 

kill 23546

그 후에 처음 command를 사용하여 AWS 서버를 돌리면 변경사항이 반영된 상태로 서버를 돌린다.

반응형

'코딩일기 > TIL' 카테고리의 다른 글

[Wecode 49~50일차] rebase, multi select-box  (0) 2019.07.21
[Wecode 47~48일차] 자료구조, chart.js 심화  (0) 2019.07.19
[Wecode 45일차] git flow, unit test, git-rebase  (0) 2019.07.16
[Wecode 41일차] 새로고침, 정규표현식 등 삽질  (2) 2019.07.12
[Wecode 40일차] 절대경로설정법, 컴포넌트분리, 소셜로그인기능  (0) 2019.07.11
'코딩일기/TIL' Related Articles more
Comments