두부두목

[React] ApexChart 사용하기

두부두목 — Mon, 25 Sep 2023 22:19:15 +0900

️ 공식 홈페이지

ApexCharts.js - Open Source JavaScript Charts for your website

ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

apexcharts.com

설치

Installing via npm

npm install --save react-apexcharts apexcharts

Usage ✍️

import ApexCharts from 'apexcharts'

return (
	<div>
  	  <ApexChart />
	</div>
)

그냥 컴포넌트처럼 쓰면 된다.

자세한 리액트 예시는 아래 공식문서에서 확인할 수 있다.

https://apexcharts.com/docs/react-charts/

React-ApexChart - A React Chart wrapper for ApexCharts.js

Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visualizations in your react applications.

apexcharts.com

porps 로 전달해줄 수 있는 것들은 아래와 같다.

type 은 차트 타입을 말하는 것이다.

series 는 차트에 표시하려는 데이터를 말한다.

type 이 array 이므로 아래와 같은 형태로 쓰면 된다.

      series: [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
      },
      {
        name: "Data2",
        data: [1, 4, 15, 41, 69, 32, 39, 31, 48]
      }],

width 랑 height 는 그래프의 크기를 설정할 수 있다.

optins 는 차트의 모든 선택적 구성이 들어가게 된다.

예제

import Chart from "react-apexcharts";


function App() {
  return (
	<ApexChart
          type="line"
          series= {[
           	 { name: "Price", data:[1000, 2000, 3000]},
		 { name: "Price2", data:[1500, 1000, 2500]},
          ]}
          options={{
            theme: { mode: "dark" },
            chart: {
              height: 300,
              width: 500,
              toolbar: { show: false },
              background: "transparent",
            },
            stroke: { curve: "smooth", width: 4 },
            grid: { show: false },
            yaxis: { show: false },
            xaxis: {
              labels: { show: false },
              axisTicks: { show: false },
              axisBorder: { show: false },
              categories: [1660004640, 1660091040, 1660177440],
              type: "datetime",
            },
            fill: {
              type: "gradient",
              gradient: { gradientToColors: ["blue"], stops: [0, 100] },
            },
            colors: ["red"],
            tooltip: {
              y: { formatter: (value) => `$ ${value.toFixed(2)}` },
            },
          }}
        />
  );
}

export default App;

위의 예제와 같이 chart option 으로 다양한 것을 조정할 수 있다.

참고로 yaxis 를 데이터 값에 따라 상대적으로 변경시키고 싶다면 max, min 값을 안 적어주면 자동으로 상대적인 형태로 맞춰진다.

이 아래에도 많은 옵션이 있다...

공식문서의 options 를 확인해보면 여러 설정을 어떻게 하는지에 대해 나와있다.

[JavaScript] 자바스크립트 TypeError: Cannot read property 'length' of undefined 에러 해결방법

두부두목 — Wed, 23 Aug 2023 16:36:44 +0900

javascript 에서 배열에 length 속성을 사용하면 배열의 데이터 개수(배열의 길이)를 반환하여 이를 확인할 수 있다.

해당 메서드를 사용하다보면 위와 같은 에러가 발생하기도 한다.

위와 같은 오류가 나타나는 대부분의 이유는 요소 개수를 반환할 배열이 없거나 잘못된 것이다.

따라서 length 속성을 사용하기 전에 해당 배열이 존재하는지 먼저 확인하면 된다.

console.log 를 자주 찍어봐야 하는 이유이다.

SCSS 미디어쿼리(Media Query)

두부두목 — Tue, 22 Aug 2023 21:02:05 +0900

오늘의집 클론코딩 프로젝트 하면서 완전히 반응형은 아니더라도 약간의 타블렛, 모바일 환경은 고려하고 싶었다.

그와 관련해서 scss 에서 변수와 믹스인이라는 것을 알게 되었다.

변수(Variables)

앞부분에 $ 를 붙이면 변수를 선언하여 사용할 수 있다.

$black: #000000;
$font-default: 1.2rem;

아래와 같이 사용하면 된다.

body {
  font-size: #{$font-default};
}

믹스인(Mixins)

믹스인은 CSS 를 묶어서 재사용할 수 있는 모듈로 만들어 준다.

@mixin card-view {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

사용은 아래처럼.

div {
  @include card-view;
}

SCSS 미디어쿼리 작성

앞서 제시한 믹스인과 변수를 활용하여 미디어쿼리를 작성할 수 있다.

변수 작성 ✍️

모바일, 태블릿, 데스크톱 세 환경을 대응하도록 변수를 선언한다.

variables.scss

$breakpoint-mobile: 320px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

styles 안에 common, reset, variables 파일이 있다.

추가적으로 파일 앞에 언더바(_) 를 붙이는데, 이는 파일단위로 분리되어 컴파일 되지 않게 하기 위함이다.

변수만 따로 저장해놓을 파일이기에 별도의 CSS 파일로 컴파일될 필요가 없기 때문이다.

따라서 언더바를 파일명 앞에 붙이면, 성능 및 관리 상의 이득을 얻을 수 있다.

믹스인 작성 ✍️

미디어 쿼리를 이용하기 쉽도록 믹스인으로 작성한다.

먼저, 좀 전에 작성한 변수를 불러와 import 해준다.

mixin.scss

@import "./variables";

미디어 쿼리 내부에는 믹스인이 사용될 때 넘겨받은 content가 들어가도록 했다.

@import "./variables";

@mixin mobile {
    @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$breakpoint-desktop}) {
        @content;
    }
}

@mixin moblie-font {
    font-size: 1.3rem;
    line-height: 2rem;

}

추가적으로 max-width에서는 -1px를 해줘야 해당 너비에서 정상 동작한다.

믹스인을 활용한 미디어 쿼리 ✍️

main.scss

@import "../../Styles/mixins";

@include mobile {
  .img-card {
    width: 100px;
  }
}

@include tablet {
  .img-card {
    width: 200px;
  }
}

@include desktop {
  .img-card {
    width: 300px;
  }
}

@include media(mobile, tablet, desktop){
   padding-top: 80px;
   padding-bottom: 80px;
}

(추가) calc() 안에서 scss 변수 사용하기

변수에 #{}을 둘러준다.

// bad
.problem {
  width: calc(100% - $example);
}

// good
.problem {
  width: calc(100% - #{$example});
}

출처:

https://chaewonkong.github.io/posts/scss-media-query.html

https://ryusm.tistory.com/116

img 와 div 태그

두부두목 — Tue, 22 Aug 2023 15:38:36 +0900

기본적으로 HTML 의 성질을 알아보자.

✅ HTML 의 특징 파악하기

블록 요소와 인라인 요소

웹 브라우저의 공간 유무와 상관없이 사용할 때마다 줄 바꿈되는 태그가 있다.

이러한 태그로 작성한 코드를 블록 요소(block element) 라고 한다.

이와 반대로 공간이 부족할 때만 줄 바꿈되는 태그가 있는데,

이런 태그로 작성한 코드를 인라인 요소(inline element) 라고 한다.

블록 요소 - div (공간 분할 태그)

코드를 작성하다 보면 구조를 더 깔끔하게 작성하여 쉽게 레이아웃을 구성하기 위해 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.

HTML 에서는 이런 그룹 짓기 작업을 div 태그와 span 태그로 수행한다.

div 태그는 주로 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

인라인 요소 - img (이미지 넣기)

사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.

아래는 이미지 예시와 함께 둘의 차이점을 정리하도록 하겠다.

1. div에 맞게 이미지가 나오는 상황

<div> 태그 선택 시

<img> 선택 시

아무런 스타일도 주지 않은 <div> 영역 선택 시 이미지보다 약간은 크지만 별다른 차이 없이 이미지가 잘리지 않고 그대로 출력됨을 알 수 있다.

2. 이미지가 div 밖으로 튀어나오는 상황

<div> 태그 선택 시

<img> 선택 시

<div> 가 <img> 를 감싸줌에도 불구하고 이미지가 div 크기와 상관 없이 원래의 크기 그대로 출력되고 있다.

3. 이미지가 div에 맞게 출력되는 상황 (비율 깨짐)

- div에 width 50px, height 80px에서, img에 width: 100%; height: 100%를 줄 시

    <div style="width: 50px; height: 80px;">
        <img src="test.png" style="width: 100%; height: 100%;">
    </div>Copy

[ 결과화면 ]

결과 : 비율이 망가진 채료 해당 div 크기에 딱 맞게 출력되는 것을 볼 수 있다.

4. 이미지가 div에 잘라 져서 출력되는 상황 (비율 안 깨짐)

- object-fit:cover; 를 사용해야한다.

    <div style="width: 50px; height: 80px;">
        <img src="test.png" style="width: 100%; height: 100%; object-fit:cover;">
    </div>Copy

[ 결과화면 ]

참고 :

https://i5i5.tistory.com/762

[HTML] img와 div 태그에 대한 고찰 (사이즈 범위 벗어나거나/꽉차거나)

먼저, img 태그는 inline요소이고, div태그는 block요소이다. 이 글은 img태그와 div태그 사이의 관계를 정리하는 글이다. div 태그안에 img 태그가 있다면, 크기 관계가 애매해진다. style을 활용하여, div

i5i5.tistory.com

코딩 자율학습 HTML + CSS + 자바스크립트