본문 바로가기

JavaScript[JS]25

[JS] ChartJS - Scatter chart point hover event 아래와 같이 하이차트의 경우엔 마우스 호버 시 같은 데이터끼리 포커싱 처리됨 chartjs에서도 해당 기능을 구현하고 싶어 커스텀함 (데이터 구조에서 같은 인터페이스 ID를 가진 포인트끼리 포커싱 처리)➡️ 포커싱되면 포인트가 아래와 같은 느낌으로 보이도록 스타일적용함// ScatterChart.js// chartjs 옵션// 투명도 함수const addOpacity = (color, opacity) => { if (color.startsWith('rgb')) { return color.replace('rgb', 'rgba').replace(')', `,${opacity})`); } if (color.startsWith('#')) { const r = parseInt(color.slice.. 2025. 4. 11.
[JS] ChartJS Drag plugin 구현 chartjs - scatter chart에 drag 기능을 넣어 영역 안에 있는 포인트에 대한 정보를 모달창으로 띄우려고 함 1. 차트 컴포넌트에 넣을 플러그인 코드 생성// ChartDragPlugin.js// Store chart dataconst states = new WeakMap();const getState = (chart) => { const state = states.get(chart); return state || null;};const setState = (chart, updatedState) => { const originalState = getState(chart); // states.set(chart, Object.assign({}, originalState, update.. 2025. 4. 11.
[JS] ChartJS 실시간 업데이트 차트 만들기 📈 - 라인차트 ver. ‼️ 초반에는 실시간 차트를 apexchart로 진행 했는데 속도 이슈로 chartjs로 변경➡️ 데이터 구조const tpsData = [  {    label:'bank',    borderColor: '#008FFB',    data: [      {x: 1742789790000, y: 1},      {x: 1742789800000, y: 2},      {x: 1742789810000, y: 2},      {x: 1742789820000, y: 1},      {x: 1742789830000, y: 1}    ]  },  {    label:'digital',    borderColor: '#00E396',    data: [      {x: 1742789790000, y: 1},      {.. 2025. 4. 1.
[JS] Array Method - Map(), Reduce(), forEach(), Filter() 한번에 정리! Map()새로운 결과 반환 - 그에 따른 memory 공간 차지array 안의 요소를 하나씩 꺼내 변환해서 새로운 값으로 반환하고 싶을 때 사용특히, 모든 요소를 변환하고 싶을 때Reduce()배열 축소 원리배열 각 요소에 대해 주어진 reduce 함수 실행 후 하나의 결과값 반환여러 개의 값이 담긴 배열을 줄여서 하나의 값으로 생성여러 배열을 하나로 합치거나, 축적(누적)도니 값을 반환할 때 사용forEach()주어진 함수를 한번씩 실행 (for loop 느낌)for 문과의 차이- for 문 : break, continue 사용 가능, return 값 반환, 중간에 반복문 중단 가능(break)- forEach문 : break, continue 사용 불가능, return은 현재 반복만 종료시키고 항상 .. 2024. 11. 7.
[React] 리액트에서 .env 환경변수 사용하기 env 사용하는 이유개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있는데이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 .env.env 파일은 항상 프로젝트 최상위 루트에 만들어야함 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시키도록 함 CRA에서 .env 사용하기1. 환경변수 작성create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_을 앞에 작성 후 변수이름을 만들어주어야 합니다."" 사용하지 않도록 주의하.. 2024. 6. 4.
[React] 코드 분할 Code Splitting (lazy, suspense) 애플리케이션의 초기 로드 시간을 줄이고, 성능 향상을 위해 사용사용자 입장에서 더 나은 UI를 제공받을 수 있음 lazy컴포넌트를 동적으로 import하여 필요할 때 로드할 수 있도록 도와주는 함수애플리케이션의 초기 로드시간을 줄이고, 사용자가 특정 경로로 이동할 때만 해당 경로의 컴포넌트를 로드할 수 있음const SomeComponent = React.lazy(() => import('./SomeComponent')); Suspense동적으로 로드되는 컴포넌트를 감싸는 컴포넌트해당 컴포넌트가 로드될 때까지 로딩 스피너같은 대체 UI를 보여줌이를 통해 사용자에게 더 나은 경험을 제공할 수 있음"fallback" 속성을 통해 로딩 중에 표시할 UI를 정의할 수 있음Loading...}>  loadabl.. 2024. 5. 28.
[React] webpack & babel 이 뭔가? webpack 여러 assets(img, HTML, CSS 등)을 하나의 번들로 묶어주는 도구하나로 묶어 더 작은 파일로 배포하면 네트워크 요청 수가 줄기 때문에 성능면에서 좋아짐  babel ES6+ 문법(백틱 사용하는 템플릿리터럴, 화살표 함수 등)을 안전하게 사용 가능하게 함구형 브라우저에서도 호환되도록 변환 ✚ @babel/preset-react  - JSX 및 리액트 관련 문법을 변환해주는 프리셋  - 리액트 사용 시 필요한 babel 플러그인을 모아놓은 것  react-app-rewired 사용하면 CRA의 기본설정(babel 플러그인, webpack 설정)을 수정할 수 있음 2024. 5. 28.
[ApexCharts.js] react에서 차트 활용하는 방법 // 설치방법yarn add react-apexcharts apexcharts// react에서 임포트해주기import ReactApexChart from "react-apexcharts"; ApexCharts 코드 들여다보기 ✅ series : 데이터의 집합으로, 단일 또는 다중 데이터 시리즈가 있음단일 값(Single Values) : 여기서 데이터 배열의 모든 값은 y축 값을 나타냄데이터 범주 간의 비교를 표시해야하는 세로 막대형 차트, 막대형 차트와 같은 경우에는 '단일값' 형식이 더 쉬움series: [{    data: [23, 34, 12, 54, 32, ... , 43]}] 쌍을 이룬 값 (Paired Values) // 2차원 배열series: [{    data: [[1, 34], [3.. 2024. 4. 25.
[ReactFlow] 코드 정리 및 해석 import React, { useState, useCallback } from "react";import ReactFlow, { Controls, applyNodeChanges, applyEdgeChanges, Background,} from "reactflow";import "reactflow/dist/style.css";const initialNodes = [ { id: "1", type: "input", data: { label: "Input Node" }, position: { x: 250, y: 25 }, }, { id: "2", data: { label: Default Node }, position: { x: 100, y: 125 }, },.. 2024. 3. 18.

티스토리툴바