전체 글 썸네일형 리스트형 리액트로 도넛모양차트 하이차트, +annotation 옵션 구현 import { useEffect, useRef } from 'react'; import styled from '@emotion/styled'; import { DashboardData } from '~/interfaces/Dashboard'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; interface Props { items: DashboardData[]; title: string; total:number; } function PieChart({ items, title,total }: Props) { const randomColors = items .map((item) => {.. 더보기 리액트로 이미지 다운로드(html-to-image) import { useEffect, useRef } from 'react'; import { Doughnut } from 'react-chartjs-2'; import styled from '@emotion/styled'; import { DashboardData } from '~/interfaces/Dashboard'; import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js'; import { toPng } from 'html-to-image'; ChartJS.register(ArcElement, Tooltip, Legend); interface Props { items: DashboardData[]; } function Donu.. 더보기 리액트로 도넛차트 구현하기 전체코드 import { useEffect } from 'react'; import { Doughnut } from 'react-chartjs-2'; import styled from '@emotion/styled'; import { DashboardData } from '~/interfaces/Dashboard'; import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js'; ChartJS.register(ArcElement, Tooltip, Legend); interface Props { items: DashboardData[]; } function DonutChart({ items }: Props) { useEffect(() =>.. 더보기 Mac에서 nginx로 리액트 배포 1. Homebrew 설치: Homebrew는 Mac에서 패키지 관리자입니다. 터미널에서 다음 명령어를 실행하여 Homebrew를 설치합니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. Nginx 설치: Homebrew를 사용하여 Nginx를 설치합니다. 터미널에서 다음 명령어를 실행합니다. brew install nginx 3. Nginx 실행: Nginx를 실행하려면 다음 명령어를 입력합니다. sudo nginx sudo nginx -t 상태확인을 해보니까 내 nginx위치는 nginx: the configuration file /opt/homebrew/etc/ngin.. 더보기 [JSZip 라이브러리] 이미지 파일을 압축된 폴더로 다운로드 1. html-to-image 라이브러리로 이미지를 만든 후 2.JSZip 라이브러리를 사용하여 파일을 압축한 다음 다운로드 할 수 있습니다. 터미널에서 다음 명령어를 실행하여 JSZip 라이브러리를 설치합니다. npm install jszip saveImage() 함수에서 JSZip을 import 합니다. import JSZip from 'jszip'; JSZip 라이브러리를 CDN으로 가져오는 방법 const zip = new JSZip(); 그러나 CDN 방식으로 라이브러리를 가져오는 것은 인터넷 연결에 의존하기 때문에 네트워크 지연이나 연결 불안정성에 따라 성능이 달라질 수 있습니다. 따라서 가능하면 npm을 사용하여 로컬에 라이브러리를 설치하고 import 구문을 사용하여 가져오는 것이 좋습니다.. 더보기 useQuery에서 staleTime과 keepPreviousData 차이 const { data: queryData, isLoading } = useGetAlbums(); const fetch = () => { return customAxios.get('api/albums/'); }; function useGetAlbums(){ const query = useQuery('useAbums', fetch(),{ // keepPreviousData: true, }); return query; } 또는 const { data: queryData, isLoading } = useGetAlbums({ staleTime: 300000 }); StaleTime과 keepPreviousData는 React Query의 기능 중 하나로서, 각각 장단점이 있습니다. staleTime의 장점은 다.. 더보기 Vue에서 webpackPrefetch 장점 단점 Vue.js에서 라우터의 webpackPrefetch는 코드 스플리팅(Code Splitting)을 사용하여 애플리케이션 성능을 개선하는 데 도움이 되는 기능입니다. webpackPrefetch는 Vue 라우터에 의해 로드되는 라우트 컴포넌트의 지연 로딩을 위한 옵션 중 하나입니다. 이 옵션은 Vue 라우터가 현재 사용자가 요청한 라우트를 렌더링하기 전에 브라우저에 의해 백그라운드에서 추가적인 JavaScript 번들을 로드할 수 있도록 합니다. 이 기능은 라우팅 시간을 단축하고 사용자 경험을 개선할 수 있습니다. 그러나 동시에 초기 페이지 로드 속도가 느려질 수 있습니다. webpackPrefetch는 브라우저에서 사용 가능한 대역폭을 차지하므로, 브라우저가 다운로드할 리소스의 양을 줄이려면 webpa.. 더보기 리액트로 년, 연, 일 Date출력 toLocaleString 활용 import "./styles.css"; export default function App() { const date = new Date(); const year = date.toLocaleString("en-US", { year: "numeric" }); const month = date.toLocaleString("en-US", { month: "long" }); const day = date.toLocaleString("en-US", { day: "2-digit" }); return ( 년, 월, 일을 여기에 표시합니다. {year} {month} {day} ); } 더보기 이전 1 2 3 4 5 ··· 10 다음
