본문 바로가기

전체 글

Grafana 설치 및 InfluxDB 연동 Grafana란?" Grafana is the open source analytics & monitoring solution for every database."라고 공식 홈페이지에서 소개하고 있다.InfluxDB, Prometheus, Elasticsearch, MySQL등과 연동하여 실시간 데이터를 시각적으로 표현할 수 있다.주요 기능으로는 대시보드 생성, 알림 설정등이 있으며,  이를 통해 시스템 성능 모니터링, 지표 추적 등에 활용한다.Grafana는 커스터마이징이 가능하고 다양한 플러그인도 지원하고 있다. (Grafana의 Frontend는 typescript, Backend는 Go언어로 작성되었다고 한다.) Grafana 설치 Download Grafana | Grafana LabsOvervi.. 더보기
04. 서버 사이드 렌더링 [모던 리액트 Deep Dive] 서버 사이드 렌더링이란 무엇인지, 싱글 페이지 어플리케이션이란 무엇인지.그리고 최근 React 개발자들이 가장 많이 쓰는 Next.js에 대해 간단히 알아보자. SPA vs SSRSPA란?Server-Side Rendering : SSR Single Page Application : SPA 서버 사이드 렌더링에 반대되는 개념인 싱글 페이지 어플리케이션에 대해 먼저 살펴보자.  Single Page Application이란렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초 페이지를 불러온 이후 페이지 전환이 history.pushState와 history.replaceState로 이루어짐. 즉, 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 .. 더보기
Context API & useReducer [React- The Complete Guide 2024] 더 복잡한 상태관리를 해보자...! 리액트 개발자는 주로 다수의 컴포넌트로 이루어진 앱을 만들어야 하는데, 앱이 복잡할수록, 더 많은 컴포넌트를 사용하게 된다. 보통 컴포넌트 트리로 구성이 되어있는데, 이 과정에서 상태관리가 필요하다..!! Prop Drilling을 통해 다수의 컴포넌트를 거쳐 속성을 전달할 수 있다.하지만 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지 않고, 하위로(목표까지) 전달해주는 역할만 수행한다.=> 원하는 공유데이터를 얻기 위해 여러 컴포넌트를 거치게 되고,     이러한 방식은 컴포넌트들의 재사용성을 어렵게 한다! (+코드도 더 많이 작성해야 함..) 해결방식Component CompositionContext APIuseReducerComponent Composit.. 더보기
Refs & Portals [React - The Complete Guide 2024] Accessing DOM Elements with RefsManaging Values with RefsExposing API Functions from ComponentsDetaching DOM Rendering from JSX Structure with PortalsRefsRefs를 쓰기 전 코드import {useState} from "react";export default function Player() { const[enteredPlayerName, setEnteredPlayerName] = useState(null); const[submitted, setSubmitted] = useState(false); function handleChange(event){ setS.. 더보기
LSTM - 시계열 데이터 예측, 테스트 데이터 너머로.. AMPds2 Dataset df['date'] = pd.to_datetime(df['unix_ts'], unit='s', utc=True)df = df[['date', 'P']]start_date = pd.to_datetime('2012-04-01 07:00:00+00:00')# 1년 뒤 날짜end_date = start_date + pd.DateOffset(years=1)# 해당 기간 동안의 데이터 필터링df = df[(df['date'] >= start_date) & (df['date'] 원하는 형식으로 Formatting EDA800이 넘어가는 이상치가 존재함을 확인. 그 수가 8개로 적기에, 제거하는 방식 선택 date가 끊기는 부분이 없으며, 결측치 또한 없음을 확인. MinMaxScaler( .. 더보기
Node-Red의 세계로 풍덩 Node-Red를 통해 수행할 수 있는 작업들을 추가로 해보자!! local 환경에서 InfluxDB, Node-Red, PostgreSQL 모두 실행하였다.  먼저 전체 Flow를 보여주면 아래와 같다.  구현 기능InfluxDB - 데이터 가져오기, 시각화, csv파일로 내보내기 및 읽어오기기존 데이터 실시간 데이터처럼 활용하기 (streaming), 알람기능 (방송 및 모듈, 이메일 전송)Postgre - users table, 쿼리 실행. (http api를 통한 쿼리 전달 및 실행한 값 돌려받기) GET/POST간단한 Login Page 구현Error 발생 시 보다 자세한 원인을 파악할 수 있도록 Catch Error 노드 추가  사용 데이터셋기존에 수집해두었던 BEMS관련 Data Set 중에.. 더보기
InfluxDB CLI CLI에서 보다 중점적으로  InfluxDB를 사용해보고자 하였다..결론부터 말하자면.... In any version, flux queries will work in UI and not in CLI 후....  그래도 Flux 쿼리가 작동되지 않는거지 기본적인 명령어들을 사용할 수 있으므로사용했던 해당 내용들에 대해 정리해보겠다. Windows Binaries (64-bit) -using PowerShell 기준 InfluxDB 2.X 다운로드 명령어wget https://download.influxdata.com/influxdb/releases/influxdb2-2.7.10-windows.zip -UseBasicParsing -OutFile influxdb2-2.7.10-windows.zipExpan.. 더보기
03. 리액트 훅 깊게 살펴보기 [모던 리액트 Deep Dive] 함수형 컴포넌트가 상태를 사용하거나,클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅 (hook) 을 사용하기 시작했다. 3.1 리액트의 모든 훅 파헤치기useState, useEffect, useMemo, useCallback useRef, useContext,useReducer, useImperativeHandle, useLayoutEffect, useDebugValue..  useStateuseState : 함수형 컴포넌트 내부에서 상태를 정의하고 관리import {useState} from 'react';const [state, setState] = useState(initialState)useState의 초기값이 복잡하거나 무거운 연산을 포함하고 있다면,익명함수 () => 를 .. 더보기